深入瞭解GTmetrix速度測試工具:如何使用GTmetrix提升網站速度和AI可見性

深入瞭解GTmetrix速度測試工具:如何使用GTmetrix提升網站速度和AI可見性

文章目录

  • 什麼是GTmetrix?
  • 為什麼要使用GTmetrix?
  • GTmetrix免費賬戶有哪些限制?
  • 最佳免費GTmetrix替代方案:WebPageTest.org
  • 如何使用GTmetrix?
  • 步驟 1:訪問GTmetrix網站
  • 步驟 2:輸入您的網站URL
  • 步驟 3:選擇您的測試位置和瀏覽器(可選)
  • 步驟 4:開始測試
  • 如何閱讀和分析您的GTmetrix報告?
  • Summary選項卡
  • Performance選項卡
  • Structure選項卡
  • CrUX選項卡
  • Waterfall選項卡
  • Video選項卡
  • History選項卡
  • 如何使用GTmetrix進行SEO和AI可見性最佳化 (GEO)?
  • 如何提升WordPress網站速度?
  • 推薦的進一步閱讀教程:
  • 小結
  • GTmetrix常見問題解答 (FAQ)

如何使用GTmetrix提升網站速度和AI可見性

作為網站所有者,在執行速度測試以檢查效能時,您有很多選擇。之前我們深入瞭解了Pingdom工具。今天我們想深入探討如何更好地使用和理解來自流行的網站速度測試工具GTmetrix的資料。像這樣的工具依賴於評分系統和分數,以及您網站上可能出現的問題的警告。有時這些可能會令人困惑,因此花一些時間來解釋它們的實際含義,不僅可以幫助您提高分數,還可以幫助您提高網站的效能,這才是真正重要的。

GTmetrix由位於加拿大的公司GT.net開發,作為其託管客戶輕鬆確定其網站效能的工具。除了Pingdom,它可能是當今網路上最知名和最常用的速度測試工具之一!與其他開發工具相比,GTmetrix非常易於使用,初學者可以很快上手。它結合使用Google PageSpeed InsightsYSlow來生成分數和推薦。

GTmetrix速度測試工具

GTmetrix速度測試工具

什麼是GTmetrix?

GTmetrix 是一款流行的線上網站速度測試工具,它可以分析您網站的效能,並提供有用的改進建議。

當您使用 GTmetrix 分析您的網站時,該平臺會根據 Google Lighthouse 和 Core Web Vitals 的重要指標對您的網站進行評分。

該報告可以幫助您精確定位網站載入過程中的瓶頸,並優先修復那些能夠加快載入速度並提升整體使用者體驗的問題。

為什麼要使用GTmetrix?

GTmetrix 是目前最受歡迎的網站速度和效能分析工具之一。

您應該考慮使用它的原因有很多。

  • 它提供免費版本:雖然功能有所限制,但您無需支付任何費用即可使用 GTmetrix 的基本功能。
  • 它易於使用:與許多效能測試工具相比,GTmetrix 非常人性化。這意味著您可以快速瞭解網站哪些方面執行良好,哪些方面需要改進。
  • 它提供真正有用的資料:GTmetrix 在真實的 Web 瀏覽器中執行測試,因此它提供的資訊能夠真實反映您的網站狀況。
  • 它指導您進行最佳化:GTmetrix 不僅僅是一個測試工具。它會準確地告訴您如何提升網站效能。

聽起來很完美!但別高興得太早……

GTmetrix免費賬戶有哪些限制?

GTmetrix 曾經是一款免費工具,提供高階升級選項。但最近,免費賬戶的限制更加嚴格:

  • 每月測試次數限制為五次
  • 您無法進行移動裝置測試。
  • 每天只能監控一個 URL;高階使用者可以獲取多個網站的每小時測試結果。
  • 您只能使用七個測試伺服器位置
  • 測試資料僅儲存一週。
  • 最重要的是:您只能享受 6 個月的免費按需測試服務。

要解鎖 GTmetrix 的完整版本,您需要訂閱高階版。套餐起價為每年 51 美元,價格並不算太貴。

但如果您剛開始進行網站最佳化,您可能更傾向於使用免費帳戶……或者使用其他工具。

最佳免費GTmetrix替代方案:WebPageTest.org

雖然 GTmetrix 是網站效能測試領域最知名的工具,但也有一些優秀的完全免費的替代方案。我們推薦 WebPageTest.org

