簡介
快速的網路應用程式就是成功的網路應用程式。開發人員必須同時改善應用程式的實際和感知效能，才能完成工作。這不僅是為了確保使用者享有優質體驗，也是出於實用且重要的商業考量。Amazon 的測試結果顯示，網站延遲時間每增加 100 毫秒，銷售量就會下降 1%；Google 的測試結果顯示，延遲時間每增加 0.5 秒，流量就會下降 20% (參考資料)。這些是實際的數字，對您的業務和網頁應用程式有實際影響。
網路速度非常重要，Google 甚至還專門投入資源提升網路速度。如果您需要其他理由來改善應用程式效能，Google 已宣布將網頁速度納入排名演算法。
網路上有許多最佳做法，可協助您提升網路應用程式的效能，其中包括兩本優秀的書籍 (High Performance Web Sites 和 Even Faster Web Sites)。伺服器 (實作正確的快取控制標頭) 和用戶端 (提供圖片寬度和高度屬性) 的技術，可結合成端對端策略，以便最佳化效能。有這麼多訣竅，有時很難評估這些訣竅如何與實際情況和您的實際網頁應用程式對應。
幸好，Chrome 開發人員工具 (每個 Chrome 例項都包含此工具) 提供優異的工具，可檢查網路應用程式，並提供客製化建議，協助您提升效能並縮短延遲時間。本文將介紹審核面板，其範圍與廣受歡迎的 YSlow 工具相似，並說明如何使用該面板加快網站速度、減少延遲時間，以及提升使用者滿意度。
請注意，稽核面板工具目前僅適用於 Chrome，但我們預期其他 WebKit 瀏覽器最終也會整合這項工具。
開始使用
為了說明稽核面板如何建議改善網頁應用程式效能，我們將使用這項工具檢查我們自己的 www.html5rocks.com。我們會使用稽核面板，讓網站更快。
只要使用 Chrome 圖示 (Chrome 視窗右上方)，然後依序選取「工具」>「開發人員工具」，即可輕鬆啟動開發人員工具。
如要進一步瞭解如何開始使用開發人員工具，請參閱官方說明文件。
「Audits」面板位於主要工具按鈕面板中。您會發現，選取後，稽核面板並未開始分析您的網頁應用程式。執行所有推論法可能會很慢，尤其是針對 GMail 這類大型網頁應用程式，因此該工具預設為停用。
讓我們按一下「Run」按鈕，重新載入啟用效能推論法的網頁應用程式。頁面重新載入後，您會看到類似下方螢幕截圖的推薦清單。
您會發現「稽核」面板會依嚴重程度分類建議，其中最嚴重者會標示為紅點，中度嚴重者則標示為黃點。這項色彩編碼可協助您決定優先處理哪些建議，先著重於最重要的 (以及成效最大的) 建議。
在建議後方括號中的數字，是稽核工具偵測到的例項數量。舉例來說，有 12 個「善用瀏覽器快取」的例項。這可讓您瞭解建議的適用頻率。
速度策略
如前所述，有許多眾所皆知且經過大量測試的策略，可用於改善網頁應用程式效能。我們不會在本文中深入探討這些內容，但您可以輕鬆找到更多資訊和詳細資料。如要進一步瞭解如何最佳化網頁應用程式，請參閱「加快網站速度的訣竅」和「高可擴充性延遲問題無所不在，且會影響銷售量」等實用資源。
稽核面板會將建議分為兩個類別：網路使用率和網頁效能。
根據稽核面板，我們應採取以下做法來改善網路使用率：
- 善用瀏覽器快取
- 善用 Proxy 快取
- 盡量縮小 Cookie 大小
- 透過無 Cookie 網域提供靜態內容
- 指定圖片尺寸
如要改善網頁效能，我們應：
- 最佳化樣式和指令碼的順序
- 移除未使用的 CSS 規則
讓我們來看看可以用來改善 htmlrocks.com 效能的其中一個策略。
使用瀏覽器快取功能
舉例來說，我們先來瞭解如何運用瀏覽器快取功能。具體來說，這代表什麼意思？在 UI 中開啟選項後，我們會看到下列詳細資料：
- 下列資源缺少快取到期時間。瀏覽器可能不會快取未指定到期日的資源。
- 下列可快取的資源具有短暫的有效期限。
- 以下資源明確不允許快取。盡可能將這些資料設為可快取。
快取資源是改善網路使用率的絕佳方法，可讓開發人員降低頻寬費用，並縮短使用者回應時間。不過，該工具並未明確指出您需要採取哪些行動，因此我們必須深入瞭解最佳化建議，並運用對網路應用程式效能最佳化知識，將這些建議付諸實現。
快取
我們可以不深入探討 HTTP 快取，但會介紹一些基本概念。HTTP 通訊協定包含快取指示，可讓伺服器和用戶端減少透過網路傳輸的資料量。舉例來說，伺服器可以要求用戶端將資源儲存在本機一段時間，這樣就不必再次要求資源。用戶端也可以詢問伺服器的資源是否比本機儲存的資源更新。在理想情況下，如果資源為靜態資源，伺服器應告知用戶端將資源儲存在本機，避免日後向伺服器要求資源。您可以想像，HTTP 快取有大量細節，但總體主題是「透過在本機上儲存資源，減少透過網路傳送的資料量」。
修正無法快取的資源
讓我們深入探討其中一個建議，並瞭解如何將稽核建議連結至 DevTools 中的其他工具。具體來說，我們來看看如何修正「下列資源明確不可快取」的問題。
由於快取是透過 HTTP 通訊協定完成，因此我們需要查看 http://www.html5rocks.com/ 資源的 HTTP 要求和回應。只要按一下資源，即可查看原始要求和回應標頭和詳細資料。
系統會將您帶往「Network」、「Resources」或「Sources」面板 (視點選的資源類型而定)，並提供更多資訊。在這種情況下，系統會將我們帶往「Network」面板。
我們正在確認伺服器是否已告知用戶端「不要快取 html5rocks.com 首頁」。為此，我們按一下資源，查看「回應標頭」，因為這些是伺服器傳送的標頭和指示。
Cache-Control 標頭。果然，伺服器會將「Cache-Control: no-cache」標頭傳送至用戶端。這會告訴用戶端一律要求資源，且不要在本機快取。具體來說，「no-cache」的 HTTP 規格如下：
「如果 no-cache 指令未指定欄位名稱，快取不得使用回應來滿足後續要求，除非已成功與原始伺服器重新驗證。這可讓原始伺服器避免快取，即使快取已設定為針對用戶端要求傳回過時的回應也一樣。」
這正是稽核面板建議啟用快取功能的原因，否則伺服器和用戶端會傳送可能多餘的資訊。
我們已確認審查建議的根本原因，請問該如何修正？在這種情況下，解決方案會涉及伺服器端設定或程式碼。視設定而定，您可以透過網路伺服器設定或網路應用程式架構中的設定啟用快取功能。具體來說，您應為任何要快取的資源，加入 Expires 標頭和 Cache-Control: private 參數，並加上 max-age 參數。
建議僅供參考
請注意，稽核面板會根據一般推測法提供改善建議。它會將多年累積的最佳做法，套用至您的特定網頁應用程式。大多數情況下，這些最佳化建議都非常實用，值得您仔細參考。
不過，在少數情況下，系統提供的建議可能正確，但實際上並不會帶來任何改善。舉例來說，如果網頁只有一個大型圖片，審核面板會建議您在 <img> 標記中加入寬度和高度屬性 (讓轉譯引擎不必下載及檢查圖片，就能瞭解圖片的尺寸)。雖然這項建議通常很實用，但如果圖片是網頁上唯一的元素，就不會有太大幫助。
請務必在瞭解這些建議後加以套用。別忘了在變更前後評估成效，確保成效確實有所提升。
摘要
稽核面板是一項功能強大且操作簡單的工具，可快速顯示如何改善網頁應用程式的效能。速度是網頁應用程式的重要屬性，許多公司都發現效能與收益或活動之間存在直接關聯。除了為使用者提供良好體驗，您也應將應用程式效能最佳化，以便提升業務業績。