加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例

針對網站進行各種工具的測試並做優化。

衡量標準

測試工具

原始頁面

吃什麼,どっち-原始頁面

Google PageSpeed Insights

對行動裝置版本的網頁評分為 68/100,對桌機版本的網頁評分為 44/100。

在行動裝置版本的網頁方面,建議清除禁止轉譯的 CSS 資源、啟用壓縮。

吃什麼,どっち-原始頁面 Google PageSpeed Insights 針對行動裝置版本網頁的建議

在桌機版本的網頁方面,同樣也是建議清除禁止轉譯的 CSS 資源、啟用壓縮。

吃什麼,どっち-原始頁面 Google PageSpeed Insights 針對桌機版本網頁的建議

Pingdom

Pingdom 將其評等為 A,分數為 90,似乎比 Google PageSpeed Insights 的評分來得好(?)。Pingdom 提供了網頁的加載時間為 1.02 秒,下載的資源共 2.1MB,發出 79 個 HTTP 請求,速度比測試過的 89% 的網站來的快。

吃什麼,どっち-原始頁面 Pingdom

點此看報告。

WebPageTest

加載時間為 3.884 秒(高於 Pingdom 所測試的 1.02 秒),大部份的 HTTP 請求是源自於圖檔,並且大多是下載 script 檔案。

吃什麼,どっち-原始頁面 WebPageTest

吃什麼,どっち-原始頁面 WebPageTest

吃什麼,どっち-原始頁面 WebPageTest

點此看報告。

Lighthouse

吃什麼,どっち-原始頁面 Lighthouse

經過以上工具的測試,大概知道問題在哪裡了,著手進行修正吧!

文字資源優化

壓縮文字資源,例如:Gzip,這是一個花很少功夫但成效很顯著的項目。

如果部署到 Heroku 上但無法看到壓縮結果,不要擔心,這是 Heroku 的已知問題,換個地方放程式碼就好了。因此,我就換到 ZEIT 了!

Google PageSpeed Insights

原始狀態對行動裝置版本的網頁評分為 68/100,對桌機版本的網頁評分為 44/100;使用 Gzip 壓縮文字資源後,行動裝置版本的網頁評分為 60/100,對桌機版本的網頁評分為 86/100。

檢視行動裝置版的結果如下,必須修正禁止轉譯的 CSS 資源和改善伺服器回應的時間(必須小於 200ms)

吃什麼,どっち-Google PageSpeed Insights 文字資源優化

檢視桌機版的結果如下,同樣也是必須修正禁止轉譯的 CSS 資源和改善伺服器回應的時間(必須小於 200ms)

吃什麼,どっち-Google PageSpeed Insights 文字資源優化

關於禁止轉譯的 CSS 資源這項 issue,由於這一支樣式是全站共用的,希望能讓瀏覽器快取,因此不做修正。

Pingdom

使用 Gzip 壓縮文字資源後,分數提高為 92 分,並且可看到 Page Size 明顯降低許多(2.1 MB -> 873.7 KB)。

雖然建議合併 JavaScript 檔案,但因為這是經由 Webpack 分析模組後優化而切分的檔案,讓瀏覽器能適當地做快取,因此就不改善這一項了。

吃什麼,どっち-Pingdom 文字資源優化

點此看報告。

WebPageTest

這裡看到一些進步…

吃什麼,どっち-WebPageTest 文字資源優化

點此看報告。

Lighthouse

分數提高很多(25 -> 64,但分數其實不重要,知道要改什麼才重要!),各項指標也改善很多。

吃什麼,どっち-Lighthouse 文字資源優化

這裡提到要改善伺服器回應的時間移除禁止轉譯的 CSS 等。

TestMySite

TestMySite 跑得很慢,嘗試了很多次才測完並拿到測試報告,主要是檢視加載時間、與其他網站的比較,偏向商業性質考量。若想要詳細的測試報告,可填寫表單後由系統 Email 寄出。

吃什麼,どっち-TestMySite 文字資源優化

吃什麼,どっち-TestMySite 文字資源優化

吃什麼,どっち-TestMySite 文字資源優化

系統 Email 來的測試報告,提醒應修正禁止轉譯的 CSS 資源

吃什麼,どっち-TestMySite 文字資源優化

吃什麼,どっち-TestMySite 文字資源優化

總結

看起來好像改很少(?),但其實是因為之前已經默默改了很多東西了,像是圖片最佳化(Image Optimization)Prefetch 等。

之前也整理過一篇類似主題的文章-看這裡,但那篇比較像是各種檢測工具的簡介和小小的比較,這篇就是針對工具提出的建議做修改的範例。

繼續努力吧! (๑•̀ㅂ•́)و✧

References


comments powered by Disqus