WebPageTest.org
免費版提供:

  • 每月 150 次測試
  • 完整的移動裝置測試
  • 更長的資料保留時間
  • 免費版沒有時間限制

顯然,WebPageTest.org 是一個值得考慮的競爭對手,但它顯然更面向開發者,提供大量的診斷細節,但輔助功能較少。這可能會讓普通網站所有者感到有些不知所措。

我們建議您同時嘗試這兩款工具,看看哪一款更適合您。

如何使用GTmetrix?

使用 GTmetrix 分析網站效能其實非常簡單。以下是幫助您入門的分步指南:

步驟 1:訪問GTmetrix網站

訪問 https://gtmetrix.com

該工具完全基於網頁,因此您無需下載任何內容即可使用。

訪問GTmetrix網站
免費版涵蓋基本功能;您需要建立帳戶才能使用某些功能。要解鎖所有功能,您需要升級到 GTmetrix 付費訂閱。

步驟 2:輸入您的網站URL

在首頁的大框中輸入您網站的 URL。

輸入您的網站 URL

步驟 3:選擇您的測試位置和瀏覽器(可選)

GTmetrix 為高階使用者提供不同的分析選項,例如選擇不同的測試位置和瀏覽器。

此選項可以顯示您的網站在全球不同裝置和連線速度下的效能表現。

如果您擁有 GTmetrix Pro 帳戶,則可以從 22 個位置的測試伺服器中進行選擇。您還可以使用特定瀏覽器進行測試,包括 Google Chrome、Firefox 和移動瀏覽器,或使用不同的連線,從 56k 撥號連線到不限速連線。

如果您尚未註冊或使用的是免費帳戶,則無法使用這些選項。因此,您可以跳過此步驟,直接分析您的網站。

選擇您的測試位置和瀏覽器(可選)

GTmetrix分析選項

GTmetrix的基本版本是完全免費的,您只需註冊一個帳戶即可訪問許多選項。他們也有高階計劃,但在今天的帖子中,我們將使用免費版本。如果您有一個帳戶,您可以使用指定一些額外的分析選項。

第一個是選擇要測試URL的位置。您選擇的物理位置實際上非常重要,因為它與您的網站實際託管的位置有關。延遲越少,載入時間越快。目前可用的地點包括:

  • 美國達拉斯
  • 中國香港
  • 英國倫敦
  • 印度孟買
  • 悉尼,澳大利亞
  • 巴西聖保羅
  • 加拿大溫哥華

您可以選擇要使用的瀏覽器。您可以使用Chrome(桌面)和Firefox(桌面)進行測試。移動版本在其高階計劃中可用。它們還允許您更改連線速度,這意味著您可以模擬各種連線型別以檢視它們如何影響您的頁面載入。

GTmetrix測試格式選項

GTmetrix測試格式選項

其他選項包括建立影片的能力。這可以幫助您除錯問題,因為您可以檢視頁面的呈現方式。AdBlock  Plus是一個不錯的功能。如果您正在執行Google Adsense等第三方廣告網路,則可以啟用此選項以檢視廣告對載入時間的全部影響。

GTmetrix額外選項

GTmetrix額外選項

其他選項包括停止測試載入(稍後我們將深入探討)、能夠隨請求一起傳送cookie、使用HTTP身份驗證、將URL列入白名單和黑名單的能力、螢幕解析度和裝置畫素比以及使用者代理覆蓋.

步驟 4:開始測試

點選“Test Now”按鈕。GTmetrix 將開始分析您的網站。

分析完成後,您將收到一份詳細的報告。準備好深入瞭解並解讀結果了嗎?

接下來我們就來解讀。

如何閱讀和分析您的GTmetrix報告?

GTmetrix 提供關於您網站的大量資訊。為了便於理解,該工具首先會快速概覽您的測試結果。

GTmetrix報告
左側是 GTmetrix 等級面板,包含三個部分:

  • GTmetrix Grade:越接近 A 越好。目標是 B 或更高。
  • Performance score:衡量您的網站從使用者角度來看的效能表現。得分越高越好。
  • Structure score:衡量您的網站為實現最佳效能而構建的程度。得分越高越好。

