知識中心

LCP、INP、CLS 是什麼?網站效能先改善哪裡?

說明三項核心網頁指標、真實使用者資料與實驗室測試的差異,整理台灣網站的效能檢查方向。

這份指南提供給正在處理網站問題的企業與專案負責人,協助釐清問題來源與檢查順序。

LCP:主要內容何時載入

Largest Contentful Paint 觀察主要可見內容的載入體驗。先找出首屏最大元素,再檢查伺服器回應、圖片優先順序、CSS 及字型。

INP:點擊後多久有反應

Interaction to Next Paint 反映互動回應。按鈕卡住、篩選延遲可能與 JavaScript 長任務、複雜元件或第三方追蹤程式有關。

CLS:畫面會不會突然位移

Cumulative Layout Shift 觀察視覺穩定性。圖片未設定尺寸、動態廣告、字型切換及非同步元件都可能造成版面跳動。

真實使用者資料與工具分數不同

PageSpeed Insights 可能顯示真實使用者資料及 Lighthouse 實驗室結果。前者反映一段時間的體驗,後者適合協助找出瓶頸。

先優化影響業務的頁面

優先處理廣告著陸頁、主要服務頁、商品頁及洽詢頁。保留必要功能,逐項修改並複測。

如何驗收效能優化

事先確認測試網址、裝置、網路條件、指標與工作範圍,保存修改前後的結果。

處理前後檢查清單

  • 記錄 LCP、INP、CLS 及測試條件
  • 檢查首屏圖片、字型、程式及伺服器
  • 優先處理重要業務頁面
  • 保留修改與複測紀錄

參考資料