Core Web Vitals（網站核心網頁指標）是Google的一項舉措，旨在幫助網站站長改善使用者體驗和網站質量。這些評估指標對於任何網站的成功都是至關重要的。
在本教程中，我們將向您展示如何針對WordPress優化Google提出的網站核心網頁指標。
什麼是Google Core Web Vitals？
Google Core Web Vitals是Google認為對網站的整體使用者體驗很重要的一組網站效能指標。這些網路生命力得分將成為Google整體頁面體驗得分的一部分，這將影響您的SEO排名。
事實是，沒有人喜歡載入速度緩慢的網站，包括Google。
即使您的網站載入速度很快，使用者執行其想做的事情或訪問所需資訊也可能無法完全發揮作用。
這就是Web Vitals可以幫助您評估的內容。您的網站載入，顯示併為使用者準備就緒的速度有多快？
為此，Google使用了三個質量測試（Web Vitals）。
- Largest Contentful Paint（LCP）：衡量載入體驗，為了提供良好的使用者體驗， LCP 應該在頁面首次開始載入後的 2.5 秒內發生。
- First Input Delay（FID）：衡量可互動性，為了提供良好的使用者體驗，頁面的 FID 應當小於 100毫秒。
- Cumulative Layout Shift（CLS）：衡量視覺穩定性，為了提供良好的使用者體驗，頁面的CLS應保持小於 0.1。
這些測試的名稱聽起來可能太技術性了，但它們的操作卻很容易理解。
讓我們看看每個Web Vitals測試的工作原理，測量標準以及如何提高得分。
Largest Contentful Paint – LCP
Largest Contentful Paint 或LCP查詢主要內容（無論是影象，文章還是描述）對使用者可見的速度。
例如，您的網站載入速度可能很快，但是最大的內容可能不會像頁面其餘部分一樣快地出現在螢幕上。
其他網站速度測試工具可能評估您的網站並給出高分，但是從使用者的角度來看，頁面仍然很慢。
這就是Google將LCP視為其核心網頁指標的一部分的原因，因此網站所有者可以更清楚地瞭解。
First Input Delay (FID)
First Input Delay（FID）衡量使用者的瀏覽器實際能夠開始響應於使用者的互動處理事件處理程式所花費的時間。
用簡單的英語來說，假設使用者在您的聯絡表單頁面上。他們填寫表格，然後單擊“提交”按鈕。FID將衡量您的網站處理該互動的速度。
一個更簡單的示例是從使用者單擊連結到瀏覽器開始處理下一個事件序列的時間。
Cumulative Layout Shift (CLS)
Cumulative Layout Shift（CLS）衡量網站視覺穩定所需的時間。
網站載入時，某些元素要比其他元素花費更多的時間。在此期間，您網站的內容可能會在螢幕上不斷移動。
例如，如果使用者正在閱讀移動裝置上的一段文字，並且在其上方嵌入了一段視訊，這會使整個內容向下移動。如果使用者試圖完成某項操作（例如，將產品新增到購物車中，但由於頁面上其他專案移動導致按鈕向下移動），則可能會感到非常沮喪。
如何測試網頁核心指標評分
測試您的網站並獲得Google Core Web Vitals分數最簡單的方法是使用Page Speed Insights工具（需要梯子，此前我們也專門撰寫了一篇關於“如何獲得PageSpeed Insights滿分”的文章）。只需輸入您要測試的URL，然後單擊“分析”按鈕。
核心網頁指標顯示在標題為“Field Data”的部分下。
為簡化起見，您將在頂部看到一條訊息，內容為 ‘[…] field data shows that this page passes the Core Web Vitals assessment’。
在下面的圖表中，您可以檢視所有三個核心要素的實際得分。這是您需要通過每項核心頁面指標測試的分數。
- 最大內容渲染（LCP）– 2.5秒
- 首次輸入延遲（FID）–少於100毫秒
- 累積佈局偏移（CLS）–小於0.1
如何檢視網站網頁核心指標明細？
現在，Page Speed Insights工具可讓您檢查單個頁面。如果您要檢查的頁面是域名的根，那麼您也可以單擊“Show Origin Summary”覈取方塊。
這將向您顯示此來源提供的所有頁面的得分。
但是，要深入瞭解，您還可以在Google Search Console儀表盤中訪問Core Web Vitals報告。
這樣，您可以檢視您的網站上有多少URL通過了測試，哪些URL需要改進以及哪些頁面的得分較低。
要獲取有關Web Vitals的更詳細的報告，可以通過轉到Web.dev Measure工具或通過使用Google Chrome瀏覽器中的內建測試來使用燈塔速度測試。
只需在Chrome中開啟一個網站，右鍵單擊螢幕上的任意位置，然後選擇“檢查”選項即可。在選項卡中，您將看到一個名為Lighthouse的選項。
之後，單擊“Generate Report”按鈕。
注意：您必須在隱身模式下進行Chrome測試才能獲得最準確的結果。否則，您的瀏覽器擴充套件程式可能會對顯示的網頁核心指標評分產生負面影響。
為什麼網頁核心指標如此重要？
網頁核心指標至關重要，因為它們反映了您的網站對使用者的表現。它不僅關注網站的更快載入，還關注使用者實際使用它的速度。
根據最近的一項研究，頁面載入時間延遲1秒會導致轉換損失7％，頁面瀏覽量減少11％以及客戶滿意度下降16％。
因此，優化網站的速度和效能至關重要。但是，大多數效能評估工具並沒有真正考慮使用者體驗的質量。
一個速度更快，使用者體驗不佳的網站仍然會花費您大量的轉換，更少的頁面瀏覽量以及糟糕的客戶滿意度。改善核心網頁指標可以幫助您解決這一問題。
使用者體驗也是SEO排名的重要因素。谷歌已經宣佈，從2021年5月開始，搜尋演算法更新將把頁面體驗作為排名因素之一。
下面，讓我們看看如何改善核心網頁指標，以在網站上提供更好的使用者體驗。
如何改善WordPress網站頁面核心指標
提高您的WordPress網站的頁面核心指標分數並不困難。使用一些基本的效能優化技巧，您可以輕鬆獲取較高的頁面核心指標評分。
1.選擇優秀WordPress網站伺服器提供商
您的WordPress網站託管公司在您網站的效能中起著最重要的作用。
他們能夠針對WordPress優化伺服器，這為您的網站提供了堅實的平臺。
如果你的WordPress網站面向國外使用者，我們建議選用SiteGround作為網站伺服器。它們是官方推薦的WordPress託管公司之一，國外許多知名部落格也是選用SiteGround的伺服器。
為了使您的網站獲得所需的效能提升，SiteGround將Google Cloud Platform與PHP一起用於其伺服器。
他們的SG Optimizer外掛已被超過一百萬個網站使用。它會自動進行進一步的效能增強，並開啟內建的快取，該快取可以完成WP Rocket所做的所有工作。
需要特別注意的是，他們的SG Optimizer外掛僅適用於SiteGround託管帳戶，並且這些效能優化可用於所有計劃，包括最低選項。
如果您使用的是其他WordPress託管服務提供商，那麼我們建議使用WP Rocket以及其他一些工具來獲得更好的網頁核心指標評分。
WP Rocket是市場上最好的WordPress快取外掛。它使您可以輕鬆地在WordPress網站上設定快取，而無需討論伺服器管理的任何技術細節。
除了伺服器託管商SiteGround以外，國外的Linode或者Vultr也是我們強烈推薦的伺服器託管商；國內我們則首推阿里雲、騰訊雲等國內頂級雲伺服器託管商。
2.提高最大內容渲染（LCP）分數
如前所述，最大內容渲染（LCP）實際上是頁面視口中最大的內容部分。例如，在部落格文章上，這可以是精選圖片或文章文字。
內容載入得越快，您的LCP得分就越高。
您怎麼知道測試認為哪個內容最大？好吧，您需要向下滾動到測試結果並展開“Largest Contentful Paint element”選項卡。
您將看到LCP分數考慮的要素。如果影象較大，則可以嘗試將其替換為較小的影象或檔案大小和質量較低的影象。請參閱我們前面寫的教程，瞭解如何優化影象以提高網路效能。
如果是文字，則可以嘗試將其分為段落和標題。
3.改善首次輸入延遲（FID）分數
“首次輸入延遲”得分用於衡量使用者單擊您網站上的內容與他們的瀏覽器開始處理元素之間的時間。
最重要的改進建議是使用更好的網路託管平臺。
提高FID分數的另一種簡單方法是使用快取外掛，例如WP Rocket。它帶有一個內建功能，可讓您優化檔案傳送。
首先，您需要安裝並啟用WP Rocket外掛。
之後，轉到“設定”»“ WP Rocket”頁面，然後切換到“File Optimization”選項卡。
向下滾動到頁面底部，然後選中“Load JavaScript deferred（延時載入JS）”選項旁邊的框。
不要忘記單擊“Save Changes”按鈕以保證更改生效。
延遲JavaScript允許您載入網站，而無需等待JavaScript載入。這可以提高可能是JavaScript導致頁面的“第一輸入延遲（FID）”分數。
4.提高累積佈局偏移（CLS）分數
當網頁上的不同元素緩慢載入並使螢幕上的其他元素移動時，累積佈局偏移（CLS）分數會受到影響。
您可以通過展開Page Speed Insights結果中的“避免大的佈局變化”標籤來檢視哪些元素在影響CLS得分。
這將向您顯示在頁面載入期間引起最大布局偏移影響的元素。
為了確保頁面的視覺佈局不會隨著其他專案的載入而移動，您需要向瀏覽器告知元素（例如影象，視訊嵌入，廣告（例如Google AdSense）等）的尺寸（寬度和高度）。
WordPress會自動為您新增的影象新增高度和寬度屬性。但是，您仍然可以檢查所有其他媒體，特別是嵌入媒體，以確保所有媒體都具有height和width屬性。
一種方法是使用檢查工具。只需右鍵單擊瀏覽器，然後選擇“檢查”以開啟開發人員控制檯。
然後，您可以指向並單擊不同的頁面元素以突出顯示其原始碼。在那裡，您可以檢視元素是否已定義width和height屬性。
5.消除渲染阻塞元素
渲染阻塞元素是載入速度較慢但正在阻止其他元素首先載入的元素。這會影響您的整體Web Vitals分數和網站上的使用者體驗。
Page Speed Insights結果將向您顯示渲染阻止元素。這些通常是由WordPress外掛，第三方工具（例如Google Analytics（分析），Facebook Pixel，Google Ads等）新增的JavaScript或CSS檔案。
但是，大多數此類元素是通過不同的外掛或主題以程式設計方式新增到您的網站的。這使初學者更難刪除或正確載入它們。
在這一塊，建議閱讀我們的詳細教程“如何移除阻塞渲染的JavaScript和CSS”。
6.在WordPress中適當調整圖片大小
降低頁面核心指標分數的另一個常見原因是影象非常大。許多WordPress站長將超高解析度影象上傳到他們的網站，這需要花費更長的時間來載入，並且在大多數情況下是沒有必要的。
對於移動裝置上的使用者來說，這甚至變得更加成問題。您的自適應WordPress主題和WordPress將自動使影象適合使用者的移動螢幕，但它們仍將載入更大的檔案。
你應該深入瞭解在不損失質量或影響效能的情況下，如何為您的WordPress網站正確優化影象及採用懶載入影象。
7.使用CDN伺服器提高頁面核心指標分數
CDN或內容分發網路是第三方服務，使您可以從全球的多臺伺服器提供網站的靜態內容。
這使使用者可以從距離最近的伺服器上下載那些靜態檔案，例如影象和CSS。它還可以減少您網站上的負載，然後可以繼續載入其他元素。
國外網站可以考慮使用帶有內建CDN服務的Sucuri之類的雲防火牆應用程式。Sucuri還可以幫助您阻止惡意和垃圾郵件請求，從而進一步釋放您的網站資源。
又或者使用免費的Cloudflare CDN作為替代。它帶有基本的防火牆保護和CDN服務，可提高您網站的網頁核心指標得分。
當然，國內網站則可選的CDN提供商就更加多了，比如阿里雲、騰訊雲、華為雲、又拍雲和七牛雲都提供CDN加速服務。
我們希望本教程能幫助您深入瞭解如何優化WordPress的頁面核心指標，為網站提供良好的使用者體驗及獲得更好的搜尋引擎排名。
評論留言