現在正是SEO檢視網站核心的好時機!(下)

 SEO檢視網站核心就該趁現在!網站核心指標在五月將成為SEO排名因素!

 

本文為該系列的下篇，上篇（關於 LCP 與 FID 的解釋與實例），請點此連結了解事情始末！

累計版面配置轉移 (CLS)

何謂 CLS?

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

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

網站使用體驗核心指標CLS指標的計算示意圖

CLS的衡量指標

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

造成 CLS 不良的原因

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

可用來檢視 LCP、FID、CLS 的 SEO 工具

目前 Google 官方有推出多種監測 Core web vitals 的輔助工具，大家可以到 Chrome 線上應用程式商店下載以下工具並安裝：

Lighthouse 與 Page Speed Insights

Lighthouse 與 Page Speed Insights 測速工具不只能為網站進行評分，更能提供 SEO 的網站優化項目，為網站的優化提供明確的方向。

Lighthouse 與 Page Speed 都能為網站進行評分

 

Lighthouse 與 Page Speed Insights 都能為網站提出改善建議

Chrome 開發者工具 (Chrome DevTools)

SEO 可透過 Chrome DevTools 來觀看 Core Web Vitals 所參照的指標是在網頁載入的哪個時間點發生，方便 SEO 進行網站優化。

Google Search Console

隨著此次的網站體驗指標更新之後，Google 同時於 GSC (Google Search Console) 站長工具中更新指標，提供Search Console站內所有頁面針對指標的評分，方便 SEO 優化。

相關文章:

SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準

SEO快訊-Google 搜尋可能會更少顯示「精選摘要」

SEM快訊-Google Ads將於四月停用展示型購物廣告

Google 推出搜尋結果新功能！SEO可能會變更複雜⋯⋯

全新的谷歌檢索報告來了!讓SEO完整掌握狀況!

人工智慧向伸展台前進?化身超模擺拍超專業! (上)

Google全新搜尋功能竟讓SEO更複雜了!?

現在正是SEO檢視網站核心的好時機!(上)

 SEO檢視網站核心就該趁現在!網站核心指標在五月將成為SEO排名因素!

 

SEO如何檢視Google網站核心指標 (LCP、FID、CLS)？

Google 去年的11 月在官方宣布同年五月推出的「網站核心指標(LCP、FID、CLS)」，在 2021 年五月將納入 Google  的演算法，正式列為排名因素。所以現在是 SEO 們檢視 Google 網站核心指標 (LCP、FID、CLS)、並且優化網站的使用者體驗 UX 的時機了！

推薦閱讀：SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準

何謂「Google網站核心指標 (LCP、FID、CLS)」？

SEO 們檢視Google 網站核心指標 (LCP、FID、CLS) 是用於衡量網站的載入效率、互動性和頁面穩定性的一組指標。這三個指標都與網站速度相關，長期以來對搜尋引擎及使用者而言是非常重要的。以下是三個 Google 網站核心指標的介紹：

顯示最大內容元素所需時間 (LCP)

何謂LCP?

LCP，Largest Contentful Paint 是「顯示最大內容元素所需時間」，計算網頁可視範圍內最大的內容元件需花多少時間載入。這項指標的意義是：網頁上的主要內容需花多少時間才會被使用者看到，相當於網頁給人的第一印象。

當頁面被載入時，Google 會抓取頁面中最大元素的載入時間作為 LCP，而且 LCP 會隨著載入的內容越來越多而改變，直到頁面完全載入後，最大元素即被確定為「真正的」LCP。

如下圖 TechCrunch 新聞網頁載入的例子中，可以看到前兩張圖的 LCP 是綠色框框裡的新聞標題「E3’s organizer⋯⋯」；在第三～四張圖中，所判定的 LCP 是另一個新聞標題「StockX was hacker,⋯⋯」；然後最後一張圖的 LCP 是標題下方的圖片，在載入完畢後就沒有出現更大的元件。因此本網頁「真正」的 LCP 為載入該圖片所需的時間。

 

LCP 的衡量指標

	Good（速度良好）	Needs improvement（需要改善)	Poor（速度低落)
