Lighthouse 和PageSpeed，檢測網站該看哪個指標？ - Noob's ...

昨天提到Lighthouse 可以用來看PWA，但是長期有在做SEO 和網站設計的朋友應該比較熟PageSpeed，究竟這兩個評分網站有什麼不一樣？該看哪個東西比較好呢？ 昨天提到Lighthouse可以用來看PWA，但是長期有在做SEO和網站設計的朋友應該比較熟PageSpeed，究竟這兩個評分網站有什麼不一樣？該看哪個東西比較好呢？ 我們先將昨天拿來測試的網站也丟進PageSpeedInsights跑跑看結果。

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

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

開發網站時在意的點不太相同，有時候客戶提出來的KPI就是要非常快，一點也不在意使用者體驗之類的，這時PageSpeed就是你的好幫手。

它詳細到你的網站首次顯示圖片與文字的時間、到可以互動需要等多少時間等，都可以拿來看。

而且下方會有建議和預估減少的時間，改完網站後直接再跑一次，就可以看到分數相對應提升或減少。

但今天如果要開發的是比較綜合性的，例如在意使用者體驗、手機使用者的可用性，甚至是Chromebook要使用的ProgressiveWebApp，你可能就需要Lighthouse做比較全面的檢查。

另外，PageSpeed必須使用一個公開網址，所以如果你的網站尚未發佈，或是某些需要登入的非公開頁面，你也只能使用Lighthouse來測試。

不過，為什麼PageSpeed也使用Lighthouse來檢測，分數卻差異很大呢？ 在開源的Lighthouse中，檢測時使用的是控制數據（Labdata），這是在一個實驗環境中用預先準備好的設備和網路設定收集的資料，用這種資料可以確保偵錯效能問題時更順利；不過在PageSpeedInsights中更會使用真實資料（Fielddata）來測試，這些資料是使用真實的使用者資料（例如可能會從Chrome使用者體驗報告蒐集）來驗證，更能貼近真實使用者的經驗。

至於為什麼要使用真實資料，Google[1]提出了關於效能的三個迷思： 迷思一：只用一個指標就能衡量使用者體驗 迷思二：只用「代表性使用者」就能衡量使用者體驗 迷思三：我瀏覽我的網站很快，別的使用者瀏覽時應該也很快 使用者旅程地圖就是用來服務科學中用來解決迷思一的方法，使用者並不是一個點就決定今天體驗如何。

以用餐來說，你可能會需要經過點餐、上菜、甜點、結帳幾個階段，你可能因為點餐很久就抱怨到底，也可能不因為甜點難吃就覺得這家餐廳不好，整體綜合表現不是單看主菜好不好吃就可以評論的。

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

最後，不管你是使用PageSpeedInsights還是Lighthouse，請參考下面的建議，盡可能的調整，但不要完全依賴分數。

PageSpeed很嚴格，你做好的部分它不會說好棒，但你做不好的地方它就從100分往下扣，但你會發現就算把Google新聞網站（手機版測試31分、電腦版測試71分）、Apple官方網站（手機板測試38分、電腦版測試62分）丟進去也沒有很高分，但這兩個網站體驗沒有很爛吧？ 甚至建議也不用全部參考，選對你有用的做法就好。

例如你今天要為攝影師打造一個相簿集，他根本就不care使用者體驗，只想要使用者看到最好的照片，那你也不用太擔心PageSpeed叫你最佳化圖片的建議。

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

延伸閱讀：GooglePageSpeed分數害死人 參考資料 [1]HowToThinkAboutSpeedTools 本篇文章同步發表在iT邦幫忙。

我們正降低廣告比例以提升閱讀體驗。

如果你喜歡這篇文章，不妨按下Like按鈕或分享到社群，以行動支持我寫更多文章。

當然，你也可以 點此用新臺幣支持我，或 點此透過BTC、ETH、USDC等加密貨幣支持我。

分享到： 也想架個不錯的部落格，寫些不錯的文章嗎？ 本站熱門文章： 如何拍下螢幕畫面？截圖別再截全螢幕了！ API實作(一)：規劃RESTfulAPI要注意什麼 一補數與二補數 ufw：簡易防火牆設置 常見的五個開源專案授權條款，使用軟體更自由 技術好康： 免費100USD額度|DigitalOcean：俗擱大碗的VPS空間，是時候該做點更進階的事了？ 只要一折，5USD用5年|IvacyVPN HostedonDigitalOcean TDX運輸資料流通服務平臺，是交通部為落實智慧運輸政策而制定的資料整合服務平臺。

平臺上可以取得「公共運輸整合資訊」，包含公車、火車、自行車等等資訊，也可以取得「即時路況與停車資訊」，例如高速公路路況、高速公路看板上的資訊、各縣市停車場剩餘車位數等等。

TDX平臺也提供了路段編碼、圖資定位等服務，例如輸入經緯度得到這個地點的路名、輸入地址取得經緯度服務等等，基本上所有跟交通有關的API服務都整合起來了。

MovaviVideoEditorPlus是一款新的影片剪輯軟體，不管你只是想要單純的影片剪接、上字幕，還是加上影片特效、濾鏡、綠幕去背，都可以使用這款軟體來製作影片。

現在安全性越來越講究了，很多網站都開放使用二步驟驗證，甚至可以使用實體的安全金鑰；而手機端許多也支援指紋認證，不需要一直輸入密碼就能安全登入。

這篇文章會來討論這些東西大概是怎麼做的。