作為網站所有者，在執行速度測試以檢查效能時，您有很多選擇。之前我們深入瞭解了Pingdom工具。今天我們想深入探討如何更好地使用和理解來自流行的網站速度測試工具GTmetrix的資料。像這樣的工具依賴於評分系統和分數，以及您網站上可能出現的問題的警告。有時這些可能會令人困惑，因此花一些時間來解釋它們的實際含義，不僅可以幫助您提高分數，還可以幫助您提高網站的效能，這才是真正重要的。
GTmetrix由位於加拿大的公司GT.net開發，作為其託管客戶輕鬆確定其網站效能的工具。除了Pingdom，它可能是當今網路上最知名和最常用的速度測試工具之一！與其他開發工具相比，GTmetrix非常易於使用，初學者可以很快上手。它結合使用Google PageSpeed Insights和YSlow來生成分數和推薦。
GTmetrix速度測試工具
GTmetrix分析選項
GTmetrix的基本版本是完全免費的，您只需註冊一個帳戶即可訪問許多選項。他們也有高階計劃，但在今天的帖子中，我們將使用免費版本。如果您有一個帳戶，您可以使用指定一些額外的分析選項。
第一個是選擇要測試URL的位置。您選擇的物理位置實際上非常重要，因為它與您的網站實際託管的位置有關。延遲越少，載入時間越快。目前可用的地點包括：
- 美國達拉斯
- 中國香港
- 英國倫敦
- 印度孟買
- 悉尼，澳大利亞
- 巴西聖保羅
- 加拿大溫哥華
您可以選擇要使用的瀏覽器。您可以使用Chrome（桌面）和Firefox（桌面）進行測試。移動版本在其高階計劃中可用。它們還允許您更改連線速度，這意味著您可以模擬各種連線型別以檢視它們如何影響您的頁面載入。
GTmetrix測試格式選項
其他選項包括建立視訊的能力。這可以幫助您除錯問題，因為您可以檢視頁面的呈現方式。AdBlock Plus是一個不錯的功能。如果您正在執行Google Adsense等第三方廣告網路，則可以啟用此選項以檢視廣告對載入時間的全部影響。
GTmetrix額外選項
其他選項包括停止測試載入（稍後我們將深入探討）、能夠隨請求一起傳送cookie、使用HTTP身份驗證、將URL列入白名單和黑名單的能力、螢幕解析度和裝置畫素比以及使用者代理覆蓋.
使用GTmetrix速度測試工具進行分析
網頁由不同的資產組成，例如HTML、JavaScript、CSS和影象。其中每一個都會生成請求以呈現您在網站上看到的內容。通常，您的請求越多，您的網站載入速度就越慢。情況並非總是如此，但大多數時候都是如此。
下面我們將分解每個GTmetrix部分，並更詳細地解釋這些資訊與您網站的整體效能有關的含義以及如何處理這些建議。 記住不要過分關注分數，而要在您的網站上進行實際的速度改進。
- GTmetrix Summary（GTmetrix概要）
- Performance（效能）
- Structure（結構）
- Waterfall Chart（瀑布圖）
- Video（視訊）
- History（歷史記錄）
GTmetrix概要（效能分數和詳細資訊）
當您通過GTmetrix執行WordPress網站時，它會生成一份效能報告，其中包括您的“GTmetrix Grade”和“Web Vitals”。
GTmetrix等級是根據兩個指標計算得出的——效能和結構。
- GTmetrix Performance是來自Lighthouse站點審計工具的效能分數
- GTmetrix Structure是一種專有的效能指標，用於衡量頁面的整體效能。
2020年，Google推出了一套標準化的Web效能和使用者體驗指標，稱為Web Vitals。Web Vitals包含多種指標，但GTmetrix考慮的指標是最大內容繪製 (LCP)、總阻塞時間 (TBT) 和累積佈局偏移 (CLS)。
- 最大內容繪製 (LCP)是載入頁面最大部分所需的時間。對於某些站點，LCP可以是一個大的Hero影象，而在其他站點上，LCP可能指的是正文。
- 總阻塞時間 (TBT)是頁面在使用者與其互動之前被阻塞的時間。阻止渲染的CSS和JS會對TBT產生巨大的影響。
- 累積佈局移位 (CLS)是指在頁面載入時元素的移位。例如，包含嵌入式推文的頁面佈局會隨著頁面載入而發生巨大變化。
在我們的示例中，我們使用案例研究域kinstalife.com。在我們的第一次速度測試中，我們的網站記錄了以下統計資料。
- GTmetrix等級 – B
- GTmetrix效能 – 85%
- GTmetrix結構 – 83%
- LCP – 1.0s
- TBT – 0毫秒
- CLS – 0
kinstalife.com的GTmetrix速度測試
然後我們進行了額外的測試，現在我們的GTmetrix等級是“A”！那是怎麼回事？如果您多次通過GTmetrix速度測試工具執行您的網站，您可能也會注意到這一點。發生這種情況的原因之一是快取，包括DNS快取和伺服器快取。在我們的瀑布分析中進一步瞭解原因。
我們使用GTmetrix進行的第二次速度測試
GTmetrix概要頁面還包含速度視覺化，顯示頁面載入期間關鍵事件的時間線。在下面的螢幕截圖中，您可以看到kinstalife.com的TTFB、FCP、LCP、載入時間、互動時間和完全載入時間。
在概要頁面的底部，還有“熱門問題”和“頁面詳細資訊”部分。在“熱門問題”下，您可以看到要修復的高優先順序專案列表，而“頁面詳細資訊”提供頁面的百分比和檔案大小細分。
GTmetrix熱門問題和頁面詳細資訊
效能
接下來是GTmetrix的“Performance”選項卡，它顯示了許多來自Lighthouse效能資料的有用指標。除了摘要頁面上顯示的LCP、TBT和CLS之外，“效能指標”部分還顯示了速度指數 (SI)、互動時間 (TTI) 和首次內容繪製 (FCP)。
GTmetrix Lighthouse效能指標
雖然“效能指標”部分沒有準確地向您展示您需要修復的內容，但它確實很好地概述了您可以改進哪些關鍵使用者體驗指標。
在頁面的下方，GTmetrix還顯示了一些更傳統的“瀏覽器計時”統計資訊，包括載入時間、第一個位元組的時間、完全載入的時間等。在過去，這些傳統指標非常重要。但是，隨著Google為使用Web Vitals的標準化指標鋪平道路，我們建議改為針對這些指標進行優化。在大多數情況下，您會發現針對Web Vitals進行優化也會產生良好的瀏覽器計時指標。
GTmetrix瀏覽器計時指標
結構
GTmetrix速度測試的“Structure”選項卡是您可以檢視影響站點效能的特定問題的地方。此頁面非常有用，因為它為您提供了可操作的資訊，例如“消除渲染阻塞資源”和“最小化CSS”以開始優化您的網站。
我們將嘗試涵蓋我們看到WordPress網站所有者苦苦掙扎的最常見和最受歡迎的那些。請務必將此文章新增為書籤，因為我們將不斷更新它。通常，如果您在您的網站上改進這些，您應該會看到效能的提高。
GTmetrix PageSpeed分數
提供縮放影象
在您的網站上處理影象時，您應該始終嘗試將它們上傳到縮放，而不是讓CSS調整它們的大小。如果你不這樣做，你最終會得到服務縮放影象推薦。如果您使用的是WordPress，預設情況下，它會在將影象上傳到媒體庫時調整影象大小。這些設定可以在“設定 > 媒體”下找到。您需要確保最大寬度接近您網站的寬度。這樣，CSS不會嘗試將影象大小調整為適合內部。您還可以使用影象優化外掛自動調整它們的大小。
提供縮放影象
內聯小CSS
通常不建議內聯CSS，因為它會增加頁面請求的整體下載大小。但是，如果您的站點很小，請求最少，它可以提高您的效能。
內聯小CSS
要內聯您的CSS，您可以使用像Autoptimize這樣的免費外掛。只需檢查“內聯所有CSS？” 選項，然後確保您已排除未內聯的其他CSS檔案。
自動優化內聯CSS
內聯小JavaScript
就像內聯小CSS一樣，內聯小JavaScript也是如此。通常不建議這樣做，因為它會增加頁面請求的整體下載大小。但是，如果您的站點很小，請求最少，它可以提高您的效能。同樣，您可以使用Autooptimize的JavaScript設定。
內聯小JavaScript
利用瀏覽器快取
利用瀏覽器快取是人們難以接受的一個非常常見的建議。這是由於您的Web伺服器上沒有正確的HTTP快取標頭而生成的。請參閱我們關於如何修復瀏覽器快取警告的深入文章。您只能在您控制的資源上解決此問題。例如，如果您在第三方廣告網路上看到此內容，則您無能為力。
利用瀏覽器快取
從一致的URL提供資源
如果您從一致的URL看到服務資源，則很可能是從同一 URL 提供了相同的資源。很多時候，當涉及到查詢字串時，就會發生這種情況。檢視如何從靜態資源中刪除查詢字串。一旦它們消失，它應該不再需要載入它兩次。
從一致的URL提供資源
延遲解析JavaScript
JavaScript和CSS預設是渲染阻塞的。這意味著它們可以阻止網頁顯示，直到它們被瀏覽器下載和處理。defer屬性告訴瀏覽器在HTML解析完成之前推遲下載資源。解決此問題的一些簡單方法是利用免費的Autoptimize或Async JavaScript外掛。請務必檢視我們關於如何消除渲染阻塞JavaScript和CSS的深入文章。
延遲解析JavaScript
如需深入解釋，請閱讀：如何在WordPress中延遲解析Javascript警告（4種方法）。
最小化CSS和JavaScript
Minification（最小化）本質上是在不改變其功能的情況下從原始碼中刪除所有不必要的字元。這可能包括換行符、空格、縮排等。這樣做可以節省資料位元組並加快下載、解析和執行時間。
最小化CSS和JavaScript
同樣，免費的Autoptimize外掛非常適合這個。只需確保選中“Optimize JavaScript Code”和“Optimize CSS Code”即可。如果您有一個大型網站，您可能還想使用下面的高階設定，因為有些可能會損害您網站的效能。通常不建議在大型網站上內聯或組合CSS和JavaScript。這就是HTTP/2的力量發揮作用的地方。
自動優化縮小CSS和JavaScript
優化影象
根據HTTP Archive的資料，截至2017年4月，影象平均佔網頁總體積的66%。因此，在優化您的WordPress網站時，影象是您應該首先開始的地方！它比指令碼和字型更重要。
優化影象
在一個完美的世界裡，每張圖片都應該在上傳到WordPress之前進行壓縮和優化。但不幸的是，這並不現實。因此，我們建議使用一個好的影象優化外掛。這將有助於自動壓縮您的影象，調整它們的大小，並確保它們在您的網站上輕量且快速載入。檢視我們關於如何優化網路影象的深入文章。
減少初始伺服器響應時間
對於WordPress，初始伺服器響應時間慢的主要原因是缺少頁面快取。在沒有頁面快取的情況下，WordPress使用PHP為每個單獨的請求動態構建頁面，這意味著它很快就會被請求淹沒。啟用頁面快取後，您的站點可以伺服器預先生成的HTML檔案，這比使用PHP來滿足每個頁面請求要快得多，並且更具可擴充套件性。
減少初始伺服器響應時間
如果您的WordPress主機不支援頁面快取，您可以安裝快取外掛，例如WP Rocket或W3 Total Cache。為了進一步減少伺服器響應時間，我們建議將Cloudflare APO與您的WordPress站點整合。Cloudflare的這項創新優化服務將您網站的HTML頁面分發到世界各地，這可以在全球範圍內縮短伺服器響應時間。
縮小HTML
就像CSS和JavaScript一樣，HTML也可以被縮小以去除不必要的字元併為您節省位元組資料以加快執行時間。
縮小HTML
免費的自動優化外掛也非常適合這個。只需啟用“Optimize HTML Code”選項即可。
自動優化HTML程式碼
啟用GZIP壓縮
GZIP是一種檔案格式和用於檔案壓縮和解壓縮的軟體應用程式。GZIP壓縮在伺服器端啟用，並允許進一步減小HTML、樣式表和JavaScript檔案的大小。它不適用於影象，因為它們已經以不同的方式壓縮。由於壓縮，有些人已經看到了高達70%的減少。當涉及到WordPress時，這可能是您可以進行的最簡單的優化之一。
啟用GZIP壓縮
要在Apache中啟用GZIP壓縮，只需將以下程式碼新增到您的 .htaccess 檔案中。
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
如果您在NGINX上執行，只需將以下內容新增到您的nginx.conf檔案中。
gzip on; gzip_disable "MSIE [1-6]\.(?!.*SV1)"; gzip_vary on; gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
請務必檢視我們關於如何啟用GZIP壓縮的深入文章。
最小化重定向
最小化從一個URL到另一個URL的HTTP重定向可以減少額外的RTT和使用者等待時間。檢視我們關於WordPress重定向的文章，其中我們發現2個錯誤的重定向將網站載入時間增加了58%！簡單明瞭，WordPress重定向會減慢您的網站速度。這就是為什麼值得花時間儘量減少重定向到您網站體驗的訪問者數量的原因。
最小化重定向
指定快取驗證器
當缺少HTTP快取標頭時，會出現指定快取驗證器建議。這些應該包含在每個源伺服器響應中，因為它們都驗證和設定快取的長度。如果沒有找到標頭，它將每次都為資源生成一個新請求，這會增加伺服器的負載。 利用快取標頭可確保 不必從伺服器載入後續請求，從而為使用者節省頻寬並提高效能。請記住，您無法在您無法控制的第3方資源上解決此問題。
指定快取驗證器
有許多不同的HTTP快取標頭可用於修復此建議。檢視我們關於如何指定快取驗證器的深入文章。
指定影象尺寸
就像您不應該讓CSS調整影象大小一樣，您也應該指定影象尺寸。這意味著在HTML程式碼中包含寬度和高度。
不正確
<img src="https://domain.com/images/image1.png">
正確的
<img src="https://domain.com/images/image1.png">
指定影象尺寸
從靜態資源中刪除查詢字串
您的CSS和JavaScript檔案通常在其URL的末尾包含檔案版本，例如domain.com/style .css?ver=4.6。即使存在cache-control:public標頭，某些伺服器和代理伺服器也無法快取查詢字串。因此，通過刪除它們，您有時可以改善快取。這可以通過程式碼或免費的WordPress外掛輕鬆完成。
檢視我們關於如何從靜態資源中刪除查詢字串的深入文章。請記住，您無法在您無法控制的第3方資源上解決此問題。
從靜態資源中刪除查詢字串
指定Vary: Accept-Encoding標頭
這是一個HTTP標頭，應該包含在每個源伺服器響應中，因為它告訴瀏覽器客戶端是否可以處理內容的壓縮版本。通常，當啟用GZIP壓縮時，這也是固定的。但請務必檢視我們關於如何修復指定變化的深入文章：接受編碼標頭 推薦。同樣，您無法在第三方資源上解決此問題。
指定一個變數：接受編碼標頭
GTmetrix瀑布圖
GTmetrix瀑布圖顯示您網頁上的所有單個請求（如下所示）。然後，您可以分析每個請求，以檢視導致站點延遲和效能問題的原因。下面是對每種顏色在每個請求中的含義的更深入的總結和/或定義。
GTmetrix瀑布圖
阻塞（棕色）
當瀏覽器載入網頁時，JavaScript和CSS資源通常會阻止網頁顯示，直到它們被瀏覽器下載和處理。此時間延遲在GTmetrix瀑布圖中顯示為阻塞。檢視我們關於如何消除阻塞渲染的JavaScript和CSS的深入文章以 獲取更多資訊。
阻塞
DNS Lookup（藍綠色）
您可以將DNS查詢視為電話簿。有稱為域名伺服器的伺服器儲存有關您的網站的資訊以及應將其路由到哪個IP。當您第一次通過GTmetrix執行您的網站時，它會執行新的查詢，並且必須查詢DNS記錄以獲取IP資訊。這會導致一些額外的查詢時間。
當您第二次通過GTmetrix執行您的網站時，它會快取DNS，因為它已經知道IP資訊並且不必再次執行查詢。這就是為什麼您可能會喜歡您的網站在多次通過GTmetrix執行後看起來更快的原因之一。正如您在下面的螢幕中看到的，在我們執行的第二次測試中，初始DOC負載的DNS查詢時間為0毫秒。這是很多人誤解的一個領域！我們建議您多次執行測試並取平均值，除非您希望DNS作為報告的一部分，在這種情況下您可以進行第一次測試。
第二次DNS查詢
如果您使用的是CDN，這同樣適用於您的資產（JavaScript、CSS、影象）。CDN快取的工作方式與DNS非常相似，一旦快取，它在連續載入時會快得多。另一個加快DNS速度的技巧是使用DNS預取。這允許瀏覽器在後臺對頁面執行DNS查詢。您可以通過在WordPress網站的標題中新增一些程式碼行來實現。請參閱下面的一些示例。
<!-- Prefetch DNS for external assets --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//cdn.domain.com">
或者，如果您正在執行WordPress 4.6或更高版本，您可能需要使用資源提示。開發人員可以使用wp_resource_hints過濾器為 、 或 . 新增自定義域名和URL的dns-prefetch、 preconnect、 prefetchL和 prerender。
連線（綠色）
GTmetrix中的連線時間是指TCP連線，或建立TCP連線所需的總時間。您實際上並不需要了解它是如何工作的，但這只是主機/客戶端和伺服器之間必須發生的一種通訊方法。
連線
傳送（紅色）
傳送時間只是網路瀏覽器向伺服器傳送資料所花費的時間。
傳送
等待（紫色）
GTmetrix中的等待時間實際上是指到第一個位元組的時間，在某些工具中也稱為TTFB。TTFB是一種衡量Web伺服器或其他網路資源響應能力的指標。一般來說，任何低於100毫秒的時間都是可以接受的，並且TTFB很好。如果您接近300-400毫秒的範圍，您的伺服器上可能有一些錯誤配置，或者可能是時候升級到更好的Web堆疊了。正如您在下面的測試中看到的那樣，它大約是100毫秒，這很棒。
等待
一些減少TTFB的簡單方法是確保您的主機有適當的快取並使用CDN。檢視我們關於在您的WordPress網站上減少TTFB的所有方法的深入文章。
接收（灰色）
接收時間只是網路瀏覽器從伺服器接收資料所花費的時間。
接收
活動時間
每次您請求一個頁面時，它都有渲染和載入事物的事件時間。
- 首次繪製（綠線）：瀏覽器在頁面上進行任何型別渲染的第一個點，例如顯示背景顏色。
- DOM 載入（藍線）： DOM（文件物件模型）準備就緒的點。
- Onload（紅線）： 當頁面的處理完成並且頁面上的所有資源（圖片、CSS等）都下載完成時。
- 完全載入（紫線）： Onload事件觸發後的點，並且2秒內沒有網路活動。
活動時間
HTTP響應標頭
您還可以單擊單個請求，檢視他們所說的HTTP響應標頭。這提供了有價值的資訊。在下面的螢幕中，我們可以立即看到諸如gzip在Web伺服器上啟用，它在HHVM上執行，它正在從快取中提供服務（HIT，否則會顯示MISS），快取控制標頭，伺服器架構（這個並不總是可見的），過期標頭，瀏覽器使用者代理等等。
GTmetrix中的HTTP響應標頭
需要注意的另一件事是GTmetrix 工具確實支援HTTP/2，這與Pingdom不同，因為它目前使Chrome 58+來執行其測試。Chrome在版本49中新增了HTTP/2支援。因此，在選擇要使用的速度測試工具時請記住。
視訊
為了幫助您除錯視覺故障和前端效能問題，最新版本的GTmetrix包含一個“Video”選項卡。啟用視訊功能後，GTmetrix將自動錄製一個可嵌入的視訊，顯示每個效能測試的頁面載入方式。此功能對於除錯僅出現在某些瀏覽器和螢幕尺寸組合上的視覺問題非常有用。
GTmetrix視訊錄製
歷史
在歷史選項卡下，您可以檢視所有過去的速度測試。免費帳戶中儲存的數量是有限制的。您還可以監控一個URL，該URL允許您跟蹤一段時間內的效能，並在它們發生時檢視任何更改。
歷史
一個非常酷的功能是您可以選擇過去的報告並並排比較它們。這可能非常有用，尤其是當您在網站上進行優化以檢視是否有改進時。請記住，有時您也可以過度優化。
在GTmetrix中比較報告
案例研究域配置
如果您在我們深入的GTmetrix潛水中得到了這麼多，那麼您就可以享受美食了。看到人們分享技巧和案例研究，但又不分享他們是如何到達那裡的，總是很煩人。所以下面是我們對上面使用的案例研究域的確切配置！隨意複製它。
架構
- 案例研究域 (perfmatters.io) 託管在Google Cloud Platform上（中心位置），使用HTTP/2、NGINX、MariaDB，這些都有助於加快載入時間。
- 該站點正在使用HHVM。
- 該站點未使用任何快取外掛。
WordPress外掛
這是WordPress網站上使用的外掛列表。
- 免費的CDN Enabler外掛用於部署KeyCDN。
- 免費的CAOS外掛用於在本地同步Google Analytics。
- 高階perfmatters外掛用於擺脫不必要的HTTP請求並禁用諸如Emojis和Embeds之類的東西。
- 高階Gonzalez外掛用於禁用某些指令碼的載入。
- 高階Imagify外掛用於壓縮影象。
推薦的進一步閱讀教程：
- 如何加速您的WordPress網站（終極指南）
- 如何在WordPress中禁用表情符號
- 如何在WordPress中禁用嵌入
- 識別和分析WordPress網站上的外部服務
- 如何使WordPress在Google PageSpeed Insights中獲得滿分
- 如何診斷WordPress網站上的Admin-Ajax高使用率
- 關於如何減少DNS查詢並加快它們的7個技巧
小結
如您所見，瞭解GTmetrix速度測試工具如何更好地工作以及所有圖表的含義可以幫助您在效能方面做出更加資料驅動的決策。我們稱之為瀑布分析，瞭解您的個人資產如何載入至關重要。請記住，在將其與Pingdom進行比較時，它們是不同的工具，因此最好堅持使用其中一種，因為它們的計算方式不同。還有其他很棒的GTmetrix技巧嗎？
評論留言