娶了小老婆Aprilia的Python工程師: 網站核心指標5月將成SEO排名因素(下)

網站核心指標5月將成SEO排名因素(下)

SEO排名因素於5月將成網站核心指標,快來看看(下)

累計版面配置轉移 (CLS)

CLS

何謂 CLS?

你是否曾使用手機進入痞客邦部落格，部落格雖已出現主要內容，但你正要開始閱讀內容時，網頁上又突然跳進某個廣告圖文，將你正要看的內容往下擠？這種被插隊的感覺，想必帶給你不良的使用者體驗（UX）！Google 針對這樣的情形制定了 Cumulative Layout Shift （CLS，累計版面配置轉移）這個指標。

CLS，Cumulative Layout Shift 是「累計版面配置轉移」，計算網頁載入時，已經出現的圖會是否會因某個元件突然載入就被往下擠。CLS 的計算方式為：影響範圍（佔可視範圍的百分比）*移動距離 = 元件移位分數，例如你有 75% 的文字內容被插入的元件下移了 25%，那就是「0.75*0.25=0.1875」(如下圖所示)。

CLS的衡量指標

	Good（速度良好）	Needs improvement（需要改善)	Poor (速度低落)
CLS	<=0.1	<=0.25	>0.25

造成 CLS 不良的原因

圖片、影片沒有指定尺寸（沒下 width、height 尺寸）
廣告、嵌入元素、iframe 沒有指定尺寸（沒下 width、height 尺寸）
突然插入在主內容之上的動態內容（如訂閱電子報、安裝 APP 等行動呼籲或相關文章列表等區塊突然出現在主內容之上，如以下影片所示）:
- SEO 能做的優化方法：
  - 若真的要在網頁上安插這些動態內容的話，就先在網頁上預留該內容的區塊，如此一來，等到動態內容「跳」進來時，就不會讓將已載入的內容往其他地方「推」動。
網頁加載字體太慢，導致字跑不出來、或是瀏覽器先套用其他字體替代，到正確的字體載入時，文字會出現閃爍一下的狀況
- SEO 能做的優化方法：
  - 在主要的 Web 字體上加上 HTML 標記 <link rel=preload>：這樣的做法就是告訴瀏覽器要提前將字型載入，讓正確的字體能在第一時間出現、更不會有「閃一下」的狀況。
  - 使用 HTML 標記 <font-display: swap;>：告訴瀏覽器要用替代字型，等真正的字型下載完畢再換上！
  - 把字型存在本地端（self-hosted fonts），就是把字型下載下來後直接放在自己的網站，就可省去連到別的網站存取的時間、再來是假設使用者曾經造訪過使用相同字型的網站，而瀏覽器快取了這個字型，這樣的話就能更加速字型存取。