右側是 Web Vitals 面板。該面板顯示最重要的指標:

  • LCP(最大內容繪製)網頁瀏覽器可見區域中最大影像或文字塊的顯示時間。這會對感知載入時間產生顯著影響。我們希望 LCP 不超過 1.2 秒。
  • TBT(總阻塞時間):指令碼阻塞網頁載入過程的時間。基準值約為 150 毫秒。
  • CLS(累積布局偏移)網頁載入過程中發生的意外佈局移動次數。目標值應為 0.1 毫秒或更低。

您可以將這些指標視為重點——您必須確保萬無一失的關鍵要素。但還有更多內容值得關注。

您會在結果頁面上看到一些選項卡:摘要、效能、結構、CrUX、瀑布圖、影片和歷史記錄。每個選項卡都包含有關您網站的更多資訊。

Summary選項卡

“Summary”選項卡提供 GTmetrix 獲取的有關您網站的高階資訊的概覽。

頁面頂部是一個速度視覺化圖表,顯示頁面載入期間關鍵事件的時間線——例如首次內容繪製時間、可互動時間以及完全載入時間。

Summary選項卡
下方列出了 GTmetrix 識別出的影響您網站效能的主要問題。

“摘要”選項卡底部是“頁面詳情”部分。此處顯示所有頁面元素的檔案大小及其百分比。

您無需在此選項卡上花費太多時間;它主要用於提供資訊。

Performance選項卡

在“Performance”選項卡中,您可以深入瞭解網站的載入時間指標。

還記得我們之前看到的時間線嗎?“效能指標”部分使這些資料更易於瀏覽。

Performance選項卡
除了我們之前看到的指標外,您還可以找到以下指標的計時:

  • 首次內容繪製 (First Contentful Paint):頁面上第一個內容元素出現的速度。對於某些網站,這是文字。對於其他網站,這是影像。2.5 秒以內均屬正常。
  • 可互動時間(Time to Interactive):網站完全可互動所需的時間,即頁面開始載入後,使用者需要多長時間才能執行點選連結和按鈕等操作。
  • 速度指數(Speed Index):頁面內容對使用者可見的速度。

繼續向下滾動,您將看到“瀏覽器計時”部分。這裡提供了許多其他指標供我們探索。

  • 重定向持續時間(Redirect Duration):所有重定向(HTTP 到 HTTPS、域名重定向等)完成所需的時間。
  • 連線持續時間(Connection Duration):使用者瀏覽器與伺服器之間建立連線所需的時間,如果網站使用 HTTPS,則包括 TLS/SSL 握手所需的時間。
  • 後端持續時間(Backend Duration):伺服器生成頁面所需的時間。
  • 首位元組時間 (TTFB):從使用者發出 HTTP 請求到伺服器返回第一個位元組資料所需的時間。
  • 首次繪製(First Paint):第一個可視元素出現在螢幕上所需的時間。
  • DOM 互動時間(DOM Interactive Time):頁面 HTML 文件物件模型 (DOM) 完全構建並可互動所需的時間。
  • DOM 內容載入時間(DOM Content Loaded Time):DOM 可互動且所有指令碼載入完畢所需的時間。
  • 頁面載入時間(Onload Time):頁面及其所有資源(包括影像、CSS 和 JavaScript)完全載入並觸發 onload 事件所需的時間。
  • 完全載入時間(Fully Loaded Time):頁面完全載入以及所有其他網路活動停止所需的總時間。

與“Summary”選項卡類似,這裡是查詢有關您網站的更多資訊的絕佳位置。但最有價值的資料還在後面!

Structure選項卡

“Structure”選項卡是關鍵所在。GTmetrix 會在此根據 Google 制定的最佳實踐,對您的網站進行全面稽覈。

或者簡單來說,這就是您的待辦事項清單。

Structure選項卡
在此標籤頁中,您將看到 GTmetrix 為您的網站識別出的所有主要問題。這些問題按優先順序排序,因此對網站速度和效能影響最大的更改會排在最前面。

GTmetrix 還會告訴您如何解決每個問題。只需點選列表中的任何專案,即可展開檢視更詳細的說明。

GTmetrix速度測試的“Structure”選項卡是您可以檢視影響站點效能的特定問題的地方。此頁面非常有用,因為它為您提供了可操作的資訊,例如“消除渲染阻塞資源”和“最小化CSS”以開始最佳化您的網站。

我們將嘗試涵蓋我們看到WordPress網站所有者苦苦掙扎的最常見和最受歡迎的那些。請務必將此文章新增為書籤,因為我們將不斷更新它。通常,如果您在您的網站上改進這些,您應該會看到效能的提高。

