前言
Google在2020年5月曾經宣布，網站使用體驗核心指標(Core Web Vitals)將成為影響搜尋排名的因素之一，而在今(2021)年6月中開始，這項更新將會正式上線。也就是說，除了在網站中給予優質的內容之外，讓網站訪客有良好的體驗、和愉快的互動，也將是網站經營者需要重視的因素。
新增的網站使用體驗核心指標，分為三個部分：最大內容繪製(Largest Contentful Paint，LCP)、首次輸入延遲(First Input Delay，FID)、累計版面配置轉移(Cumulative Layout Shift，CLS)；這三個要素將會和現有的搜尋排名要素，包含：行動裝置友好性、安全瀏覽、HTTPS 加密和插頁式廣告指南，一起做為Google新的網頁體驗要素。
下面我們就針對新增的三個指標做說明，並告訴你如何提升這些指標。
三項指標介紹
1. 最大內容繪製(Largest Contentful Paint，LCP)
LCP顧名思義，就是計算網頁的可視區域中，最大的內容元素載入所花費的時間，也就是說，這項指標判斷了頁面的主要內容被使用者看到所需的時間，相當網頁給人的第一印象。而Google判斷最大元素的方式為：當頁面載入的過程中，Google會持續去抓取可視範圍中最大的元素，且會隨著內容改變，直到頁面完全載入後，才會將頁面中最大的元素判斷為LCP。
以下是Google開發者網誌給出的LCP範例：
下圖中，LCP隨著頁面載入而持續變換，直到頁面完全載入後才確定LCP為頁面中的圖片。
在下圖中，LCP是搜尋的文字段落(綠色底色)，且在相對早的時間便已載入完畢，在頁面完全載入後，其他的圖片元素也沒改變LCP的判斷
Google衡量LCP的標準為：小於2.5秒為”良好”、2.5秒~4秒為”要加強”、大於4秒為”差”，且至少要讓75%的使用者都有相同的體驗才算過關。
那麼要如何優化LCP呢，Google也提供了以下的指標供大家參考：
- 減少伺服器回應時間
- 排除禁止轉譯的資源
- 加快資源載入時間
- 避免使用客戶端渲染(Client-side rendering)
- 最佳化圖片、CSS、Javascript、字型資源…等
2. 首次輸入延遲(First Input Delay，FID)
FID是計算使用者第一次可以和網頁互動時的延遲時間，也就是使用者試著和網頁互動時(點擊按鈕、填寫表單…等)，網頁是否能馬上回應。
有時瀏覽器可能正在載入一支相當大的檔案，導致頁面上的其他元素不能被載入，而延後了使用者可以互動的時間，此時FID的分數就有可能不佳。
由上述的內容可知FID是衡量網頁的「互動性」，首次的互動延遲能代表使用者對於網頁品質的想法。
Google衡量FID的標準為：小於0.1秒為”良好”、0.1秒~0.3秒為”要加強”、大於0.3秒為”差”，且至少要讓75%的使用者都有相同的體驗才算過關。
那麼要如何優化FID呢，Google也提供了以下的指標供大家參考：
- 降低第三方程式碼的影響 (Reduce the impact of third-party code)
- 減少JavaScript的運作時間 (Reduce JavaScript execution time)
- 減少主執行序的運作量 (Minimize main thread work)
- 降低要求數和檔案大小 (Keep request counts low and transfer sizes small)
3. 累計版面配置轉移(Cumulative Layout Shift，CLS)
CLS是計算網頁元素中，在載入過程中所發生的非預期版面轉移的加總；可想而知，一個頁面內容會到處跳動的網頁，必然會帶給使用者十分不佳的體驗。
也就是說，CLS是衡量網頁的「穩定性」，尤其現在許多網站常會加入許多效果來吸引使用者持續閱讀，但過度的添加效果卻會適得其反，因此網站管理者必須謹慎為之。
針對非預期版面轉移，Google提供了一個十分生動的例子給大家參考：
CLS又是怎麼計算的呢？針對每次的版面轉移，都會有一個配置轉移分數(Layout Shift score，LS)，計算方式為「影響範圍*移動距離 」，例如下圖影響了畫面的75%、元素移動距離則為畫面高度的25%，此次的LS便為0.75*0.25=0.1875
而CLS則是非預期的LS的加總。
Google衡量CLS的標準為：小於0.1為”良好”、0.1~0.25為”要加強”、大於0.25為”差”，且至少要讓75%的使用者都有相同的體驗才算過關。
那麼要如何優化CLS呢，Google也提供了以下的指標供大家參考：
- 為網頁的圖片或影片元素預留空位，或著事先載入這些元素
- 避免在既有的內容上方，插入新的內容 (除非是使用者可控制的)
- 若有版面轉移的可能，可以插入過渡的動畫，保持頁面的連續性
測試/觀看使用體驗核心指標的方式
下面我們也為大家介紹幾個可以觀看核心指標的方式
使用方式非常容易，只要在網址欄位輸入你要測試的網址，工具便會幫你計算出分數，以及可以加強的地方(最佳化建議)
(2) Chrome 開發者工具
若你是使用Chrome瀏覽器，在開發者工具中的「Lighthouse」頁籤，同樣也可以計算出分數和得到最佳化建議
(3) Google Search Console
近期Google Search Console也推出了「網頁體驗」頁籤(下圖一)，其中也會提供你核心指標需要加強的頁面(下圖二)，再搭配上述工具的最佳化建議，幫助管理者更容易加強網站頁面的體驗。
結語
雖然現在常說內容是SEO最重要的因素，但Google也會不時推出演算法更新，以及納入更多影響排名的因素，這次使用體驗指標上線在即，希望上述提供的介紹和優化方式，能幫助各位網站管理者更容易優化自己的網站。