如何讓網頁達成關鍵指標優化加強SEO

2020年5月左右Google提出了關鍵指標，並且指出未來Google自然排序很可能會因網頁關鍵指標是否有最佳化來決定，同時也影響了SEO。

三項指標
Largest Contentful Paint (LCP)
顯示最大內容繪製-何時渲染最大元素。為了提供良好的用戶體驗，LCP應該在頁面首次開始加載後的2.5秒內發生。

First Input Delay (FID)
首次輸入延遲-測量交互性。為了提供良好的用戶體驗，頁面的FID應當小於100毫秒。例如點擊按鈕時，網頁應該很迅速地就做出回應

Cumulative Layout Shift (CLS)
累計版面配置轉移-衡量視覺穩定性。為了提供良好的用戶體驗，頁面的CLS應保持小於0.1。加載緩慢或圖像、影片造成的版面偏移量

當指標出來後我們進行了一些測試與研究，由於不少影響CLS時也影響LCP，以下以優化項目為主，附帶說明可以讓那些指標更好。

一、減少不必要的js檔案、第三方代碼、使用延後載入
Javascript在網頁渲染過程中會造成網頁載入時遲緩，有些甚至必須讀取完Javascript後網頁才會出現，減少不必要的js，並且延後載入等都可加快網頁渲染速度，此項可提高TBT (Total Blocking Time)，也能讓LCP變快。

二、CSS減少、壓縮、濃縮為同一支檔案
越多CSS檔案連線數也越高，如果是使Framework常會直接載入最完整的css，但同時也涵蓋了許多用不到的語法，理想情況是每一個網頁應只載入有使用到的一支css，將可讓網頁擁有較佳速度，但如果無法的話也必須盡量精簡並壓縮

三、圖片應加入寬高與預留版面位置
圖片未載入時區塊沒有被撐開，載入後區塊撐開跑版會造成CLS數值過高，建議在網頁載入時就要預留好所有圖片的位置，加入寬高可以先知道圖片比例。

四、使用適合的圖片大小與檔案規格，svg不一定最好
別載入過大或不在畫面上出現的圖片(例如手機版才出現的圖，電腦版沒出現但有載入)
太複雜的圖不適合做SVG，反而會讓svg檔案偏大，造成載入時速度不夠快

五、字型載入
如果有外連字型需要使用預先載入字型，避免網頁一開始出現時字型沒有出現，讀入後字型不同造成版面位移，
字型css同時要@font-face 加入 font-display: swap;

六、輕量化輪播功能
大部分的輪播套件都有javascript，但javascript容易讓網頁變慢，改使用純css輪播機制讓javascript更少。

七、lazyload
在視窗還沒捲動前尚未出現的圖片應使用lazyload延後載入，避免網頁全頁圖片全部載入後再出現，造成時間過久

八、避免使用會偏移版面位置的動畫
例如往下捲動時區塊飛入在固定於某一塊，或是往下捲動時有區塊變形或浮起，容易造成版面偏移，CLS分數不佳

以上是目前知道有效可讓關鍵指標提升的方式，看起來似乎不難，但這當中還有牽扯到關於網頁渲染的方式，在HTML的標籤、結構上也必須注意才能達到效果。