數位行銷的成功與否不只取決於網站的內容和設計，更在於使用者體驗的品質。其中，Core Web Vitals成為了網站優化的重要指標之一。
Raymond (SEO Specialist) 將在這篇文章深入探討Core Web Vitals的概念、對於SEO的重要性以及如何優化。
Core Web Vitals是什麼？
網站使用體驗核心指標（Core Web Vitals）是一組由Google於2020年推出用於衡量網頁的速度、互動性和視覺穩定性的指標，這些指標分別為：Largest Contentful Paint (LCP), First Input Delay (FID) （將被INP (Interaction to Next Paint) 取代）, Cumulative Layout Shift (CLS) 。
| 項目 | 內容 |
| 最大內容繪製（LCP） | 網頁上最大的可見元素呈現在畫面中的時間 |
| 累計版面配置位移（CLS） | 網頁上元素的穩定性 |
| 首次輸入延遲時間（FID） | 使用者首次與網頁互動（如：點擊）到瀏覽器實際響應該互動的時間 |
| 下個繪製互動時間（INP） | 網頁載入後，使用者和網頁之間的互動時間 |
最大內容繪製（LCP）
最大內容繪製（LCP, Largest Contentful Paint）是用於衡量網頁上最大的可見元素呈現在畫面中的時間。LCP 是用來評估網頁載入效能的指標，可以說是網站載入速度的變種，Google 建議LCP 維持在2.5秒內。
簡而言之，當我們開啟瀏覽器並瀏覽網頁時，從前往網址開始等待網頁的畫面載入開始計算，直至最主要內容完全呈現（可以是圖片、影片或文字，以「最大」尺寸作準）。這段時間的耗時就被稱為最大內容繪製（LCP，Largest Contentful Paint）。
以上述Instagram為例，一開始出現的灰色Instagram Logo及最上方的文字是屬於「首次顯示內容繪製 (FCP)」，也就是網頁最先顯示的元素部份；而接下來顯示的Instagram 文字佔據版面最大部份，則屬於最大內容繪製（LCP，Largest Contentful Paint）。
累計版面配置位移（CLS）
累計版面配置位移（CLS, Cumulative Layout Shift）是用於衡量網頁上元素的穩定性；網頁由各種大小不一的區塊組成，而頁面在載入的過程中，所有區塊發生位移的分數總和。
當版面發生偏移時，Google 會為每個偏移區塊指派一個位移分數，所有分數的總和即為 CLS，累計版面位移的分數越高，表示頁面的位移狀況越嚴重，畫面的穩定性也越低。Google 建議頁面的CLS應該低於0.1。
簡而言之，當我們瀏覽網頁時，原先閱讀或互動的部份產生移動的程度，就被稱為累計版面配置位移（CLS, Cumulative Layout Shift）。
上述例子為例，網絡購物下單時，打算再修改數量，卻不知為何突然彈出個下載APP的廣告，原本的按鈕位置移動，因此不小心按錯下單按鈕了，真是讓人感到困擾！
首次輸入延遲時間（FID）
首次輸入延遲時間（FID, First Input Delay）用於衝量使用者首次與網頁互動（如：點擊）到瀏覽器實際響應該互動的時間。Google 建議FID應低於100 毫秒。
簡單來講，網頁上通常會有按鈕或互動的功能（例如：下拉式選單、點擊按鈕等），當用戶第一次與頁面進行互動到瀏覽器成功回應給用戶的時間，稱為首次輸入延遲（FID，First Input Delay）。
更新：Google 宣布INP將於 2024 年 3 月取代 FID，成為 Core Web Vitals 的一部分。
下個繪製互動時間（INP）
下個繪製互動時間（INP, Interaction to Next Paint）用來監測網頁載入後，使用者和網頁之間的互動時間。所有的點擊和按鍵行為都將觸發網頁的互動，而Google則會將「最長互動時間」視為該網頁的互動時間（INP）。
INP與FID不同在於，FID只計算用戶在頁面上的「首次」互動時間，INP則會計算所有互動並選取最長互動時間。Google建議網頁的INP低於0.2秒。
大家可以參考這個例子，左面的用戶點擊好幾次之後才回應並顯示答案，這是很差的的用戶體驗；而右面的用戶點擊後立即回應並顯示答案。
Core Web Vitals對SEO重要嗎？
Core Web Vitals對SEO重要，因為網站使用體驗核心指標（Core Web Vitals）是 Google 的「Page Experience網頁體驗」評分因素的一部份，也是搜尋引擎優化（SEO）的重要排名因素，改進Core Web Vitals可以使網站提供更好的用戶體驗並在搜尋結果中獲得更高排名。
如何檢測網站使用體驗核心指標？
要檢測Core Web Vitals，可使用Google 官方推薦檢查的工具，包括：Pagespeed Insight、Lighthouse、Google Search Console、Chrome UX Report (CrUX)、Chrome DevTools Performance panel及web.dev 擴充元件等，以下以Raymond推薦的3項常見工具做示範：
Pagespeed Insight
PageSpeed Insight是一項由Google提供的網頁性能評估工具，旨在協助網站開發者和網站擁有者優化其網站，提升用戶體驗。這個工具透過分析網站的載入速度和性能，提供了實用且具體的建議，以確保網站在不同設備和網路環境下都能夠迅速載入，並提供優質的使用者體驗。
PageSpeed Insight的操作非常簡單，只需輸入網站的URL，工具就會立即開始評估並生成一份報告。報告涵蓋了多個性能指標，其中包括網頁的載入時間、交互元素的時間、以及其他關鍵的網頁載入指標。這些指標有助於了解網站的性能優勢和不足之處。
工具不但提供了評估結果，還提供了針對改進的具體建議。這些建議可能包括優化圖片大小、簡化代碼結構、啟用瀏覽器快取等，旨在幫助用戶優化其網站以提升性能。
Google Search Console
Google Search Console是一項由Google提供的免費網站管理工具，能協助網站擁有者監控和管理其在Google搜尋引擎中的表現。
使用Google Search Console的過程非常簡單，先驗證網站的所有權，然後等一段時間，即可獲得各種有關網站在Google搜尋中的重要數據。
其中一個功能是通告網站擁有者其網站是否有潛在的技術問題，包括Core Web Vitals方面的數據，可在「體驗」→「網站使用體驗核心指標」中查看，其資料來源是從網頁瀏覽者真實的瀏覽數據（Chrome UX Report）中獲得。
Lighthouse
Lighthouse 是一項由 Google 提供的開源工具，主要用於評估網頁的性能、可靠性和可訪問性。它被廣泛應用於網站開發和網頁優化領域，為開發者提供了全面的性能分析，有助於改進網站的品質和用戶體驗。
這個工具的操作簡單明瞭，用戶只需在瀏覽器中安裝 Lighthouse Chrome插件，然後輸入網站的URL即可開始評估。Lighthouse 會自動運行一系列測試，包括網站速度、穩定性等方面，然後生成一份詳細的報告。
Lighthouse 的報告包括了各種關鍵指標，例如：頁面載入時間、視覺穩定性、網頁結構、SEO 建議等。
如何優化Core Web Vitals？
優化Core Web Vitals是提升網站性能和使用者體驗的關鍵，優化方向主要是從網站載入速度、CSS及JS元素入手。以下是一些涵蓋 (LCP)、(FID)、(INP) 和 (CLS)這四個主要指標的建議。
優化最大內容繪製（LCP）
最大內容繪製（LCP）優化的核心方向在於網站載入速度，網頁載入過程中，瀏覽器會向伺服器端發送存取網頁原始碼及檔案的請求，優化LCP可以從5個方面入手：圖片優化、資源壓縮合併、瀏覽器快取、快取插件或工具、伺服器性能。
1. 圖片優化：
- 使用適當的圖片格式，如：JPEG或WebP。
- 裁截並壓縮圖片到需要的大小，減少下載時間。
2. 壓縮及合併CSS或JavaScript資源：
- 壓縮CSS和JavaScript文件，縮短下載時間
- 合併CSS和JavaScript檔案，減少對伺服器的請求次數。
3. 瀏覽器快取：
- 利用適當的快取標頭，允許瀏覽器快取靜態資源。
4. 快取插件或工具：
- WordPress等CMS可使用Cache工具或插件配合使用。
5. 伺服器性能：
- 選擇速度更快，性能更高的伺服器
- 使用CDN（內容傳遞網路）以加速全球內容傳送。
優化首次輸入延遲時間（FID）或下個繪製互動時間（INP）
首次輸入延遲時間（FID）或下個繪製互動時間（INP）過慢的主要因素可能為相關JavaScript 檔案過大，JS 程式碼執行速度太慢，因此可以從JavaScript 檔案優化入手。
1. 減少JavaScript執行時間：
- 移除不必要的JavaScript程式碼。
- 使用延遲載入（defer）或異步載入（async）腳本，以避免減緩頁面載入速度。
2. 延遲載入非必要的腳本：
- 將非必要的腳本延遲載入，特別是在頁面初始載入完成後。
- 只在需要時載入或初始化特定功能。
優化累計版面配置位移（CLS）
累計版面配置位移（CLS）可能因素在於空間不足或部份元素載入過慢，可以通過避免插入動態廣告或彈窗影響頁面佈局穩定性、預留空間和異步載入的方式實現、最小化非必要腳本的執行時間，使用適當的載入時機，可有效減少CLS的發生。
1.預留圖片和媒體的空間：
- 使用CSS屬性`aspect-ratio`來確保圖片和媒體元素的適當空間。
- 避免在頁面載入後再動態加載廣告或其他內容。
2. 對任何媒體設定大小屬性尺寸：
- 設定多媒體（圖片、影片等）固定的大小屬性尺寸，用戶的瀏覽器就可以準確地知道該元素將在該頁面上佔用多少空間。並且不會在頁面完全加載時更改。
3.避免廣告或彈出式視窗的干擾：
- 確保廣告元素在載入時有固定的空間，以防止頁面布局的不穩定。
- 預留空間，避免廣告載入導致元素的大幅度移動。
常見問題FAQ
問：我網站的網站使用體驗核心指標分數不理想，讀了相關文章仍感困惑，不知道要如何優化？
答：改善體驗指標分數通常需要涉及網站程式碼的調整，因此優化的責任主要落在網站工程師身上。您可向網站工程師請求幫助。
問：一個網站包含眾多頁面，是否每一頁都需要進行檢測？
答：儘管每頁的檢測結果基本上都不相同，但網站通常都是以同一模板製作而成，其中的大多數頁面都存在相似之處，差異主要在於內容。因此，建議挑選主要的頁面（首頁、內文等）進行檢測即可。
問：網站使用WordPress，能否進行優化？
答：WordPress是很常見的網站CMS。使用WordPress也是能進行優化的。通常可以從圖片、外掛插件、佈景主題的使用入手優化；可配合一些Cache插件或工具，例如：WP Rocket、Nitropack等。
結論：Core Web Vitals的優化不只是提升搜尋排名的手段，更是提高用戶體驗的方式
透過理解這些指標的影響，並運用相應的優化策略和工具，我們能夠為使用者提供更舒服、更穩定的網頁體驗，同時在搜尋排名中脫穎而出。
