提高頁面速度和掌握 Core Web Vitals 的四種方法
已發表: 2021-08-20
谷歌剛剛更新了它的搜索算法,使其成為利用這些核心 Web Vitals 技巧提升網站頁面排名的絕佳機會。
谷歌對其搜索算法的最新重大更新通過一組新的排名因素指標(稱為 Core Web Vitals)極大地關注用戶體驗。 Core Web Vital 審計的早期結果表明,平均網站的表現低於這些新標準。 Searchmetrics 的研究表明,平均而言,網站可以通過刪除未使用的 JavaScript 將頁面加載時間減少近一秒。
這提供了一個絕佳的機會,可以通過提高您自己的頁面排名來超越其他網站。
以下是您需要了解的有關 Core Web Vitals 的所有信息,以及改進指標的四個簡單步驟。
與 Searchmetrics 合作創建的內容。
什麼是 Core Web Vitals 指標?
Core Web Vitals 是 Google 頁面體驗信號的擴展,包括移動友好性和 HTTPs。 三個 Core Web Vitals 指標衡量加載性能、交互性和視覺穩定性,谷歌認為這些指標提供了對真實世界用戶體驗的準確描述。
- 最大內容繪製 (LCP) 測量用戶視點內可見的最大圖像或文本塊的加載時間。
- 首次輸入延遲 (FID) 通過計算從用戶首次與站點交互到瀏覽器響應該交互的時間來衡量頁面上的交互性。
- Cumulative Layout Shift (CLS) 是指在頁面渲染過程中內容的偏移量。
如何檢查您的頁面速度見解
有許多在線工具可以檢查您的網頁排名得分,包括 PageSpeed Insights、Chrome 用戶體驗報告、Lighthouse Audit 和 Search Console。 這些網站測量各種元素的頁面速度,並使用交通燈系統顯示結果。 PageSpeed Insights 提供結果細分並突出顯示改進領域。
“好”的表現在數字上意味著什麼?

提供一個 良好的用戶體驗,LCP 應在頁面首次開始加載後的 2.5 秒內發生。 頁面應具有小於 100 毫秒的 FID 並保持小於 0.1 的 CLS。
像維基百科這樣的網站,由於採用了輕量級的網頁設計方法,主要使用文本和 優化的圖像。 嚴重依賴視頻內容和圖像的網站加載速度較慢,用戶體驗不佳。 因此,需要在設計和用戶體驗之間取得平衡。
查看您的網站排名。 訪問 PageSpeed 見解 並輸入您的網址。 注意:最高的數字是您的 Lighthouse 分數,也稱為 PageSpeed 分數,從 0 到 100 分。雖然它是您網站性能的一個很好的通用基準。 它與三個 Core Web Vitals 指標並不完全相關,應該將其視為對 LCP、FID 和 CLS 的分析。
如何提高頁面速度
通過被認為在所有三個方面都獲得了“好”的分數。 進行小的更改可以將頁面速度分數提高一秒鐘,這可以將站點從 LCP 中的“差”或“需要改進”分數轉變為“好”分數。 減少加載時間將使用戶更快樂並增加網站的訪問量。

Searchmetrics 的創意營銷專家 Tom Wells 說,
“網站上不需要的任何東西都不應該存在。”
簡而言之,識別和刪除未使用或具有實質性目的的元素可以提高網站的頁面速度得分。
1. 超大圖片
優化不佳的圖像是影響站點 LCP 分數的主要原因之一,因為這通常是要加載的最大元素。 由於多張高分辨率圖像的頁面渲染,電子商務企業和嚴重依賴圖像的企業的 LCP 分數可能較低。
通過使用響應式設計或下一代圖像格式(如 WebP、JPEG 2000 和 JPEG XR)來優化這些資產,可以通過縮短渲染時間來提高分數。 通常,可以在不影響圖像質量的情況下將圖像壓縮到更小的尺寸。 像 Squoosh 這樣的免費資源可以為您做到這一點。
2.動態內容和廣告
在網頁上加載廣告是導致 CLS 分數不佳的主要原因之一。 這可以歸結為頁面上的元素發生變化以適應動態廣告,從而導致用戶體驗不佳。
使用智能實現方法(例如為所有廣告、視頻和圖像元素分配尺寸屬性或 CSS 縱橫比框)是減少內容轉移的一種方法。 一些公司可能會在網站頂部使用插件或編碼來放置廣告。 但是,這可能會導致網站速度變慢,從而對用戶體驗產生負面影響,並間接影響排名。
此外,切勿在現有內容之上插入內容,除非響應特定的用戶交互,因為這樣可以確保發生任何佈局轉換。 例如,當您單擊 CTA 按鈕並出現表單時是一個例外。
3. 以插件為中心的網絡經濟
Wells 說,插件可以像“抹灰”一樣解決網站問題。 儘管創建了臨時修復程序,但它可能會減慢並阻礙 Web 性能,因為在用戶能夠與網頁完全交互之前需要加載所有代碼。
使用插件可以增加服務器請求計數並增加 javascript 執行時間。 所有這些因素都會降低網站的 FID 分數。
“我們經常尋找高級修復和解決方案,但有時它就像刪除不需要的東西一樣簡單,”Wells 說。
因此,刪除一些插件,尤其是未使用的插件,可以提高網站的反應性和速度。
4. 代碼過多
谷歌建議關注整體網站性能。
“對於響應迅速且評分良好的網站而言,盡可能輕量級至關重要,”Wells 說。
“服務器必須加載的東西越多,加載時間總體上就越慢。”
雖然未使用的 CSS 和 JavaScript 可能不會直接影響頁面速度得分,但它仍會影響網站的加載時間、造成代碼膨脹並對用戶體驗產生負面影響。
我應該什麼時候開始?
Google 於 6 月中旬開始推出新算法,因此值得開始查看您的網站在頁面速度測試中的得分情況。 排名良好的網站往往具有更高的 Core Web Vitals 分數,並且隨著 Google 更加重視用戶體驗,這一趨勢將持續下去。
___
通過Aoife 摩根
來源:搜索引擎觀察
