昨天提到 Lighthouse 可以用來看 PWA,但是長期有在做 SEO 和網站設計的朋友應該比較熟 PageSpeed,究竟這兩個評分網站有什麼不一樣?該看哪個東西比較好呢?

我們先將昨天拿來測試的網站也丟進 PageSpeed Insights 跑跑看結果。

pagespeed

結果長的就跟 Lighthouse 類似,一樣是有分數,下面有算出來的指標以及建議,你也可以捲到更下面查看已通過的項目。

pagespeed2

你可以對照看看同一個網頁 用 Lighthouse 跑出來的結果 作對比,PageSpeed 主要在意速度的部分,提出來的研究資料都是和時間有關;Lighthouse 則是提出效能、可用性、最佳實踐、SEO、PWA 等好幾個指標。

開發網站時在意的點不太相同,有時候客戶提出來的 KPI 就是要非常快,一點也不在意使用者體驗之類的,這時 PageSpeed 就是你的好幫手。它詳細到你的網站首次顯示圖片與文字的時間、到可以互動需要等多少時間等,都可以拿來看。而且下方會有建議和預估減少的時間,改完網站後直接再跑一次,就可以看到分數相對應提升或減少。

但今天如果要開發的是比較綜合性的,例如在意使用者體驗、手機使用者的可用性,甚至是 Chromebook 要使用的 Progressive Web App,你可能就需要 Lighthouse 做比較全面的檢查。另外,PageSpeed 必須使用一個公開網址,所以如果你的網站尚未發佈,或是某些需要登入的非公開頁面,你也只能使用 Lighthouse 來測試。

不過,為什麼 PageSpeed 也使用 Lighthouse 來檢測,分數卻差異很大呢?

pagespeed3

在開源的 Lighthouse 中,檢測時使用的是控制數據(Lab data),這是在一個實驗環境中用預先準備好的設備和網路設定收集的資料,用這種資料可以確保偵錯效能問題時更順利;不過在 PageSpeed Insights 中更會使用真實資料(Field data)來測試,這些資料是使用真實的使用者資料(例如可能會從 Chrome 使用者體驗報告蒐集)來驗證,更能貼近真實使用者的經驗。

至於為什麼要使用真實資料,Google [1] 提出了關於效能的三個迷思:

  • 迷思一:只用一個指標就能衡量使用者體驗
  • 迷思二:只用「代表性使用者」就能衡量使用者體驗
  • 迷思三:我瀏覽我的網站很快,別的使用者瀏覽時應該也很快

使用者旅程地圖就是用來服務科學中用來解決迷思一的方法,使用者並不是一個點就決定今天體驗如何。以用餐來說,你可能會需要經過點餐上菜甜點結帳幾個階段,你可能因為點餐很久就抱怨到底,也可能不因為甜點難吃就覺得這家餐廳不好,整體綜合表現不是單看主菜好不好吃就可以評論的。

另外,饕客也有挑食的、年輕的、國外的等等,在網頁使用上,來自不同裝置的使用者(Chromebook、高階手機、低階手機),使用不同網路(有線網路、5G 網路、3G 網路),使用不同瀏覽器(Firefox、Internet Explorer、w3m),甚至上網地點(出差去日本回不來的人)到處都有,這些條件都是重要的指標,這也是為什麼要使用真實資料來檢測網站狀況。

最後,不管你是使用 PageSpeed Insights 還是 Lighthouse,請參考下面的建議,盡可能的調整,但不要完全依賴分數。PageSpeed 很嚴格,你做好的部分它不會說好棒,但你做不好的地方它就從 100 分往下扣,但你會發現就算把 Google 新聞網站(手機版測試 31 分、電腦版測試 71 分)、Apple 官方網站(手機板測試 38 分、電腦版測試 62 分)丟進去也沒有很高分,但這兩個網站體驗沒有很爛吧?

甚至建議也不用全部參考,選對你有用的做法就好。例如你今天要為攝影師打造一個相簿集,他根本就不 care 使用者體驗,只想要使用者看到最好的照片,那你也不用太擔心 PageSpeed 叫你最佳化圖片的建議。

攝影師相簿集只是舉個例子來表示你需要注意的 trade-off,實際上還是有另外準備縮圖的辦法。

延伸閱讀:Google PageSpeed 分數害死人

參考資料

本篇文章同步發表在 iT邦幫忙