GTmetrix PageSpeed分數

GTmetrix PageSpeed分數

提供縮放影像

在您的網站上處理影像時,您應該始終嘗試將它們上傳到縮放,而不是讓CSS調整它們的大小。如果你不這樣做,你最終會得到服務縮放影像推薦。如果您使用的是WordPress,預設情況下,它會在將影像上傳到媒體庫時調整影像大小。這些設定可以在“設定 > 媒體”下找到。您需要確保最大寬度接近您網站的寬度。這樣,CSS不會嘗試將影像大小調整為適合內部。您還可以使用影像最佳化外掛自動調整它們的大小。

提供縮放影像

提供縮放影像

內聯小CSS

通常不建議內聯CSS,因為它會增加頁面請求的整體下載大小。但是,如果您的站點很小,請求最少,它可以提高您的效能。

內聯小CSS

內聯小CSS

要內聯您的CSS,您可以使用像Autoptimize這樣的免費外掛。只需檢查“內聯所有CSS?” 選項,然後確保您已排除未內聯的其他CSS檔案。

自動最佳化內聯CSS

自動最佳化內聯CSS

內聯小JavaScript

就像內聯小CSS一樣,內聯小JavaScript也是如此。通常不建議這樣做,因為它會增加頁面請求的整體下載大小。但是,如果您的站點很小,請求最少,它可以提高您的效能。同樣,您可以使用Autooptimize的JavaScript設定

內聯小JavaScript

內聯小JavaScript

利用瀏覽器快取

利用瀏覽器快取是人們難以接受的一個非常常見的建議。這是由於您的Web伺服器上沒有正確的HTTP快取標頭而生成的。請參閱我們關於如何修復瀏覽器快取警告的深入文章。您只能在您控制的資源上解決此問題。例如,如果您在第三方廣告網路上看到此內容,則您無能為力。

利用瀏覽器快取

利用瀏覽器快取

從一致的URL提供資源

如果您從一致的URL看到服務資源,則很可能是從同一 URL 提供了相同的資源。很多時候,當涉及到查詢字串時,就會發生這種情況。檢視如何從靜態資源中刪除查詢字串。一旦它們消失,它應該不再需要載入它兩次。

從一致的URL提供資源

從一致的URL提供資源

延遲解析JavaScript

JavaScript和CSS預設是渲染阻塞的。這意味著它們可以阻止網頁顯示,直到它們被瀏覽器下載和處理。defer屬性告訴瀏覽器在HTML解析完成之前推遲下載資源。解決此問題的一些簡單方法是利用免費的AutoptimizeAsync JavaScript外掛。請務必檢視我們關於如何消除渲染阻塞JavaScript和CSS的深入文章。

延遲解析JavaScript

延遲解析JavaScript

如需深入解釋,請閱讀:如何在WordPress中延遲解析Javascript警告(4種方法)

最小化CSS和JavaScript

Minification(最小化)本質上是在不改變其功能的情況下從原始碼中刪除所有不必要的字元。這可能包括換行符、空格、縮排等。這樣做可以節省資料位元組並加快下載、解析和執行時間。

最小化CSS和JavaScript

最小化CSS和JavaScript

同樣,免費的Autoptimize外掛非常適合這個。只需確保選中“Optimize JavaScript Code”和“Optimize CSS Code”即可。如果您有一個大型網站,您可能還想使用下面的高階設定,因為有些可能會損害您網站的效能。通常不建議在大型網站上內聯或組合CSS和JavaScript。這就是HTTP/2的力量發揮作用的地方。

自動最佳化縮小CSS和JavaScript

自動最佳化縮小CSS和JavaScript

最佳化影像

根據HTTP Archive的資料,截至2017年4月,影像平均佔網頁總體積的66%。因此,在最佳化您的WordPress網站時,影像是您應該首先開始的地方!它比指令碼和字型更重要。

深入瞭解GTmetrix速度測試工具-1

最佳化影像

在一個完美的世界裡,每張圖片都應該在上傳到WordPress之前進行壓縮和最佳化。但不幸的是,這並不現實。因此,我們建議使用一個好的影像最佳化外掛。這將有助於自動壓縮您的影像,調整它們的大小,並確保它們在您的網站上輕量且快速載入。檢視我們關於如何最佳化網路影像的深入文章。

減少初始伺服器響應時間

