如何讓網頁達成關鍵指標優化加強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的標籤、結構上也必須注意才能達到效果。