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

-

 

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

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

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

 

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

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 的解釋與實例、還有檢測工具）請點此連結。

 

延伸閱讀：

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
閱讀完整內容