LCP	<=2.5s	<=4s	>4s

 

LCP 會偵測哪些內容元素？

• 各種格式的圖片，除了 .jpg、.png 等格式外亦包涵 svg 向量圖、影片預覽大圖等
• CSS 中的 url() 函數載入的背景圖元素
• 含有文字的區塊元素或行內元素

如何優化 LCP？

常見的 LCP 優化項目如下：

• 減少網站主機回應時間
  • 針對主機效能優化
  • 引導用戶到最近的 CDN 主機
  • 使用網頁快取
  • 提早載入第三方資源
• 盡量排除禁止轉譯（Render-blocking）的 CSS 與 JavaScript
  • 降低 JavaScript 的阻擋時間
  • 降低 CSS 的阻擋時間
• 加速資源載入時間
  • 圖片大小優化
  • 預先載入重要資源
  • 壓縮文字檔案
  • 根據使用者的網路狀態提供不同資源（adaptive serving）
  • 使用 service worker 來快取內容
• 避免使用前端（用戶端）渲染（CSR）
  • 盡量在後端（伺服器端）完成頁面渲染，讓用戶端取得已渲染好的內容。若必須使用 CSR 的話，建議優化項目如下：
  • 將重要的 JavaScript 最小化
  • 使用網站預渲染（pre-rendering）

首次輸入延遲時間 (FID)

何謂FID?

你是否曾經點入一個網站，雖然有內容顯示，但無論你怎樣與網頁互動，網頁都沒有反應？ Google 針對這樣的情形制定了 First Input Delay （FID，首次輸入延遲時間）這個指標。

FID，First Input Delay 是「首次輸入延遲時間」，計算使用者第一次與網頁互動（例如點擊連結或按鈕、打開式下拉選單、在文字對話框輸入文字等) 時的延遲時間。這項指標代表了網頁的互動與回應程度：在使用者嘗試與網頁互動時，網頁是否能馬上回應。

FID的衡量指標

	Good（速度良好）	Needs improvement（需要改善)	Poor (速度低落)
FID	<=100ms	<=300ms	>300ms

如何優化 FID？

過多的 JavaScript 執行，是造成 FID 延遲的主因：當瀏覽器的主執行緒（main thread）在忙著執行 JavaScript 時，是無法回應大多數的網頁互動。所以 SEO 可以藉著優化 JavaScript 在網頁上的解析、編譯和執行方式將直接減少 FID：

• 分割 long tasks（指執行 JavaScript 時網頁介面無法與用戶互動的期間） 成較小的非同步工作（asynchronous tasks）
• 降低第一、三方的腳本執行與資料截取
• 使用 Ｗeb Ｗorker API，讓 JavaScript 可在背景執行
• 減少 JavaScript 執行時間

本文為該系列的上篇，下篇（關於CLS 的解釋與實例、還有檢測工具 ）連結點此。

相關文章:

SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準

SEO快訊-Google 搜尋可能會更少顯示「精選摘要」

SEM快訊-Google Ads將於四月停用展示型購物廣告

Google 推出搜尋結果新功能！SEO可能會變更複雜⋯⋯

全新的谷歌檢索報告來了!讓SEO完整掌握狀況!

人工智慧向伸展台前進?化身超模擺拍超專業! (上)

Google全新搜尋功能竟讓SEO更複雜了!?

Google使用體驗新變動!SEO準備好了嗎?

 你SEO 準備好了嗎?Google使用體驗標準改變了!

最近國外 SEO 媒體報導， SEO 人員會在 Search Console 的「網站使用體驗核心指標（Core Web Vitals）」報告中，看到更多的網頁被評比為綠色「速度良好」。可是不一定是SEO 做了什麼網站優化的成果，比較可能是因為最近 Google 放寬了網站 「使用體驗核心指標」的標準。

