本文參考資料為 16 Website Speed Test Tools for Analyzing Web Performance,原作者 Brian Jackson。
一個網站的速度可以是成功的關鍵因素。如同 KeyCDN 在「內容傳遞網路:初學者指南」探討過的,越快載入的網站將有助於更好的搜尋引擎最佳化(SEO)評分、更高轉換率、降低跳出率,延長訪客停留在網站時間,對於使用者體驗來說是整體提升!這也是為什麼我們要整理收錄一系列可用的免費網站速度測試工具,利用這些服務你就能為網站最佳化,讓網站實現最好的效能表現。
Google 希望你的網站能在不到一秒內載入,越快越好。
目錄
網站測速工具能幫助你分析那些項目?
這裡是一些網站速度測試工具常用的方法:
1. 精確定位程式、字型和外掛造成的載入時間問題(HTML、Javascript、CSS)。
2. 檢查你的程式碼是否最小化。
3. 找出圖片檔案太大造成的瓶頸。
4. 確定是否有禁止轉譯(Render-blocking)的 JavaScript 或 CSS。
5. 測試 Time to First Byte(TTFB)。
6. 分析總載入時間、頁面大小和總請求數。
7. 從不同的地理位置檢查網站效能。
8. 檢查不同瀏覽器的渲染速度。
9. 分析 HTTP 頁首。
10. 測試你的內容傳遞網路(CDN)性能。
11. 驗證資料能正確從你的 CDN 載入。
在 KeyCDN 原文「16 Website Speed Test Tools for Analyzing Web Performance」中列出了相關技術說明和最佳化方式,不過在本文主要側重於這些工具的介紹使用,如果對於細節有興趣,可以回到本文去瀏覽詳細說明。
網站速度測試工具列表
現在,你對於網站效能有了一些概念,看看以下16個免費工具,它們能夠用來測試你的網站速度效能。每個工具都有自己的特色、報告及使用不同方式來剖析你的測試結果。
注意:在使用這些工具時必須理解,通常第一次 DNS 查詢時間會比較長。如果你要比較這些工具測試出來的載入總時間,最好可以多進行幾次再取結果平均值。
KeyCDN Website Speed Test
KeyCDN 建立了一個快速且輕量級網站速度測試工具,你可以透過它來得到你的網站效能數據。你能選擇世界各地共 14 個節點,且控制是否讓測試結果公開。這個測試包含了一個瀑布圖(waterfall breakdown),最下方會有一個可視化網站預覽圖。你可以快速看到有多少個 HTTP 請求數、請求頁面的完整大小和載入時間。
這也是 PageSpeed 以外唯一支援響應式設計的工具,且能在行動裝置上運作自如。
Google PageSpeed Insights
Google PageSpeed Insights 是一個網站速度測試工具,以 1-100 分來評比網站。分數越高代表網站最佳化效果越好。通常在 85 分以上就表示你的網站表現良好。PageSpeed 給你包括桌面及行動版網頁兩種報告。你可以查看建議來改善網站成效,例如最小化 CSS 或最佳化你的圖片大小。
PageSpeed Insights 測量如何提高網頁的效能:
- time to above-the-fold load:從使用者請求一個新頁面,到網頁上方內容由瀏覽器顯示出來瞬間所經過的時間。
- time to full page load:從使用者請求一個新頁面,到網頁被瀏覽器完全載入時間。
行動裝置報告有一個額外分類名為「使用者體驗」。包含檢查你的網站 Viewpoint 設定、按點目標大小(按鈕和鏈結)以及字體大小。
PageSpeed Insights 團隊近期也推出一個新的網站測速工具「Think with Google」,你也可以看看 Google 幫你測試網站是否對行動裝置友善,三項評比指標提供最佳化指南介紹,這個工具不同的是會產生漂亮的報告。寄送給客戶更為合適。
Pingdom
Pingdom 可能是較為知名的網站速度測試工具之一。他們的報告分成四個不同部分,其中包含一個瀑布圖、效能等級、頁面分析和歷史。
頁面分析提供全方位的網站資訊概述,例如頁面分析、從每個網域名稱獲取的檔案大小(你可以很容易地比較透過 CDN 和直接透過網域名稱獲取的大小)、每個網域名稱的請求數及大多數請求的內容類型為何。
延伸閱讀:Pingdom Tools 網站速度、效能檢測工具,分析並找出拖慢網頁速度的問題
GTmetrix
GTmetrix 分析非常詳細,因為它同時檢查 PageSpeed 和 YSlow 指標,為你的網站提供一個從 F 到 A 的評級。分析結果呈現五個不同部分,包括 PageSpeed、YSlow、瀑布圖、影片和歷史。
在免費註冊後,你就能夠從七個不同節點來進行測試。他們也讓你能夠選擇瀏覽器,例如 Chrome 或 Firefox。你也可以測試比較網站在不同連線速度的效能(像是 Cable 或撥接網路),來看看不同的連線速度如何影響你的網站載入時間。其他進階功能包括錄影功能,可以分析你的網站載入瓶頸,還能加入 Adblock Plus。在阻擋廣告後可以檢查廣告會如何影響你的網站載入速度。
注意:建議註冊一個免費帳戶,你將可以使用更多功能,如上面提到的。
延伸閱讀:GTmetrix 網頁開啟速度檢測、分析工具,協助最佳化使用者體驗
WebPageTest
WebPageTest 與前面提到的工具非常類似,但提供超過 40 個國家節點,且能選擇超過 25 種瀏覽器(包括行動裝置)。根據不同的網站效能給予 F 到 A 等級評分,例如 FTTB、壓縮、快取、使用 CDN 等等。報告分為六部分(摘要、細節、效能、內容和螢幕擷圖)。
這項工具提供了對於測試的獨特方法。它會執行「First view(第一次檢視)」和「Repeat view(重複檢視)」。這有助於診斷一些網站問題,例如前面提到的第一次 DNS 查詢所造成的延遲。WebPageTest 有更多進階功能,例如影片擷取、阻擋 Javascript、忽略 SSL 憑證和設定 User-agent。
DareBoost
DareBoost 是市場上較新的工具之一。它提供超過 100 種不同的檢查項目用以分析你的網站速度。它會以 1-100 給予評分。你可以測試桌面端與行動頁面、Firefox 與 Chrome 和五個節點的速度差異。
報告會將優先等級區分出來。如果你註冊免費帳戶,你可以將報告輸出為 PDF 格式或是與其他人的網站進行比較。他們提供了關於 100 種檢查項目非常詳細的資訊和範例。除了速度以外,這份報告也有搜尋引擎最佳化(SEO)、易用性(Accessibility)以及程式碼品質建議。
延伸閱讀:DareBoost 線上分析網站效能,協助最佳化改善網頁品質
Varvy Pagespeed Optimization
Varvy Pagespeed Optimization 由是一個由 Patrick Sexton 開發維護的工具,他也建立了 GetListed.org,也就是 Moz Local 的前身。
報告被分成五個不同部分,包括一個使用的資源圖、CSS 傳送、Javascript 使用、頁面速度問題及使用的服務。這項工具使用很多的圖形來呈現你的網站有那些項目可以修復,例如禁止轉譯。
Patrick 也確實在如何進一步最佳化你的網站上提出相當關鍵性的教學文件,例如透過瀏覽器快取、延遲載入 JavaScript 等等。
Uptrends
Uptrends 是一個非常基本的服務,但提供超過 35 個國家節點讓你選擇並執行網站速度測試工具。他們的報表分為兩部分,一個瀑布圖及網域名稱群組。網域名稱群組提供一個獨特的視角,因為它把資源歸類到不同來源:第一方、統計、CDN、社交網站、廣告及第三方。
dotcom-monitor
dotcom-monitor 提供 23 個不同國家節點及七種不同的瀏覽器,讓你用於執行你的網站速度測試。這項服務的特色是你可以同時執行所有地理位置的測試。這可以讓你節省大量時間,因為其他工具必須每個節點單獨測試。然後你可以點選進入每個報告或瀑布圖來查看更詳細的資料。
他們的報表分成五個不同部分,其中包括一個總覽、效能、瀑布圖、主機和錯誤。
PageScoring
PageScoring 以提供簡單易懂的簡約設計效能報表著稱。他們會秀出你的整體載入時間以及下列資訊:
- 網域名稱查找
- 連接時間
- 重新定向時間
- 頁面大小
- 下載時間
然後,你可以看到你的網站需要多少時間載入。如果你正在尋找一個快速且簡單的網站速度測試工具,PageScoring 是很不錯的選擇。
Yellow Lab Tools
Yellow Lab Tools 是 Gaël Métais 開發的一款新型網頁效能及前端品質測試工具。此工具給你大量資訊及一些在其他工具無法看到的獨特功能,例如頁面載入時 JavaScript 與 DOM 互動和其他程式碼驗證問題。可以從以下項目取得一個評分:
- 頁面權重
- 請求數
- DOM
- 錯誤的 Javascript
- 錯誤的 CSS
- 伺服器設定
JavaScript 時間軸顯示出在載入頁面的過程中,DOM 是如何相互影響。
Google Chrome 開發人員工具
當然,我們不能忘記 Google Chrome 的開發人員工具。它是一個非常易用的工具(而且具有進階功能),你可以隨時透過下面的快捷鍵在自己的 Google Chrome 瀏覽器啟用:
- Windows:F12 或 Ctrl + Shift + I 。
- Mac:Cmd + Opt + I 。
藉由開發工具的更新,他們已經加入一個更詳細的瀑布時間表。這可以讓使用者更容易看到網站中那個項目花費最多時間,也就能夠按照網域名稱、子網域等等來改善。要執行時間軸功能只需要點選「Timeline」標籤,或按下 Ctrl + R(Cmd + R)然後重新整理頁面。你可以點選「Summary」和「Aggregated」標籤來查看詳細資訊。
Sucuri Load Time Tester
Sucuri Load Time Tester 提供一個快速且簡便的方法來測試從全世界各地連接到你網站的效能表現。它會給你一個整體效能評比,從 A 至 F。這個測試方式是檢測連結到你的網站及單一頁面完整載入時間長度。一個最重要的數值是「Time to First Byte」,這代表內容傳送到瀏覽器及開始處理頁面的時間。
Pagelocity
當涉及到網站速度測試時,Pagelocity 工具提供了另一種獨特方法。它給你滿分 100 分的評比測驗,項目取決於社群網站、搜尋引擎最佳化、資源和程式碼。這個工具也提供追蹤競爭對手的能力。你可以註冊一個免費帳戶來獲取這些額外功能。程式碼檢視圖在類似工具中是獨一無二的,如果你的網站使用 HTTPS、想知道 TTFB 和圖形化 DOM 元素都能透過這項工具來做到。
YSlow
YSlow 是一項開放原始碼項目,基於 Yahoo 的規則能夠分析網站頁面並找出為什麼速度過慢的問題。目前由 Marcel Duran 維護,他也參與了 WebPageTest 專案。YSlow 使用三個步驟來獲取效能測試結果:
- YSlow 爬蟲爬行 DOM 找到所有組件(圖片、程式等等)。
- YSlow 獲取有關各個組件的大小(gzip、expire headers 等等)。
- YSlow 取得數據並依照每條規則產生評比,以此給你一個整體評分。
YSlow 使用 23 條不同規則來執行你的網頁評級。你可以使用免費的 YSlow Chrome 擴充功能從 GTmetrix 獲取 YSlow 結果。
PerfTool
PerfTool 是一個開放原始碼效能工具,託管於 Github。它收集有關你網站的各種資訊,採用更容易被理解的方式將其顯示於報表上。它將三個資料來源合而為一:PageSpeed Insights、devperf 和 W3CJS。它一共給你超過 200 個不同的網站成效指標。
使用 PerfTool 的一個絕佳優點是你可以在同一時間執行多種頁面測試工具,包括 Google PageSpeed Insights。然後,比較先前的網站測試結果、設定得分並取得更詳細的測試報告。實際上如果你想要了解整個網站的效能,這可為你節省大量時間,因為你不用逐一測試每個網頁。
總結
如你所見,以上列出了一些你可以選擇使用的網站速度測試工具。每一項都有自己的獨特功能,我在前面也已經介紹。定期測試你的網站並盡可能獲得好的評分,這段期間也別忘了持續改善網站效能。
一旦你知道網站的瓶頸在那,就可以開始解決這些問題。上面列出的所有工具幾乎都有建議功能。一些常見的修復項目包括:
- 壓縮你的圖片和檔案。
- 挑選一個快速的虛擬主機。
- 最佳化你的程式碼和程式。
- 使用內容傳遞網路(Content Deliver Network,CDN)。
- 快取。
- 減少 HTTP 請求數量。