對於WordPress,初始伺服器響應時間慢的主要原因是缺少頁面快取。在沒有頁面快取的情況下,WordPress使用PHP為每個單獨的請求動態構建頁面,這意味著它很快就會被請求淹沒。啟用頁面快取後,您的站點可以伺服器預先生成的HTML檔案,這比使用PHP來滿足每個頁面請求要快得多,並且更具可擴充套件性。

減少初始伺服器響應時間

減少初始伺服器響應時間

如果您的WordPress主機不支援頁面快取,您可以安裝快取外掛,例如WP Rocket或W3 Total Cache。為了進一步減少伺服器響應時間,我們建議將Cloudflare APO與您的WordPress站點整合。Cloudflare的這項創新最佳化服務將您網站的HTML頁面分發到世界各地,這可以在全球範圍內縮短伺服器響應時間。

縮小HTML

就像CSS和JavaScript一樣,HTML也可以被縮小以去除不必要的字元併為您節省位元組資料以加快執行時間。

縮小HTML

縮小HTML

免費的自動最佳化外掛也非常適合這個。只需啟用“Optimize HTML Code”選項即可。

自動最佳化HTML程式碼

自動最佳化HTML程式碼

啟用GZIP壓縮

GZIP是一種檔案格式和用於檔案壓縮和解壓縮的軟體應用程式。GZIP壓縮在伺服器端啟用,並允許進一步減小HTML、樣式表和JavaScript檔案的大小。它不適用於影像,因為它們已經以不同的方式壓縮。由於壓縮,有些人已經看到了高達70%的減少。當涉及到WordPress時,這可能是您可以進行的最簡單的最佳化之一。

啟用GZIP壓縮

啟用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壓縮時,這也是固定的。但請務必檢視我們關於如何修復指定變化的深入文章:接受編碼標頭 推薦。同樣,您無法在第三方資源上解決此問題。

指定一個變數:接受編碼標頭

指定一個變數:接受編碼標頭

要檢視完整教程,請點選右上角的“Learn how to improve this”。

根據您網站存在的問題數量,您應該將大部分時間花在 GTmetrix 的“CrUX”選項卡上。在儘可能多地解決問題後,您可以探索分析中的其他選項卡。

CrUX選項卡

想要深入瞭解訪客如何體驗您的網站?您需要檢視 CrUX(Chrome 使用者體驗報告)選項卡。此分析區域提供來自 Google Chrome 瀏覽器真實使用者的資料。

這意味著您可以準確瞭解您的網站在實際環境中的執行情況,而不僅僅是在 GTmetrix 測試條件下的情況。

遺憾的是,CrUX 選項卡並不總是像您預期的那樣有用——這僅僅是因為 Google 沒有足夠的資料來得出有意義的結論。但無論如何,檢視此選項卡都是值得的。如果您看到資料,請將其與“Performance”選項卡中的資料進行比較。任何重大差異都可能意味著需要修復某些問題。

Waterfall選項卡

為什麼它被稱為“Waterfall”選項卡?因為它包含一個瀑布圖:一個詳細展示網站載入過程的圖表。

Waterfall選項卡
這意味著指令碼、媒體檔案、請求的第三方資源及其請求詳情、持續時間和執行時間都會被詳細列出。柱狀圖的長度表示每個元素請求、下載和執行所花費的時間。

“Waterfall”選項卡乍一看可能有點複雜,但逐部分分析可以幫助您發現網站的瓶頸或問題區域。

阻塞(棕色)

當瀏覽器載入網頁時,JavaScript和CSS資源通常會阻止網頁顯示,直到它們被瀏覽器下載和處理。此時間延遲在GTmetrix瀑布圖中顯示為阻塞。檢視我們關於如何消除阻塞渲染的JavaScript和CSS的深入文章以 獲取更多資訊。

深入瞭解GTmetrix速度測試工具-1

阻塞

DNS Lookup(藍綠色)

您可以將DNS查詢視為電話簿。有稱為域名伺服器的伺服器儲存有關您的網站的資訊以及應將其路由到哪個IP。當您第一次透過GTmetrix執行您的網站時,它會執行新的查詢,並且必須查詢DNS記錄以獲取IP資訊。這會導致一些額外的查詢時間。

DNS Lookup