眾所皆知：網頁載入的時間越少，就越能在「使用體驗核心指標」中取得代表「Good」的綠色。根據 Googld 的官法說法，在各項指標中，將以往網站載入時間「少於……秒」才能得到某個顏色的規定，放寬為「在……秒以內」。拿「LCP（最大元素載入速度）」指標來說，以往載入速度必須要少於 2.5 秒（<2.5s），才能拿到綠色「Good」；現在只要載入速度不要超過 2.5 秒（<=2.5s），就能順利取得綠色。修改後的標準，如下表所示：

	Good（速度良好）	Needs improvement（需要改善)	Poor（速度低落)
LCP	<=2.5s	<=4s	>4s
FID	<=100ms	<=300ms	>300ms
CLS	<=0.1	<=0.25	>0.25

Google 表示：「你可能會在指標狀態中看到變化」。那這樣放寬標準，對 SEO 有何影響呢？Google 表示，這將在Search Console網站使用體驗核心指標報告中「變得更好（for the better）」⋯⋯

網站使用體驗核心指標在 Google Search Console 報表上的顯示

網站使用體驗核心指標（LCP、FID、CLS）名詞解釋

LCP最大內容元素載入速度：網頁最大內容的載入時間

從使用者在網址列輸入網址並按下 Enter  鍵開始，到螢幕畫面（viewport）中完全載入最大內容（元素）的所需時間。而所謂的「最大內容元素」，通常是圖片、影片（預覽大圖），或是大型的帶有文字的區塊元素（block-level elements）或行內元素（inline elements）等。

LCP（Largest Contentful Paint） 是一個重要的指標。因爲通常網頁中最大的內容（元素），有可能會是該網頁中的重要內容。LCP 就代表使用者瀏覽這個網頁時，要花多久時間才會看到重要的內容。

FID 首次輸入延遲/時間：網頁花多久時間才回應你的互動

你是否曾進入過一個網站，雖然有顯示內容，但是你無論怎麼與那網頁互動（如按按鈕、點連結等），網頁都不回應的經驗？因此 Google 為這樣的狀況設了「FID (First Input Delay) 」的指標。

FID 是計算使用者首次與網頁互動（點擊連結或按鈕、點開下拉選單、填表格、跳出視窗等）時，到網頁回應該互動的所需時間。這項指標代表網頁的回應性，在使用者嘗試與網頁互動時是否能馬上回應。

CLS 累計版面配置轉移：畫面是否穩定

你是否曾經進入一個網站，突然跳出來的廣告將你正在看的內容移位，導致你不小心點了該廣告？ Google 就為這樣的狀況設了「CLS (Cumulative Layout Shift)  」的指標。

因為網頁上各物件的載入時間不一，導致網站的內容會跳來跳去、不斷移位，造成使用者閱讀上的不便。像是痞客邦所架的部落格，幾乎都有這樣的問題。

CLS 的評分範圍是 0-1，0 代表網站無移位的狀況，1 是移位最嚴重的狀況。這個分數的計算公式是元件 影響範圍乘以移動距離。以下圖為例，元件從移位前到移位後的影響的範圍佔了整個可視範圍 (viewport) 的 75%，元件的移動距離為整的可視範圍高度的 25%，因此這次移位的分數為 0.75*0.25=0.1875。

網站使用體驗核心指標CLS指標的計算示意圖

「使用體驗核心指標」為影響 SEO 的排名因素之一

隨著今年五月 Google 即將推行的網頁體驗訊號（Page Experience）更新，SEO 都卯足全力，希望讓自己的網頁能在此次的更新上呈現綠色。雖然不確定（此三大網站使用體驗核心指標）所佔的因素有多大，但是即使佔的因素很小，對你的網站進行這些使用者體驗優化的步驟，也可以使用戶更滿意、提高網站的轉換率與 SEO 排名。

相關文章:

狗狗是人工智慧的最佳教練！Google AI機器人學狗左轉右彎還能小跑

2020年度十大Python函式庫-人工智慧 · 機器學習必備

SEO是什麼?跟PPC關鍵字廣告差在哪?如何自學?

終極版 AlphaGo！DeepMind 最新人工智慧「MuZero」能下棋、玩遊戲、壓縮影片

全新的谷歌檢索報告來了!讓SEO完整掌握狀況!

人工智慧向伸展台前進?化身超模擺拍超專業! (上)

Python課程助你進入全球百大企業!