Core Web Vitals - 它們是什麼以及如何改進它們？

谷歌在 2020 年推出了一項名為 Web Vitals 的新計劃。 這是指提供質量信號指導的技術。 據谷歌稱，這些指標對於在網絡上提供出色的用戶體驗至關重要。 2021 年 5 月，谷歌開始使用 Core Web Vitals 作為其平台上搜索排名的指標。

什麼是核心網絡生命力？

Core Web Vitals 是衡量網站用戶體驗的指標。 他們衡量用戶與網站交互的速度以及他們根據搜索獲得的結果。 Core Web Vitals 用作評估網站訪問者瀏覽網站的難易程度和無縫程度的信號。

當您改進您的網站和用戶體驗時，您的頁面體驗將使用 Core Web Vitals 的指標得分更高。 Google 確定了網站所有者必須了解和納入的三個核心 Web Vitals 指標。 這些列舉如下：

加載：也稱為最大內容繪製 (LCP)，加載測量最大元素在站點上加載和顯示的速度。 這些元素包括動畫、視頻、文本、圖像等。

交互性：Google 將此稱為累積佈局轉換 (CLS)，它確保網站上的頁面沒有任何意外功能或令人困惑的動作，可能會在使用您網站的內容時分散或打擾用戶。

視覺穩定性：這在技術上稱為首次輸入延遲 (FID)，它反映了網站訪問者首次與其交互時網站頁面的響應水平。 FID 還測量瀏覽器為您網站上的用戶生成結果的速度。

如何改善您網站上的核心網絡生命力

首先要做的是運行快速的網站性能分析，以了解您的網站在核心網絡生命力指標方面的表現如何。 您可以使用不同的工具進行此分析，包括 Google Search Console 和 Page Speed Insights 等。 運行分析後，您可能會發現需要實施以下一些技巧來幫助您改進網站。

• 減少 JavaScript 執行

較差的 FID 評級意味著您的網站頁面與訪問者的交互時間超過 300 毫秒，當您減少和優化 JavaScript 執行時，它會縮短瀏覽器執行 JavaScript 代碼之間的時間間隔。 這樣做的結果是縮短了執行時間。 Google 建議推遲未使用的 JavaScript 以減少執行。 要了解您的網站是否有任何未使用的 JS，請按照以下步驟操作：

• 轉到您的站點並右鍵單擊任意一側，然後選擇“檢查”

• 單擊“來源”選項卡並檢查底部的三個點。 添加“覆蓋”工具並單擊加載功能。 等待加載完成，您可以在頁面上看到未使用的 JS 的數量。

有了這些知識，你就可以開始減少 JS 的執行了。 減少執行的一種方法是使用代碼拆分。 這是如何運作的？ 將 JavaScript 包分解成更小的部分。 捆綁的 JS 是捆綁在一起的組合文件，以防止加載網頁所需的過多 HTTP 請求。

壓縮和優化圖像

對於許多網站來說，圖像是其頁面上最大的元素。 為確保您的網站通過加載指標，您應該考慮優化您網站上的圖像。 這樣，您的網頁變得更輕，加載速度將顯著提高。

更輕的頁面還將改善用戶體驗、LCP 分數和搜索引擎結果的排名。 要減小頁面大小，請使用 Tiny JPG 等工具壓縮圖像。 減小頁面的整體大小不會影響分辨率和質量，但會改善站點的 LCP 結果。

我們建議您對圖形使用 PNG 格式，對風景圖像使用 JPG 格式。 除了壓縮圖片，您還可以為您網站的圖片激活 CDN（內容分發網絡）。

內容交付網絡是世界各地的一組服務器，用於存儲來自網絡的內容。 這些服務器分佈在不同的位置； 圖像可以從離用戶最近的服務器以更快的方式傳送。

實現延遲加載

在您的網站上顯示圖像時，實施延遲加載非常重要。 當您使用此技術時，您網站上的核心 Web Vitals 得分和用戶體驗不會受到負面影響。 那麼，什麼是延遲加載？ 延遲加載使您的網站能夠在用戶向下滾動頁面的同時加載圖像。 這可確保您網站的加載速度不會受到影響，並且您可以獲得最高的 LCP 分數水平。 延遲加載有很多好處。 他們包括：

• 提高網站性能

• 帶寬使用限制

• 改進了網站的 SEO

• 留住網站的訪問者並最大限度地降低跳出率

如果您運營的網站包含許多視頻、動畫、圖像和其他重元素，那麼使用延遲加載非常重要。 實施此技巧後，您可以將之前的 LCP 分數與實施延遲加載後獲得的新分數進行比較。

為嵌入和圖像使用適當的尺寸

大於 0.1 的 CLS 分數被認為是差。 造成如此低分的主要原因是重元素，例如嵌入、廣告和沒有維度的圖像。 要提高您網站的 CLS 分數，請注意維度。 當您為圖像和嵌入使用準確的寬度和高度時，瀏覽器在加載過程中更容易在頁面中分配正確的空間量。 在將 YouTube 視頻插入您的網站時，請確保為圖像和嵌入設置正確的尺寸。 以下是如何調整 YouTube 視頻的大小以顯示在您的網站上。

• 前往 YouTube 並打開您想要嵌入您網站的視頻。

• 尋找共享按鈕並選擇<> 嵌入選項。

• 您將看到有關視頻的所有詳細信息，包括尺寸。 複製代碼並將其粘貼到您網站的後端。 這會將其更改為正確的寬度和高度，以正確適合您的站點。

最後的想法

這些是您可以用來改善您網站上的核心網絡生命力的重要提示。 在這篇文章中，我們研究了核心網絡生命力的基礎知識以及您可以用來提高分數的技巧。 提高分數意味著您的排名將在搜索結果中增加，並且您網站上的跳出率將顯著提高。