簡介
快速的網頁應用程式就是個成功的網頁應用程式。您需要盡可能改善應用程式的實際效能和使用者體驗，才能成為開發人員。除了確保使用者享有優質體驗的正確做法，也是確保使用者享有優質體驗的正確做法，但要進行最佳化的仍是十分實際且重要的業務理由。Amazon 評估的網站延遲時間每 100 毫秒，銷售量就下降了 1%，而 Google 測量得出的流量每 0.5 秒延遲 20% (引用)。這些數據為實際數據，會對您的企業和網頁應用程式造成實際影響。
網路速度極其重要，Google 甚至致力於提升網路速度。如果還有其他用來改善應用程式效能的理由，Google 宣布的網頁速度已納入排名演算法中。
目前有許多已發布的最佳做法可協助您提升網頁應用程式的效能，包括兩本優質書籍 (高效能網站和速度更快的網站)。伺服器 (實作正確的快取控制標頭) 和用戶端 (提供圖片寬度和高度屬性) 的技術會整合到端對端策略，以提供最佳效能。由於提示與技巧眾多，因此很難評估這些模型與真實網頁及實際網頁應用程式有何差異。
幸好，Chrome 開發人員工具 (隨附於 Chrome 的每個執行個體) 提供了一款絕佳工具，可用於檢查網頁應用程式，並提供客製化建議來增強效能及縮短延遲時間。本文將介紹「稽核」面板，這項工具與廣受歡迎的「Y 慢」YSlow工具類似，並說明如何運用這項工具加快網站速度、縮短延遲時間並提高使用者滿意度。
請注意，「稽核面板」工具目前僅適用於 Chrome，但我們預期其他 WebKit 瀏覽器最終會整合這項工具。
入門課程
為了說明「稽核面板」如何提供改善網頁應用程式效能的建議，我們會將這項工具用於專門的 www.html5rocks.com。我們將會使用「稽核面板」來協助加快網站速度。
使用 Chrome 圖示 (位於 Chrome 視窗的右上方)，依序選取「工具」>「開發人員工具」即可輕鬆啟動開發人員工具。
如要進一步瞭解如何開始使用開發人員工具，請參閱官方說明文件。
「稽核」面板位於主要工具按鈕面板中。您會發現，選取之後，「稽核」面板尚未完成分析網頁應用程式的執行過程。執行所有經驗法則可能相當耗時，對於大型網頁應用程式 (例如 Gmail) 而言更是如此，因此這項工具預設為停用。
首先請點選「Run」(執行) 按鈕，這會重新載入網頁應用程式，並開啟效能經驗法則。頁面重新載入後，畫面上會顯示類似螢幕截圖的清單。
在「稽核」面板上，您會看到建議的嚴重程度依嚴重性分類 (最嚴重者會以紅點標示)，而嚴重性為「中」的建議則會以黃色圓點標示。這種顏色編碼方式可協助您排定建議的優先順序，並將重點放在最重要的建議 (也就是最大獲利)。
括號中的數字 (在建議後) 代表稽核工具偵測到的執行個體數量。舉例來說，有 12 個執行個體是「使用瀏覽器快取」。可讓您瞭解套用建議的頻率。
速度策略
如先前所述，提供許多廣為人知且經過實測的策略，可將網頁應用程式效能最佳化。本文不會詳細說明，但您可以輕鬆找到需要的更多資訊和詳情。關於網頁應用程式最佳化細節的實用資源，包括「讓網頁加速完成教學課程」和可快速擴充的延遲時間無所不在，能夠為您創造銷售成本。
「稽核」面板會將建議分成兩類：「網路使用率」和「網頁效能」。
根據「稽核」面板提供的資訊，為改善網路使用率，我們應該：
- 利用瀏覽器快取
- 利用 Proxy 快取
- 盡量減少 Cookie 大小
- 從無 Cookie 網域放送靜態內容
- 指定圖片尺寸
如要提升網頁效能，建議您採取以下動作：
- 最佳化樣式和指令碼的順序
- 移除未使用的 CSS 規則
讓我們來看看可以提高 htmlrocks.com 成效的其中一項策略。
使用瀏覽器快取功能
舉例來說，我們先來看看使用瀏覽器快取功能的建議。具體來說，這代表什麼意思？在使用者介面中開啟選項，系統會顯示下列詳細資料：
- 下列資源缺少快取到期時間。瀏覽器可能不會快取未指定到期時間的資源。
- 下列可快取資源的生命週期較短。
- 以下資源明確無法快取。如果可以，請考慮將其設為可快取。
快取資源是提高網路使用率的絕佳方式，可以降低開發人員的頻寬帳單費用，並縮短使用者回應時間。遺憾的是，這項工具無法說明您需要做些什麼，因此我們需要深入研究建議，並運用我們對於網頁應用程式效能最佳化的知識，做出這些建議。
快取處理
我們不需要瞭解 HTTP 快取，可以涵蓋一些基本概念。HTTP 通訊協定包含快取指示，可讓伺服器和用戶端減少需要傳輸的資料量。舉例來說，伺服器可指示用戶端在本機儲存資源一段時間，這樣就不需要再次要求資源。用戶端也可以詢問伺服器的資源，是否比儲存在本機的資源來得更新。在理想情況下，如果資源是靜態資源，伺服器應指示用戶端將資源儲存在本機，避免日後向伺服器要求資源。可想而知，HTTP 快取的許多細節相當驚人，但一般主題是「將資源儲存在本機用戶端，以減少透過傳輸的資料量減少了傳輸的資料量」。
修正非快取資源
以下深入介紹一項建議，並瞭解如何將稽核建議連結至開發人員工具中的其他工具。具體而言，讓我們來看看如何修正「下列資源明確無法快取」。
由於快取是透過 HTTP 通訊協定完成，因此我們需要查看 http://www.html5rocks.com/ 資源的 HTTP 要求和回應。只要按一下資源，即可查看原始要求及回應標頭及詳細資料。
系統會將您導向「網路、資源」或「來源」面板 (視點選的資源類型而定)，提供詳細資訊。在本範例中，系統會導向「網路」面板。
我們嘗試確認伺服器已告知用戶端「不要快取 html5rocks.com 的首頁」。做法是按一下資源來查看回應標頭，因為這些標頭和指示都是由伺服器傳送。
Cache-Control 標頭。沒問題，伺服器已將「Cache-Control: no-cache」標頭傳送至用戶端。就像你可以想像的，這會指示用戶端一律要求資源，且不要在本機快取資源。具體來說，「no-cache」的 HTTP 規格會讀取：
「如果 no-cache 指令未指定欄位名稱，則快取「不得」使用回應滿足後續要求，而不必重新與來源伺服器成功重新驗證。透過這種方式，原始伺服器即使設為將過時回應傳回用戶端要求的快取，也能夠防止快取。」
這就是「稽核面板」建議啟用快取的原因，因為伺服器和用戶端會傳送多餘的資訊。
確認稽核建議的根本原因後，我們該如何修正問題？在這種情況下，解決方案涉及伺服器端設定或程式碼。視您的設定而定，您可以透過網路伺服器的設定或網頁應用程式架構的設定啟用快取功能。具體來說，建議您針對要快取的所有資源，加入 Expiration 標頭和 Cache-Control: private，當中包含 max-age 參數。
那就是建議功能
請記住，「稽核」面板是根據一般經驗法則建議改善功能。而是將最佳做法 (也就是多年來學到的最佳做法) 套用至您的網頁應用程式。在多數情況下，這些建議都是隨時保持的，必須謹記在心。
不過在某些情況下，這些建議可能並不正確，但實際上可能並未帶來任何改善。舉例來說，如果您的網頁只有一張大型圖片，「稽核」面板會建議在 <img> 標記中加入寬度和高度屬性，這樣轉譯引擎就會知道圖片尺寸，而不必下載及檢查圖片。雖然這通常都是絕佳的建議，但如果圖片是網頁上唯一的元素，那麼這項功能就十分實用。
瞭解這些建議後，別忘了應用這些建議。另外，別忘了評估變更前後的成效，確保一切都有進步。
摘要
「稽核」面板是易於使用的工具，可快速說明如何提升網頁應用程式的成效。速度是網頁應用程式的重要屬性，因為許多公司發現成效與收益或活動之間存在直接關聯性。最佳化應用程式效能不僅是對使用者的正確做法，更是提升業務收益的不二法門。