SEO排名因素將把網站核心指標也加進來了~(下)

-

本文為該系列的下篇，上篇（關於 LCP 與 FID 的解釋與實例）請點此連結。

 



SEO中的網站核心指標可還沒講完,讓我們繼續學習!

累計版面配置轉移 (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 能做的優化方法：
      • 在主要的 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 都能為網站進行評分

 

Page-speed-insights-e1615901963342.png

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

Chrome 開發者工具 (Chrome DevTools)

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

Google Search Console



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

 

 

延伸閱讀：

要讓SEO的效果升級,絕不能錯過谷哥推出的新功能!

玩Google的SEO你必須知道的事(下)"精選摘要"的改變

Google新的網站管理員有什麼新功能?SEO也能受益嗎?

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

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

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

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

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d
閱讀完整內容