這份指南提供給正在處理網站問題的企業與專案負責人,協助釐清問題來源與檢查順序。
LCP:主要內容何時載入
Largest Contentful Paint 觀察主要可見內容的載入體驗。先找出首屏最大元素,再檢查伺服器回應、圖片優先順序、CSS 及字型。
INP:點擊後多久有反應
Interaction to Next Paint 反映互動回應。按鈕卡住、篩選延遲可能與 JavaScript 長任務、複雜元件或第三方追蹤程式有關。
CLS:畫面會不會突然位移
Cumulative Layout Shift 觀察視覺穩定性。圖片未設定尺寸、動態廣告、字型切換及非同步元件都可能造成版面跳動。
真實使用者資料與工具分數不同
PageSpeed Insights 可能顯示真實使用者資料及 Lighthouse 實驗室結果。前者反映一段時間的體驗,後者適合協助找出瓶頸。
先優化影響業務的頁面
優先處理廣告著陸頁、主要服務頁、商品頁及洽詢頁。保留必要功能,逐項修改並複測。
如何驗收效能優化
事先確認測試網址、裝置、網路條件、指標與工作範圍,保存修改前後的結果。
處理前後檢查清單
- 記錄 LCP、INP、CLS 及測試條件
- 檢查首屏圖片、字型、程式及伺服器
- 優先處理重要業務頁面
- 保留修改與複測紀錄