當您第二次透過GTmetrix執行您的網站時,它會快取DNS,因為它已經知道IP資訊並且不必再次執行查詢。這就是為什麼您可能會喜歡您的網站在多次透過GTmetrix執行後看起來更快的原因之一。正如您在下面的螢幕中看到的,在我們執行的第二次測試中,初始DOC負載的DNS查詢時間為0毫秒。這是很多人誤解的一個領域!我們建議您多次執行測試並取平均值,除非您希望DNS作為報告的一部分,在這種情況下您可以進行第一次測試。

第二次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響應標頭

需要注意的另一件事是GTmetrix 工具確實支援HTTP/2,這與Pingdom不同,因為它目前使Chrome 58+來執行其測試。Chrome在版本49中新增了HTTP/2支援。因此,在選擇要使用的速度測試工具時請記住。

Video選項卡

在“Video”選項卡中,您可以觀看頁面載入的影片。您甚至可以減慢影片播放速度,以便更好地觀察載入過程,並跳轉到頁面載入過程中的關鍵節點。

Video選項卡
請注意,此功能僅在您建立 GTmetrix 帳戶(免費)後可用。而且它不會自動包含在首次分析中;您需要訪問“Video”選項卡,然後點選“Enable Video and Re-test”才能檢視影片。

History選項卡

最後,還有“History”選項卡。在這裡,您可以檢視過往的報告(如果您擁有賬戶並已登入)。

History選項卡
在歷史選項卡下,您可以檢視所有過去的速度測試。免費帳戶中儲存的數量是有限制的。您還可以監控一個URL,該URL允許您跟蹤一段時間內的效能,並在它們發生時檢視任何更改。

歷史

歷史

一個非常酷的功能是您可以選擇過去的報告並並排比較它們。這可能非常有用,尤其是當您在網站上進行最佳化以檢視是否有改進時。請記住,有時您也可以過度最佳化。

在GTmetrix中比較報告

在GTmetrix中比較報告

您還可以使用“History Graphs”將您網站的功能與過往的分析結果進行比較,並跟蹤其隨時間推移的效能變化。

如何使用GTmetrix進行SEO和AI可見性最佳化 (GEO)?

像 Google 這樣的搜尋引擎希望為使用者提供最佳體驗。緩慢、笨拙的網站會令使用者非常反感。

因此,網站速度成為搜尋引擎最佳化 (SEO) 的關鍵因素。正如我們之前提到的,更快的網站速度可以帶來更高的使用者參與度、更低的跳出率,並最終提升排名。

您可以將 GTmetrix 視為您的網站效能教練。它會提供清晰的指導,幫助您打造搜尋引擎青睞的使用者體驗。

網站速度和使用者體驗對於下一代搜尋技術——生成式搜尋引擎最佳化 (GEO) 也至關重要。

像 ChatGPT 和 Google 的 SGE 這樣的 AI 搜尋引擎旨在提供直接的答案。它們會從它們認為高質量、權威且快速的資訊源中提取資訊。

良好的使用者體驗是衡量網站質量的通用指標,它能讓您的網站對傳統搜尋演算法和新型 AI 模型都更具吸引力。

加快網站載入速度有助於 AI 平臺更高效地評估您的內容。它們非常看重這一點。

那麼,如何將 GTmetrix 報告轉化為切實的 SEO 和 GEO 優勢呢?首先,關注以下幾個關鍵領域。

  • 力爭“A”級:GTmetrix 最高等級是對您整體表現的快速總結。獲得“A”級且效能得分高於 90% 可以清晰地向搜尋引擎表明您的網站已得到良好最佳化。
  • 關注核心網站指標:密切關注 LCP、TBT 和 CLS 得分。GTmetrix 會將任何“Poor”或“Needs Improvement”的指標標記出來。修復這些問題是提升搜尋排名的首要任務。
  • 深入研究“結構”選項卡:這是您的 SEO 寶庫。“結構”選項卡提供了一系列經 Google 認可的網站效能最佳化方法,涵蓋從圖片最佳化到瀏覽器快取等各個方面。
  • 密切關注您的瀑布圖:使用此功能識別載入緩慢的元素(如大影像或笨拙的指令碼),這些元素會降低您的使用者體驗,從而降低您的搜尋潛力。

如何提升WordPress網站速度?

