Google 在官方部落格中針對使用者體驗推出了新的 3 項 Core web vitals (暫譯網站核心指標)。這三項指標分別對網站載入速度 (LCP)、可開始互動的時間 (FID)、以及頁面穩定性 (CLS) 分別進行評分。與此同時，Google 也在這份文章中提到，除了 3 項網站核心指標外，行動版友好度、安全性瀏覽、HTTPS/SSL、跳版式廣告同時也會影響網站的排名。
網站載入速度 (LCP)
Largest Contentful Paint 顯示最大內容元素所需時間 (LCP) – 載入速度
與 FCP 不同的是，LCP 更加注重頁面中最大元素的載入速度。而 Google 是怎麼判定最大元素呢？當頁面在載入的過程中，Google 會去抓取頁面可視範圍中最大的元素，並會隨時針對可視範圍中的內容改變，直到頁面完全載入後，才會將頁面中最大的元素訂為 LCP。
LCP 會偵測那些項目？
- 圖片
- svg 向量圖片
- 影片 (預覽大圖)
- 透過 url() 的 CSS 功能載入背景圖片的元素
- 包含文字的區塊級元素 (block-level elements) 或行內元素 (inline elements)
LCP 該如何進行優化？
通常 LCP 可以針對以下 4 大點來進行優化
- 減少伺服器回應時間
- 針對主機進行優化
- 使用較近的 CDN 主機
- 使用網頁快取
- 讓第三方的資源提早載入
- 排除禁止轉譯的資源
- 降低 JavaScript 阻擋時間
- 降低 CSS 阻擋時間
- 加快資源載入的時間
- 圖片大小優化
- 預先載入重要資源
- 將文字檔案進行壓縮
- 根據使用者的網路狀態提供不同的內容
- 使用 service worker
- 避免使用客戶端渲染(CSR)
- 若必須使用 CSR ，建議優化 JavaScript ，避免渲染時使用太多資源
- 盡量在伺服器端完成頁面渲染，讓用戶端取得已渲染好的內容
可開始互動的時間 (FID)
First Input Delay 首次輸入延遲/封鎖時間總計 (FID) – 可開始互動的時間
什麼是 FID ？
首次輸入 (First Input) 與頁面上的響應元件 (responsive elements) 息息相關。這些響應元件可能是連結、按鈕或是跳出式元素 (pop-ups)。
輸入延遲 (Input Delay) 通常發生於瀏覽器的主執行序過度繁忙，而導致頁面內容無法正確地與使用者進行互動。舉例來說，可能瀏覽器正在載入一支相當肥大的 JavaScript 檔案，導致其他元素不能被載入而延遲可互動的時間。
常見延遲的問題有：
- 點選連結或按鈕載入內容延遲
- 文字對話框無法立即輸入文字
- 打開下拉式選單畫面延遲
- 無法勾選對話方塊
FID該如何進行優化？
- 減少JavaScript運作的時間
- 降低網站的request數並降低檔案大小
- 減少主執行序的工作
- 降低第三方程式碼的影響
頁面穩定性 (CLS)
Cumulative Layout Shift 累計版面配置轉移 (CLS) – 頁面穩定性
你是不是也有過這樣的經驗呢？當你正在使用一個頁面時，突然跳出一個按鈕或廣告，導致點擊到非目標按鈕或功能。Google 對於此情形建立了一個頁面穩定性的指標 – CLS。
可預期的版面配置轉移 (Expected layout shifts)
當你在 web.dev 的網站中，點選內容回饋的收合功能，這時候頁面因為收合而導致的版面配置轉移是可以預期的。因此， Google不會將此判定為是頁面的不穩定性。
不可預期的版面配置轉移(Un-expected layout shifts)
不可預期的版面配置轉移通常是因為網頁內的元素載入順序不同而造成的。在 Google 提供的範例裡，由於 Click Me! 的按鈕是在文字方塊載入後才載入的，導致使用者在閱讀到一半時出現內容位移的情形，這種對於使用者來說不可預期的版面配置轉移就會影響 CLS 指標的分數。
CLS該如何進行優化？
- 透過 CSS 語法，為網頁中的元素提供預留的空位，避免載入後導致頁面中的內容移動
- 透過 <preload> 的方式，將會導致頁面內容移動的元素提前載入 (字體、圖片等)
跨際數位擁有專業的網頁製作和 SEO 團隊，需要協助嗎？立即告訴我們您的行銷需求 >>> 聯絡我們
