加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例
11 Sep 2018針對網站進行各種工具的測試並做優化。
衡量標準
- First Meaningful Paint（FMP）：頁面主要內容出現於螢幕上所需要的時間，可用於衡量使用者對於效能的感受。
- Raw Load Speed（原始加載速度）：頁面下載完成所需要的時間。
測試工具
- Google PageSpeed Insights
- WebPageTest
- Pingdom
- Lighthouse
- TestMySite
- Chrome DevTools：可分析頁面加載和渲染效能的瓶頸，這應該是最多人在用的工具了！本文只是列出此項工具，並未實際測試。
- Navigation and Resource Timing API：使用瀏覽器內建的 API 以顯示更詳細的資訊，例如：文件卸載、文件處理、重定向、獲取特定資源所需要的時間、HTTP 標頭資源大小等，這對於有特定需求（尤其是細瑣問題）特別有幫助。本文只是列出此項工具，並未實際測試。
原始頁面
Google PageSpeed Insights
對行動裝置版本的網頁評分為 68/100，對桌機版本的網頁評分為 44/100。
在行動裝置版本的網頁方面，建議清除禁止轉譯的 CSS 資源、啟用壓縮。
在桌機版本的網頁方面，同樣也是建議清除禁止轉譯的 CSS 資源、啟用壓縮。
Pingdom
Pingdom 將其評等為 A，分數為 90，似乎比 Google PageSpeed Insights 的評分來得好（？）。Pingdom 提供了網頁的加載時間為 1.02 秒，下載的資源共 2.1MB，發出 79 個 HTTP 請求，速度比測試過的 89% 的網站來的快。
點此看報告。
WebPageTest
加載時間為 3.884 秒（高於 Pingdom 所測試的 1.02 秒），大部份的 HTTP 請求是源自於圖檔，並且大多是下載 script 檔案。
點此看報告。
Lighthouse
經過以上工具的測試，大概知道問題在哪裡了，著手進行修正吧！
文字資源優化
壓縮文字資源，例如：Gzip，這是一個花很少功夫但成效很顯著的項目。
如果部署到 Heroku 上但無法看到壓縮結果，不要擔心，這是 Heroku 的已知問題，換個地方放程式碼就好了。因此，我就換到 ZEIT 了！
Google PageSpeed Insights
原始狀態對行動裝置版本的網頁評分為 68/100，對桌機版本的網頁評分為 44/100；使用 Gzip 壓縮文字資源後，行動裝置版本的網頁評分為 60/100，對桌機版本的網頁評分為 86/100。
- First Meaningful Paint（FMP）：無資料。
- Raw Load Speed（原始加載速度）：無資料。
檢視行動裝置版的結果如下，必須修正禁止轉譯的 CSS 資源和改善伺服器回應的時間（必須小於 200ms）。
檢視桌機版的結果如下，同樣也是必須修正禁止轉譯的 CSS 資源和改善伺服器回應的時間（必須小於 200ms）。
關於禁止轉譯的 CSS 資源這項 issue，由於這一支樣式是全站共用的，希望能讓瀏覽器快取，因此不做修正。
Pingdom
使用 Gzip 壓縮文字資源後，分數提高為 92 分，並且可看到 Page Size 明顯降低許多（2.1 MB -> 873.7 KB）。
雖然建議合併 JavaScript 檔案，但因為這是經由 Webpack 分析模組後優化而切分的檔案，讓瀏覽器能適當地做快取，因此就不改善這一項了。
- First Meaningful Paint（FMP）：無資料。
- Raw Load Speed（原始加載速度）：1.02 秒 -> 1.9 秒。
點此看報告。
WebPageTest
這裡看到一些進步…
- 頁面檔案變小（1874 KB -> 564 KB）
- 提前使用者能開始互動的時間（4.457 秒 -> 3.709 秒）
- First Meaningful Paint（FMP）：2.8 秒 -> 2.5 秒，提前渲染的時間。
- Raw Load Speed（原始加載速度）：3.884 秒 -> 3.047 秒，加載時間下降。
點此看報告。
Lighthouse
分數提高很多（25 -> 64，但分數其實不重要，知道要改什麼才重要！），各項指標也改善很多。
- First Meaningful Paint（FMP）：5.2 秒 -> 3.8 秒。
- Raw Load Speed（原始加載速度）：無資料。
這裡提到要改善伺服器回應的時間、移除禁止轉譯的 CSS 等。
TestMySite
TestMySite 跑得很慢，嘗試了很多次才測完並拿到測試報告，主要是檢視加載時間、與其他網站的比較，偏向商業性質考量。若想要詳細的測試報告，可填寫表單後由系統 Email 寄出。
系統 Email 來的測試報告，提醒應修正禁止轉譯的 CSS 資源。
總結
看起來好像改很少（？），但其實是因為之前已經默默改了很多東西了，像是圖片最佳化（Image Optimization）、Prefetch 等。
之前也整理過一篇類似主題的文章-看這裡，但那篇比較像是各種檢測工具的簡介和小小的比較，這篇就是針對工具提出的建議做修改的範例。
繼續努力吧！ (๑•̀ㅂ•́)و✧