使用 GTmetrix 的意義在於獲得切實可行的網站最佳化建議,這些建議能夠針對真正拖慢網站速度的原因量身定製——所以務必從這裡開始。當然,還有一些最佳實踐可以幫助所有人確保網站執行速度飛快。如果您的 WordPress 網站需要提升速度,請嘗試以下建議:

  • 選擇合適的主機:網站主機提供商對網站效能至關重要。選擇信譽良好的主機提供商,確保其提供的資源能夠滿足你的需求。
  • 使用內容分發網路 (CDN):CDN 可以將網站的靜態內容分發到全球各地的伺服器上,讓訪客能夠從離他們更近的伺服器載入網站。
  • 最佳化圖片:大型圖片檔案會拖慢網站速度。使用 SmushEWWW Image Optimizer 等工具或外掛來壓縮和調整圖片大小,同時保證圖片質量。你還可以啟用延遲載入,並選擇 WebP 和 AVIF 等現代格式
  • 檔案壓縮和合並:壓縮 CSS、JavaScript 和 HTML 檔案以減小其大小。WP RocketAutoptimizeW3 Total Cache 等外掛可以幫助您完成這項工作,許多框架也能實現同樣的效果。
  • 使用快取:實施快取以儲存常用資料的副本,從而減少重新生成這些資料的需要。常用的快取外掛包括 WP Super CacheW3 Total CacheWP Rocket
  • 最佳化資料庫:定期清理 WordPress 資料庫,刪除不必要的資料,例如文章修訂、已刪除的專案和臨時選項。
  • 減少重定向:重定向會增加頁面載入時間,尤其對於移動使用者而言。儘量減少網站上的重定向次數。
  • 使用最新的 PHP 版本:WordPress 基於 PHP 執行。為了獲得良好的效能和安全性,請確保您的伺服器執行的是最新版本的 PHP。

最重要的是——保持 WordPress 更新!保持 WordPress 核心程式、主題和外掛更新,以便獲得最新的速度最佳化升級和安全補丁。

小結

如您所見,瞭解GTmetrix速度測試工具如何更好地工作以及所有圖表的含義可以幫助您在效能方面做出更加資料驅動的決策。我們稱之為瀑布分析,瞭解您的個人資產如何載入至關重要。請記住,在將其與Pingdom進行比較時,它們是不同的工具,因此最好堅持使用其中一種,因為它們的計算方式不同。還有其他很棒的GTmetrix技巧嗎?

GTmetrix常見問題解答 (FAQ)

仍然對 GTmetrix 或網站效能感到好奇?我們在這裡為您解答所有疑問。

GTmetrix 是免費的嗎?

GTmetrix 提供免費版本,使用者可以使用它來測試和分析自己的網站。

但如果您需要更高階的功能,例如多地點測試和更頻繁的監控,則需要付費訂閱 PRO 版本。

GTmetrix 是一個可靠的工具嗎?

是的,GTmetrix 是一個非常可靠的工具,因為它使用 Google 的 Lighthouse 資料來分析您網站的效能。

它可以非常準確地反映您的網站技術效能和使用者體驗。

為什麼我多次測試網站時會得到不同的結果?

由於伺服器流量、網路狀況和第三方廣告等因素,測試結果出現細微差異是正常的。

為了獲得最準確的結果,請執行三次測試,並關注中位數結果,而不是單個分數。

GTmetrix 與 WebPageTest.org 等工具相比如何?

GTmetrix 非常適合生成快速、易於理解的報告。如果您只是普通的網站所有者,想要進行一些改進,那麼它會非常適合您。

相比之下,WebPageTest.org 提供來自更多來源的更高階、更深入的免費診斷。這使其成為開發人員的首選,因為他們可能需要解決複雜的問題。

什麼樣的 GTmetrix 評分才算好?

目標是獲得“A”級 GTmetrix 評分,並且效能得分達到 90% 或更高。同時,確保所有核心 Web 指標都處於“良好”(綠色)範圍內。

高分表明您正在提供搜尋引擎青睞的友好使用者體驗。

如果我的 GTmetrix 評分很低該怎麼辦?

別慌!仔細檢視報告中的“結構”和“瀑布圖”選項卡。在這裡,您會找到一份優先順序排序的清單,其中列出了需要修復的具體問題,例如最佳化大圖或解決載入緩慢的指令碼。

我的網站實際載入速度應該有多快?

目標是將最大內容繪製時間 (LCP) 控制在 2.5 秒以內,谷歌認為這屬於“良好”的使用者體驗。

超過 4 秒則被視為“差”,會顯著增加訪客在網站載入完成前離開的機率。請定期與競爭對手進行基準測試,並持續改進載入速度,以提供最佳的使用者體驗。

評論留言