首先要搞懂三個核心指標
- LCP - Largest Contentful Paint (最大內容繪製)
- CLS (累積版面配置轉移)
- INP (互動互動對下一次繪製)
今次我地講下 LCP:
簡單講就係: 從用戶開始click到你個website，到頁面上「最大的視覺元素」完全呈現出來，需要多少時間。
咁可能你會問，成個website咁多content，點先叫做 LCP elements?
其實browser會觀察首屏（Viewport）內最大的元素，通常會是以下幾種：
一張大圖片（例如 Banner 圖、產品主圖 ）
一段文字塊（例如文章標題 <h1> 或第一段大面積文字）
影片的預覽圖（Poster image）
背景圖片（CSS load果d url）
觀察完，怎樣的分數才算好？
Google 針對 LCP 設定了三個等級的標準：
優 (Good)：2.5 秒 內。👍🏻
待改進 (Needs Improvement)：2.5 秒 至 4 秒 之間。👍🏻
差 (Poor)：超過 4 秒。👎🏻
如果你的 LCP 超過 2.5 秒，使用者就會開始覺得你的網站「慢」，這不僅會扣 Google Insights 的分數，還會直接影響你的 SEO 排名。