網站核心指標搞定好,SEO變得好簡單!(下)

原來要搞定SEO其實不難,前提是要知道網站核心指標有哪些!(下)

目錄

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

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

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

3-1 何謂LCP?

3-2 LCP 的衡量指標

3-3 LCP 會偵測哪些內容元素?

3-4 如何優化 LCP?

4. 首次輸入延遲時間 (FID)

4-1 何謂FID?

4-2 FID的衡量指標

4-3 如何優化 FID?

5. 累計版面配置轉移 (CLS)

5-1 何謂 CLS?

5-2 CLS的衡量指標

5-3 造成 CLS 不良的原因

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

6-1 Lighthouse 與 Page Speed Insights

6-2 Chrome 開發者工具 (Chrome DevTools)

6-3 Google Search Console

 

本文為該系列的下篇,上篇(關於 LCP 與 FID 的解釋與實例)請點此連結

累計版面配置轉移 (CLS)

CLS-1.jpg

何謂 CLS?

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

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

CLS-560x420-2.png

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

CLS的衡量指標

CLS-3.JPG

造成 CLS 不良的原因

圖片、影片沒有指定尺寸(沒下 width、height 尺寸)

廣告、嵌入元素、iframe 沒有指定尺寸(沒下 width、height 尺寸)

突然插入在主內容之上的動態內容(如訂閱電子報、安裝 APP 等行動呼籲或相關文章列表等區塊突然出現在主內容之上,如以下影片所示):


 

SEO 能做的優化方法:

如果真的要在網頁上安插這些動態內容的話,就先在網頁上預留該內容的區塊,如此一來,等到動態內容「跳」進來時,就不會讓將已載入的內容往其他地方「推」動。

網頁加載字體太慢,導致字跑不出來、或是瀏覽器先套用其他字體替代,到正確的字體載入時,文字會出現閃爍一下的狀況

SEO 能做的優化方法:

在主要的 Web 字體上加上 HTML 標記 <link rel=preload>:這樣的做法就是告訴瀏覽器要提前將字型載入,讓正確的字體能在第一時間出現、更不會有「閃一下」的狀況。

使用 HTML 標記 <font-display: swap;>:告訴瀏覽器要用替代字型,等真正的字型下載完畢再換上!

把字型存在本地端(self-hosted fonts),就是把字型下載下來後直接放在自己的網站,就可以省去連到別的網站存取的時間、再來是假設使用者曾經造訪過使用相同字型的網站,而瀏覽器快取了這個字型,這樣的話就能更加速字型存取。

 

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

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

core-web-vitals-tool-4.png

 

Lighthouse 與 Page Speed Insights

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

螢幕快照-2021-03-16-下午7.54.34-e1615899992283-5.png

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

 

Page-speed-insights-e1615901963342-6.png

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

 

Chrome 開發者工具 (Chrome DevTools)

 

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

 

Google Search Console

GSC-Web-core-metrics-e1615901917803-7.png

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

 

 

 

 

 


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


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


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


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


是哪十個Python函式庫榮登2020年最好用?(一)


蛋白質折疊背後的秘密竟被人工智慧輕易破解?!(上)


Waymo槓上特斯拉,搶爭自駕行業第一把交椅!!(下)

arrow
arrow

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()