PageSpeed Insights 完整教學：讀懂報告、找問題、修對地方
PageSpeed Insights（PSI）是 Google 提供的網頁速度分析工具，它同時整合兩組資料：來自真實用戶的 CrUX 欄位資料，以及 Lighthouse 模擬測試的研究資料。這兩組資料的用途不同，讀法也不同。很多人跑完分數就去優化，但其實分數本身不是排名信號，排名信號是欄位資料。這篇文章從操作步驟開始，帶你讀懂每個報告區塊，並說明遇到常見問題時怎麼判斷。
PageSpeed Insights 是什麼？和 Lighthouse 有什麼不同？
PageSpeed Insights 是一套網頁速度評估服務，免費，不需要登入，任何人都可以輸入 URL 取得報告。它的核心是把兩組資料放在同一個畫面：Chrome UX Report（CrUX）收集的真實用戶體驗資料，以及 Lighthouse 在受控環境下模擬跑出的研究資料。PSI 不等於 Lighthouse，這是最常見的誤解。
PSI 的兩類資料：欄位資料 vs 研究資料
欄位資料（Field Data）來自 Chrome 用戶在過去 28 天的實際瀏覽行為，由 CrUX 整合後呈現。研究資料（Lab Data）是 Lighthouse 用模擬設備和網路條件即時跑出的結果。兩者的差距有時很大，原因是模擬條件比真實用戶更嚴苛（低階 Android 設備 + 慢速 4G 網路）。
PSI vs Lighthouse：一張表說清楚差異
| 比較項目 | PageSpeed Insights | Lighthouse（DevTools / CLI） |
|---|---|---|
| 資料來源 | CrUX 欄位資料 + Lighthouse 研究資料 | 只有 Lighthouse 研究資料 |
| 欄位資料（真實用戶） | 有（需要足夠流量） | 無 |
| 排名信號相關性 | 欄位資料直接相關 | 無直接排名相關性 |
| 適合用途 | 確認真實用戶體驗 + 找優化方向 | 本機開發測試、CI/CD 自動化 |
| 使用方式 | 瀏覽器開啟 pagespeed.web.dev | Chrome DevTools → Lighthouse 分頁 |
如果你只在本機開 DevTools 跑 Lighthouse，看到的分數是模擬分數，和 PSI 的欄位資料不同，也不代表真實用戶的體驗。
怎麼使用 PageSpeed Insights？逐步操作說明
第一次使用 PSI 花不到兩分鐘：輸入網址，選擇裝置，等報告出來。初學者最容易犯的錯是只看最上面的總分，但關鍵是要知道每個區塊在說什麼，以及先看哪裡。
- 開啟 pagespeed.web.dev，在欄位輸入要測試的頁面完整 URL（包含 https://）
- 點擊「分析」按鈕，等待約 10-30 秒
- 報告頁面頂端預設顯示行動版，點擊「電腦版」可切換到桌面版
- 先看最上方的「發現真實用戶體驗」區塊（欄位資料）
- 再往下看「診斷效能問題」區塊（研究資料 + 優化建議）
行動版和桌面版怎麼選？
PSI 預設跑行動版。如果你的網站以桌面用戶為主，可以切換桌面版；但 Google 的排名信號是以行動版為基準（行動裝置優先索引），所以行動版分數更需要關注。兩個版本都跑是最完整的做法。
報告怎麼讀？每個區塊說明
PSI 報告由上到下分三個主要區塊：第一個是欄位資料（Core Web Vitals Assessment），第二個是研究資料分數（Performance Score），第三個是優化建議清單。三個區塊的用途不同，不要混著看。
分數顏色代表什麼？
| 分數範圍 | 顏色 | 意義 |
|---|---|---|
| 90-100 | 綠色 | 良好，速度符合 Google 標準 |
| 50-89 | 橙色 | 需要改善，有明確優化空間 |
| 0-49 | 紅色 | 差，用戶體驗受影響 |
這個分數是 Lighthouse 研究資料的綜合分數，不是 Core Web Vitals 欄位資料的評等。兩者顏色系統獨立，不要混淆。
Core Web Vitals 欄位資料：為什麼重要？
欄位資料顯示的是過去 28 天，真實用戶在這個頁面（或整個網域）的 LCP、INP、CLS 數值分佈。Google 的 Core Web Vitals 排名信號就是基於這組資料。欄位資料是綠燈代表多數用戶有良好體驗；橙燈代表需要改善；紅燈代表對排名有負面影響。
| 指標 | 良好（綠） | 需改善（橙） | 差（紅） |
|---|---|---|---|
| LCP（最大內容繪製） | < 2.5 秒 | 2.5-4.0 秒 | > 4.0 秒 |
| INP（互動到下次繪製） | < 200 ms | 200-500 ms | > 500 ms |
| CLS（累計版面位移） | < 0.1 | 0.1-0.25 | > 0.25 |
PSI 建議這麼多，該從哪裡開始修？
PSI 報告的優化建議區分兩種：Opportunity（機會）和 Diagnostic（診斷）。優先修 Opportunity，因為每一條 Opportunity 都會顯示可節省的載入時間（單位 ms）或資源大小（KB），讓你知道改這條能帶來多少實際效益。Diagnostic 是除錯輔助資訊，告訴你發生什麼事，但沒有直接量化收益。
Opportunity vs Diagnostic：兩種建議的差異
| 類型 | 特徵 | 行動建議 |
|---|---|---|
| Opportunity（機會） | 顯示可節省 X 秒或 X KB | 優先處理，有直接效益 |
| Diagnostic（診斷） | 說明現象，無量化收益數字 | 配合 Opportunity 使用，輔助排查根因 |
有 Core Web Vitals 標示的 Opportunity 優先修
部分 Opportunity 旁邊有 LCP 或 INP 標示，代表這條建議直接影響對應的 Core Web Vitals 指標。這類建議影響排名信號，應該排在最前面修。例如「預先載入最大內容繪製圖像」標示為 LCP，改完後可以直接觀察欄位資料 LCP 是否改善。
PSI 沒有顯示欄位資料怎麼辦？
PSI 的欄位資料區塊顯示「這個頁面的 Chrome 用戶體驗報告沒有足夠資料」，代表這個頁面在過去 28 天的 CrUX 快照裡資料不足。這不是工具壞了，是正常情況。CrUX 需要至少 100 個真實 Chrome 用戶的樣本才會顯示該頁面的欄位資料。
遇到這種情況有幾個替代診斷路徑：
- 用 GSC 的 Core Web Vitals 報告：GSC 會用網域整體資料或相似頁面的資料來估算，即使單頁流量不足也能看到分組評等。進入 GSC Core Web Vitals 報告查看。
- 改看 Lighthouse 研究資料：欄位資料空白時，把重心放在 PSI 研究資料的 Opportunity 優化建議，先改善模擬條件下的指標。
- 確認 URL 是否正確：PSI 是按 URL 計算，確認你測試的是真實有流量的頁面 URL，而不是 staging 或 noindex 頁面。
新網站或新頁面在上線初期幾乎都沒有欄位資料，這是正常的。等頁面累積足夠用戶後，欄位資料會自動出現。
行動版分數比桌面版低很多，問題出在哪？
行動版 PSI 分數比桌面版低 20 分以上是很常見的情況。這不是 PSI 的偏差，而是行動版使用的模擬條件更嚴苛：低階 Android 設備（Moto G Power 等級）加上 4G 慢速網路（下載 1.6 Mbps，RTT 150ms）。桌面版則是模擬有線網路連線，條件好很多。
如果行動版落差很大，優先排查：
- JavaScript 執行時間過長：Diagnostic 區塊的「減少 JavaScript 執行時間」是第一個線索。行動設備 CPU 算力比桌面低 4-6 倍。
- 圖片格式和大小：未轉換的 JPG/PNG 在行動版影響更大，建議確認 LCP 元素的格式和 loading 屬性。詳細修復步驟參考 LCP 優化完整指南。
- 第三方腳本：行動版 CPU 有限，第三方腳本（analytics、chat、廣告）造成的 INP 問題更明顯。
- CLS 跳動：未設定尺寸的圖片在行動版版面變化更劇烈，容易造成版面位移。參考 CLS 檢測與修復。
PSI 分數 100 分等於 SEO 排名好嗎？
PSI 分數 100 分不代表排名好，這是業界最常見的誤解之一。PSI 的研究資料分數（0-100）是 Lighthouse 的效能評估，Google 的排名信號是 CrUX 的欄位資料，兩者獨立。
一個分數 100 的頁面，如果 CrUX 欄位資料的 LCP 是紅燈（真實用戶載入很慢），對排名的影響和分數 50 但欄位資料全綠燈的頁面比，後者對排名更有利。
正確的邏輯是：用 PSI 研究資料找出要修什麼，修完後等 28 天觀察 CrUX 欄位資料的變化，欄位資料改善才代表排名信號改善。PSI 分數是診斷工具，不是 KPI。
應該多久跑一次 PageSpeed Insights？
PSI 是靜態快照，每次跑都是當下的結果，相同頁面前後兩次分數差 5-10 分是正常波動範圍。沒有固定的「應該幾天跑一次」，但有幾個場景是必跑的：
- 新頁面上線前：確認主要模板的研究資料分數基準，記錄行動版分數
- 改版後 24-48 小時內：確認更新沒有造成分數明顯下滑
- 每月固定健檢：針對重要商業頁面（首頁、產品頁、轉換頁）跑一次，搭配 GSC Core Web Vitals 報告確認欄位資料趨勢
- GSC 出現 CWV 警告時：緊急排查，PSI 是第一個確認工具
如果你管多個頁面，可以用 PSI API 批次測試，省去手動一頁一頁貼 URL 的時間。
看完報告，接下來怎麼做？
PSI 報告給你的是診斷清單，不是修復手冊。看完報告後，先確認欄位資料哪個指標是紅燈或橙燈，然後跳到對應的指標深度教學頁面處理根本原因：
- LCP 是問題：確認 LCP 元素是什麼（通常是 Hero 圖片或大標題）、TTFB 是否正常、圖片有無 preload。完整診斷流程參考 LCP 優化指南。
- INP 是問題：用 Chrome DevTools 的 Performance 面板記錄互動延遲，找出是哪段 JavaScript 造成長任務。詳見 INP 修復完整教學。
- CLS 是問題：確認是否有未設定尺寸的圖片、動態插入的廣告區塊、字型載入造成的版面跳動。排查流程參考 CLS 診斷與修復。
- PSI 顯示圖片相關警告（格式未優化、尺寸不當、缺少 Alt）：從 WebP/AVIF 格式選擇、srcset、壓縮到 Alt 設定逐步修復，參考 圖片 SEO 優化指南。
這三個指標的優先順序取決於 GSC 的 CWV 報告哪一類警告頁面最多。PSI 負責確認單一頁面的問題，GSC 負責幫你找到網站上哪些頁面群組問題最嚴重。兩個工具搭配使用，才能有系統地改善 Core Web Vitals 整體表現。