WebPageTest 網站效能與網頁速度檢測工具,核心網頁體驗指標最佳化工具 by 貓熊先生 2022 年 1 月 16 日 2022 年 1 月 16 日 1.6K WebPageTest 網站效能與網頁速度檢測工具 WebPageTest 是一個網站效能與網頁速度檢測工具,眾所皆知,網頁速度目前已經是重要的 SEO 排名要素,而 Google 給出 LCP、FID、CLS 這三個指標,組合成了網站使用體驗核心指標(Core Web Vitals),你在 Google search console 後台也可以清楚得看到這三個指標。 先前有介紹過「Google PageSpeed Insights」跟「waterfaller」,這兩個工具都可以幫助你快速診斷一個網站的網頁速度哪邊可以進行優化,除了這兩個工具之外,WebPageTest 也是一個相當不錯的網頁速度與網站效能檢測工具。 當你在健診自家網站或是檢查別人網站的網頁速度時,你可以將 WebPageTest 與其它兩個工具一起用上,做一個更全面的診斷與檢查。本篇文章也會教學如何使用 WebPageTest 這個網頁速度檢測工具。 內容目錄 ToggleWebPageTest 網站效能檢測、網頁速度分析工具輸入網址、地理位置跟瀏覽器WebPageTest 綜合指標評分WebPageTest 網站使用體驗核心指標查看檔案請求數目佔比跟檔案類型大小佔比WebPageTest 瀑布流網頁下載資訊WebPageTest 常見問題WebPageTest 是什麼?WebPageTest 可以做什麼?WebPageTest 觀念總整理 WebPageTest 網站效能檢測、網頁速度分析工具 點擊下面網址,前往 WebPageTest 這個網頁速度分析工具。 WebPageTest 網頁速度分析、網站效能檢測 WebPageTest 網站效能檢測、網頁速度分析工具 輸入網址、地理位置跟瀏覽器 進入 WebPageTest 網站之後,你需要輸入網址、瀏覽器、測試速度的地理位置。如果你的用戶主要來自台灣,建議選擇「Taiwan 」節點。 全部設定好之後,就可以點擊「Start Test」 送出了。 輸入網址、地理位置跟瀏覽器 WebPageTest 的測試基本上會跑三次,以求得一個比較客觀準確的結果,所以需要一點時間。 WebPageTest 綜合指標評分 WebPageTest 網頁速度檢測結果出來之後,它會給你各項綜合指標打一個分數,包括網站安全、第一元素載入時間、Keep-alive 是否開啟、壓縮、圖片壓縮、靜態檔快取、CDN…等等,你可以加減看一下。 WebPageTest 綜合指標評分 WebPageTest 網站使用體驗核心指標 畫面移動到下方,WebPageTest 會顯示三個網站核心體驗指標: LCP / CLS / FID 是否有通過,如果全部通過那就會顯示綠色啦。 其它顯示的項目還有:請求數目、網頁載入總時長、網頁總下載大小、第一元素載入時間、頁面開始渲染的時間、第一個內容元素呈現的時間…等等。 這裡必較需要注意的是: 1.請求數建議不要太多,太多的話建議要對 JS 檔跟 CSS 檔進行優化。 2.網頁下載時間不能太長,太長的網頁載入時間可能導致跳出率增加。 3.網站核心體驗指標: LCP / CLS / FID ,這三個指標都要通過。 WebPageTest 網站使用體驗核心指標 查看檔案請求數目佔比跟檔案類型大小佔比 畫面移動到下方,WebPageTest 還會顯示一些重要的資訊,包括網頁下載檔案的瀑布流呈現,網頁顯示外觀的 screenshot,另外很重要的,WebPageTest 還會顯示你的網頁下載元素的佔比,你可以知道哪些類型的檔案佔用你下載時間最多,另外還有哪些類型的檔案發送的請求數最多。 通常占比最多的你會發現都是圖片,這也是為什麼圖片 SEO 很重要的原因,完整的圖片優化可以參考下面文章。 網站圖片 SEO 如何優化?超完整 Image SEO 教學 WebPageTest 最棒的一點是,它還提供了非常詳細的瀑布流下載資訊,點擊瀑布流圖片之後,就可以查看更詳細的資料。 查看檔案請求數目佔比跟檔案類型大小佔比 WebPageTest 瀑布流網頁下載資訊 WebPageTest 會顯示它下載你的網頁時,從第一個請求下載的資料,一直到最後一個請求下載的資料,你可以看每個檔案下載的時間長度有多長,找到花最多的時間,你就可以從那個檔案進行優化。 講到瀑布流,waterfaller 也是一個很棒的工具,非常建議使用。 waterfaller 網頁速度與網站速度核心體驗檢測工具 WebPageTest 瀑布流網頁下載資訊 當你點擊其中一個檔案之後,WebPageTest 還會顯示更詳細的資訊,包括這個檔案位於哪裡、請求開始時間、Status code、檔案大小、檔案下載時間…等等,非常詳細,可以幫助你進行 SEO 優化。 WebPageTest 瀑布流網頁下載資訊 最後,瀑布流頁面最下方,WebPageTest 還列出了你的每個檔案從第一個請求到最後一個請求的檔案的詳細資訊,包括下載時間、請求順序、檔案類型、下載總時長、Status 狀態碼…等等,這些資訊也可以參考。 WebPageTest 瀑布流網頁下載資訊 WebPageTest 是一個很棒的網站速度檢測跟網頁速度分析工具,建議跟下面兩個工具一起搭配使用,你可以在網頁速度這項排名要素上面,找到很多可以優化的地方。 waterfaller 網頁速度與網站速度核心體驗檢測工具Google PageSpeed Insights 網站速度分析工具 WebPageTest 常見問題 WebPageTest 是什麼? WebPageTest 是一個網站速度檢測與網頁速度優化工具,可以幫助你找到很多可以優化的地方。 WebPageTest 可以做什麼? WebPageTest 可以幫你分析網頁速度,包括網站使用體驗核心指標(Core Web Vitals),另外還提供瀑布流資訊,包括網頁下載時間總時長、網頁請求數目、下載時間最長的檔案是哪個、佔據最長下載時間的檔案類型…等等。 使用 WebPageTest 的時候,建議可以跟 Waterfaller 還有 Google pagespeed insights 這兩個工具一起使用。 WebPageTest 觀念總整理 WebPageTest 是一個非常不錯的工具,不過講到易用性,貓熊先生覺得 Waterfaller 或許更好用一點。因為 Waterfaller 也同樣支援瀑布流呈現資訊,另外當你點每個檔案的時候,Waterfaller 會直接給優化建議,這一點是 WebPageTest 所沒有的。 不過當你想要對網頁速度進行優化的時候,你可以 WebPageTest 、 Waterfaller 還有 Google pagespeed insights 這三個工具一起使用。 其他人正在看 waterfaller 網頁速度與網站速度核心體驗檢測工具 網頁速度 Page speed 如何優化?10 個網站速度優化項目!教學 WebPageTest網站效能網站效能檢測網頁速度網頁速度分析 相關文章 waterfaller 網頁速度與網站速度核心體驗檢測工具 網頁速度 Page speed 如何優化?10 個網站速度優化項目!教學