Lighthouse 與 PageSpeed Insights：分數怎麼看、怎麼改
Lighthouse 是最常被使用、也最常被誤讀的 SEO 工具 。它給的是 實驗室數據，在固定條件下模擬一次載入的結果。
一句話先講清楚
它是除錯工具，不是評分依據。 真正的評分來自 真實使用者數據 。
四個類別
| 類別 | 檢查什麼 | 對 SEO 的價值 |
|---|---|---|
| 效能 | 載入速度與互動延遲 | 高 |
| SEO | 少數機械式條件 | 低 |
| 無障礙 | 語意標籤、對比、鍵盤操作 | 中（間接 ） |
| 最佳做法 | HTTPS、主控台錯誤、過時 API | 低 |
舊教學裡的第五個類別已經沒了
以前還有一個「漸進式網頁應用程式（PWA）」類別，Lighthouse 12 起已經移除。看到舊文章提到五個類別，那是過期的資訊。
SEO 分數實際檢查什麼
100 分不等於 SEO 做完了
它只檢查這幾個 機械式條件：
| 檢查 | 說明 |
|---|---|
有 <title> | 存在就好，不看寫得好不好 |
有 meta description | 同上 |
| 回傳成功的狀態碼 | 不是 4xx 或 5xx |
沒有被 robots.txt 封鎖 | 可爬取 |
沒有 noindex | 可索引 |
| 連結有錨點文字 | 不是空的 |
| 連結可被爬取 | 是 <a href> |
圖片有 alt | 存在就好 |
有 viewport | 行動裝置友善 |
hreflang 有效 | 若有設定 |
| 結構化資料語法有效 | 若有標記 |
它 不檢查 的東西：
| 不檢查 | 該用什麼 |
|---|---|
| 標題與描述寫得好不好 | 人工判斷，見 標題 、描述 |
| 有沒有被實際收錄 | Search Console |
| 內容品質與關鍵字貼切度 | 人工判斷 |
| 結構化資料能否取得複合式結果 | 複合式搜尋結果測試 |
| 全站的重複內容 | Search Console |
| 社群卡片正不正常 | 各平台的除錯工具 |
這個站的 SEO 分數是 100，但那不是重點
每篇文章都有唯一的標題與描述、每張圖都有 alt、有 viewport，這些條件很容易滿足。
滿分只代表沒有明顯的低級錯誤。 內容有沒有價值、有沒有被收錄，它一概不知道。
效能分數的權重
效能分數由五個指標加權而成：
| 指標 | 權重 | 說明 |
|---|---|---|
| 總阻塞時間（TBT） | 約 30% | 長任務 的總量 |
| 最大內容繪製（LCP） | 約 25% | 主要內容繪製完成 |
| 累積版位偏移（CLS） | 約 25% | 版面穩定度 |
| 首次內容繪製（FCP） | 約 10% | 首次出現內容 |
| 速度指數（SI） | 約 10% | 內容填滿畫面的速度 |
先看權重最高的兩項
TBT 與 LCP 加起來過半。想提升分數就從這兩項下手，其餘的權重相對小。
TBT 是 INP 的實驗室替代指標，Lighthouse 沒辦法量真實互動，所以用長任務的總量代替。
分數為什麼每次都不同
浮動是正常的
它 實際載入了一次網頁，受這些影響：
| 影響來源 | 說明 |
|---|---|
| 網路狀況 | 每次的延遲不同 |
| 伺服器負載 | 剛好比較忙的時候變慢 |
| 第三方程式碼 | 廣告與分析工具的回應時間不定 |
| 本機的 CPU 狀態 | 同時開了什麼程式 |
| A/B 測試 | 每次可能分到不同版本 |
看多次結果的中位數
單次分數 85、下一次 92，那不代表您改了什麼。跑三到五次取中位數 才有參考價值。
在持續整合流程裡跑時也要設定多次執行取中位數，否則門檻會偶發性地擋掉正常的提交。
Lighthouse 還是 PageSpeed Insights
| Lighthouse（DevTools） | PageSpeed Insights | |
|---|---|---|
| 實驗室數據 | 有 | 有（就是 Lighthouse） |
| 真實使用者數據 | 無 | 有 |
| 在哪跑 | 本機瀏覽器 | Google 的伺服器 |
| 可測本機環境 | 是 | 否（要公開網址） |
| 反覆除錯 | 方便 | 較慢 |
分工很清楚
- 在本機反覆改、反覆測 → DevTools 的 Lighthouse
- 想看真實使用者數據 → PageSpeed Insights
- 想確認線上版本 → PageSpeed Insights
PageSpeed Insights 的上半部是真實數據（CrUX），下半部才是 Lighthouse 的模擬結果。上半部才是評分依據。
怎麼跑
DevTools
- 開發者工具 → Lighthouse 分頁
- 選類別（通常只需要「效能」與「SEO」）
- 選裝置（優先看行動裝置）
- 按「Analyze page load」
用無痕視窗跑
擴充套件會干擾結果，廣告阻擋器會讓分數變高，其他擴充可能注入程式碼讓分數變低。
無痕視窗預設停用擴充套件，結果比較乾淨。
命令列
npx lighthouse https://example.com \
--only-categories=performance,seo \
--preset=desktop \
--output=html \
--output-path=./report.html常用參數：
| 參數 | 作用 |
|---|---|
--only-categories | 只跑指定類別，比較快 |
--preset=desktop | 用桌機設定（預設是行動裝置） |
--output=json | 輸出 JSON 供程式處理 |
--chrome-flags="--headless" | 無視窗模式，適合 CI |
把這幾個參數組起來就能放進持續整合流程，設定分數門檻擋住退步。
報告裡最有用的三區
不要只看分數，看下面的建議
| 區塊 | 內容 |
|---|---|
| Diagnostics | 具體的問題與影響（哪個資源、省得下多少時間） |
| Opportunities | 可以省下多少時間的機會清單 |
| Passed audits | 已經通過的項目 |
Diagnostics 裡最有價值的兩項：
- Largest Contentful Paint element：直接告訴您 LCP 是哪個元素。
- Avoid large layout shifts：列出造成 CLS 的元素。
這兩個資訊比分數有用得多。
常見建議與對應章節
| Lighthouse 的建議 | 對應做法 |
|---|---|
| Eliminate render-blocking resources | 阻塞渲染的 CSS 與 JavaScript |
| Properly size images | 響應式圖片 srcset 與 sizes |
| Serve images in next-gen formats | 圖片格式 WebP 與 AVIF |
| Defer offscreen images | 圖片延遲載入 |
| Preload Largest Contentful Paint image | 資源提示 |
| Ensure text remains visible during webfont load | 字型顯示 font-display |
| Avoid enormous network payloads | 圖片 與 字型 |
| Reduce unused CSS / JavaScript | 阻塞渲染 |
| Minimize main-thread work | 互動到下次繪製 INP |
| Reduce initial server response time | 伺服器回應 TTFB |
| Image elements do not have explicit width and height | 累積版位偏移 CLS |
不要追求滿分
追分數會走進誤區
| 誤區 | 為什麼有問題 |
|---|---|
| 為了分數移除必要功能 | 使用者需要那個功能 |
| 為了分數延後所有程式碼 | 首屏需要的東西也被延後 |
| 只在桌機模式跑 | 行動裝置才是主要流量 |
| 只測首頁 | 內容頁的問題完全沒看到 |
| 分數 95 想推到 100 | 邊際效益極低 |
合理的目標
- 效能：行動裝置 75 以上，並確認三個核心指標都在良好範圍。
- SEO：90 以上（這個很容易達成，達不到通常是有明顯疏漏）。
- 無障礙：90 以上。
然後 把注意力轉到真實使用者數據。那才是評分依據。
這個站的分數
靜態站的分數天生就高
| 特性 | 對分數的影響 |
|---|---|
| 靜態產生 | TTFB 極短 |
| 橫幅是幾 KB 的 SVG | LCP 資源很小 |
| 沒有網頁字型 | 少一輪請求，沒有 FOIT |
| 圖片都標了寬高 | CLS 接近 0 |
第三方程式碼只有分析，且 async | TBT 低 |
| 開發與測試環境不載入第三方 | 本機測起來乾淨 |
這些都不是為了分數做的，是架構選擇的自然結果。這也是本篇的重點：分數是結果，不是目標。
檢查清單
| 項目 | 標準 |
|---|---|
| 用無痕視窗跑，避免擴充干擾 | 必備 |
| 優先看行動裝置模式 | 必備 |
| 跑多次取中位數 | 建議 |
| 除了首頁也測內容頁 | 必備 |
| 看 Diagnostics 而非只看分數 | 建議 |
| 知道 SEO 分數只檢查機械式條件 | 必備 |
| 用 PageSpeed Insights 看真實數據 | 必備 |
| 不為了分數移除必要功能 | 必備 |
常見問題
SEO 分數拿到 100 就等於做完了嗎？
不等於。那一項只檢查少數幾個機械式條件，例如：有沒有標題、有沒有描述、連結有沒有錨點文字。它不看內容品質、不看關鍵字是否貼切、也不看有沒有被收錄。滿分只代表沒有明顯的低級錯誤。
為什麼同一頁跑兩次分數不一樣？
它實際載入了一次網頁，受網路狀況、伺服器負載、第三方程式碼回應速度影響，分數本來就會浮動。判斷有沒有改善要看多次結果的中位數，不要用單次分數下結論。
效能分數怎麼算出來的？
由五個量測指標加權而成，其中總阻塞時間與最大內容繪製的權重最高，各佔約四分之一到三成。所以想提升分數就先看這兩項，其餘指標的權重相對小。
PageSpeed Insights 和 Lighthouse 是同一個嗎？
前者的實驗室數據部分就是後者，但它額外顯示真實使用者數據。所以要看真實數據就用前者，要在本機反覆除錯就用開發者工具裡的後者。
分數該追求多少？
沒有標準答案，也不必追求滿分。真正的評分依據是 真實使用者數據 ，稽核分數只是除錯的線索。把力氣放在報告列出的具體建議上，比追分數有意義。
