如何獲得電子商務商店的 90+ 核心 Web Vitals 分數（案例研究）
已發表: 2021-08-19在這篇文章中，您將學習如何在電子商務商店的 Google Core Web Vitals（桌面版和移動版）上獲得 90+ 的分數，即使您使用了很多插件。
當谷歌首次發布他們的核心網絡生命力評估時，許多電子商務店主開始恐慌。
與基本內容網站或博客不同，電子商務商店的形像很重，需要更多功能元素來完成銷售。 每個添加的功能都會減慢您的網站速度。
例如，實時聊天可能需要 6-10 秒才能自行加載。 使用 Klaviyo 加載基本的電子郵件跟踪可能需要 1-2 秒。 即使添加 Facebook 像素也可能需要一百毫秒才能加載。
您的代碼是使用延遲加載還是異步加載並不重要。 您網站上的每一個附加元素都會對您的核心網絡要素產生負面影響。
目前，根據 Searchmetrics 的數據，在美國測試的網站中有 96% 未通過谷歌針對桌面、移動或兩者的核心網絡生命力評估。
由於在線交易所需的功能，電子商務商店的失敗率甚至更高。
在這篇文章中，我將向您展示我為我的 7 位數電子商務商店網站獲得 90+ Google Core Vitals 評分所採取的確切步驟。
獲取有關如何開設成功電子商務商店的免費迷你課程
如果您有興趣開展電子商務業務，我整理了一個全面的資源包，可幫助您從頭開始開設自己的在線商店。 離開前一定要抓住它！
什麼是 Google Core Vitals？
Google Core Web Vitals 是 Google 將其納入搜索排名以衡量用戶體驗質量的一組因素。
Google Core Vitals 由 3 個組件組成。
- 最大的內容繪製（Google 需要 2.5 秒或更短的時間） ——這是衡量看到屏幕上顯示的最大內容所需的時間。 基本上，它是您網站加載的速度。
- 首次輸入延遲（Google 要求 100 毫秒或更短） ——這是衡量您的頁面響應能力和可用性的指標。 具體來說，谷歌正在測量訪問者點擊交互功能與頁面響應點擊之間的延遲。
- Cumulative Layout Shift（Google 要求 0.1 分或更低） ——這是衡量您的頁面加載時的穩定性的指標。 當頁面呈現時，您的內容是否上下移動？ 這是唯一與頁面速度無關的 Google Core Web Vital 指標。 如果您不知道自己在做什麼，這也是最難調試的。
這篇文章的其餘部分將詳細說明我如何為我的電子商務商店修復這 3 個指標，以在桌面和移動設備上獲得90+ 的 Google Core Vitals 分數。
用於此案例研究的電子商務商店
大多數電子商務店主都在 Shopify、WooCommerce、BigCommerce 或 Shift4Shop 上，無論您在哪個平台上，所有這些策略都適用。
我的 7 人偶商店位於 BumblebeeLinens.com。 當您閱讀這篇文章以直接查看我的結果時，請隨時在我的商店中運行 Google 頁面速度測試。
首先，我的商店使用了許多最新的電子商務花里胡哨，因為我在 Profitable Online Store 教授電子商務課程。
事實上，我把我的商店當作實驗室來測試新功能，因為它們出現並在這個博客上報告它們。
以下是我在本案例研究中在我的商店中運行的插件和服務。
- Klaviyo – 我的電子郵件營銷平台
- 後記——我的短信營銷平台
- Vizury - 我的推送通知提供者
- ManyChat – 我的 Facebook Messenger 營銷提供商，它實現了我的實時聊天
- Gorgias – 我的客戶服務軟件，處理所有客戶通信。
- Spin To Win Popup – 我商店的主要磁鐵
- Facebook Pixel – 跟踪我在 Facebook 上的所有銷售額
- 谷歌分析——跟踪我的網站銷售
- Notify Slide Up – 通過顯示銷售量來提供社會證明
只是為了好玩，這是我的網站在沒有任何優化的情況下加載的速度。
這就是我將要教您如何實施的優化的運行速度。
如何解決大型內容繪製 (LCP) 和首次輸入延遲 (FID) 問題
低 LCP 和 FID 分數是由於頁面速度慢造成的。 如果您可以使您的網站更快，那麼您的 LCP 和 FID 分數都會自行修復。
對於 99% 的電子商務商店來說， LCP 和 FID 問題是由……
- 加載阻止渲染的 JavaScript 和 CSS – 如果沒有任何優化，javascript 和 css 文件會按順序加載，這可能會阻止頁面的視覺渲染。 加速您的 javascript 的最佳方法是延遲加載您的代碼或推遲渲染，以便它不會阻止任何內容。
- 加載大照片和/或視頻——圖像越大、分辨率越高，加載所需的時間就越長。 您永遠不應該加載比您網站上顯示的更大的圖像。 此外，您永遠不應該加載任何在屏幕上不可見的圖像。
- 緩慢的服務器– 對於 Shopify、BigCommerce 或 Shift4Shop 等完全託管的平台來說，緩慢的服務器應該不是問題，但如果您使用 WooCommerce，那麼使用 WPEngine 這樣更快的主機可以顯著加快您的網站速度。
在較高的層次上，如果您解決了上述 3 個問題，那麼您將擁有一個閃電般的網站。
如何實現 1 秒頁面加載速度
下面是我的速度優化的完整列表以及1-5的評分，其中 5 表示對速度改進的影響最大。
一般來說，你應該專注於 5並且只有在你有時間或者如果你是超級肛門時才實施 1 和 2 :)
如果你想知道我是如何實現 1 秒頁面加載速度的，你可以直接跳到評分為 5 的大砲：）！
啟用瀏覽器緩存（評分 1 分（滿分 5 分））
瀏覽器緩存告訴客戶端瀏覽器在用戶的本地機器上緩存您網站的圖像和其他元素，以便在初始頁面加載後更快地瀏覽您的網站。
瀏覽器緩存應始終打開，但請注意瀏覽器緩存不會影響您的 Google Core Web Vitals 。 谷歌只關心你的網站是如何從完全冷的狀態加載的。
最小化 CSS/JS 文件（評分 1 分，滿分 5 分）
最小化你的 CSS/JS會從你的 CSS 和 javascript 文件中刪除所有的空白，以在這里和那裡節省一些字節。
一般來說，縮小 CSS/JS 文件不會顯著提高頁面速度。
如果您想從網站上爭取每最後一毫秒的速度，請執行此優化。
結合 HTML、CSS 和 JS 文件（5 分中的 2 分）
將您的 HTML、CSS 和 JS 文件合併到更少的文件中可能會影響您的頁面速度，因為您的服務器必須獲取更少的文件。
但是使用最新的 Web 服務器技術，可以同時並行獲取多個文件，這大大減輕了這種優化。 我不會花太多時間在這上面。
清理您的重定向（5 分中的 2 分）
您的網站在不斷變化，有時您可能會從某些圖像和/或頁面重定向到其他圖像和/或頁面。
例如，當我多年前將所有頁面從 http:// 遷移到 https:// 時，我發出了從某些頁面和圖像到其安全對應物的 301 重定向作為快速修復。
頁面上的每次重定向都會降低網站速度，因此請確保使用 GTMetrix 之類的工具來檢測頁面元素上的任何重定向並將其刪除。
使用更快的虛擬主機（5 分中的 3 分）
如果您使用的是 WooCommerce 或 Magento 等開源平台，您的第一反應可能是花錢購買全新的服務器來解決您的頁面速度問題。
但大多數情況下，更快的服務器並不能解決您的速度問題。 但是，如果您目前使用的是便宜的共享主機，那麼 VPS 或專用服務器可能會產生重大影響。
使用 CDN（5 分中的 2-3 分）
內容交付網絡或 CDN 將您網站和圖像的多個副本存儲在世界各地的多台服務器上，以便您的內容由最近的地理位置服務器交付。
如果您在全球範圍內擁有客戶並且您的網站圖片非常重，那麼使用 CDN 可能會對您的頁面速度產生重大影響。
但是對於像我這樣主要服務於美國的小型站點，使用 CDN對頁面速度的影響很小。
預加載更大的圖像和腳本（5 分中的 3 分）
“最大內容繪製”等指標衡量頁面上最大元素的速度。 因此，通過在 HTML 代碼中提供提示來“預加載”頁面上最大的元素是有意義的。
預加載提示是 HTML 代碼中的指令，它告訴瀏覽器哪些資源對頁面最重要。
例如，如果您有一個大的初始圖像，那麼首先開始加載該圖像以改進您的 LCP 是有意義的。
雖然在您的網站上預加載重要元素可能有助於您的 LCP 得分，但它不會影響您的整體頁面速度。
縮小您的圖像（評分 4 分（滿分 5 分））
大多數新的電子商務商店所有者使用的圖像尺寸遠大於所需尺寸。 如果您的在線商店主題使用 1000 × 1000 圖像，那麼您不應該上傳大於 1000 x 1000 的圖像。
如果您的網站在不同大小的多個頁面上使用相同的圖像，您應該為每個版本創建一個單獨的（和較小的）圖像。
例如，我商店中的產品圖片根據頁面顯示為全尺寸、50% 尺寸、33% 尺寸和 25% 尺寸。
因此，我的網站上有 4 個不同的圖像文件（每個尺寸 1 個），並且我只顯示所需的最小圖像而不會降低質量。
此外，您應該在 Photoshop（或您使用的任何圖像程序）中將所有 JPG 文件壓縮到最高 50 質量。
壓縮和緩存您的頁面（5 分中的 4 分）
如果您使用的是完全託管的平台，例如 Shopify、BigCommerce 或 Shift4Shop，您的頁面可能在提供服務之前已經被壓縮和完全緩存。
但是，如果您使用的是像 WooCommerce 這樣的開源平台，請確保使用像 WP Rocket 這樣的插件。
WP Rocket 將預渲染您的所有網頁，以便您的商店將提供需要很少或不需要 CPU 使用率的靜態頁面。
WP Rocket 還會將您的網頁壓縮到其大小的 90%。
使用較少的加載外部代碼的插件（評分 4 分，滿分 5 分）
您添加到網站的每個插件都會減慢速度。 因此，無論何時決定安裝新的軟件工具，都應格外小心。
看似無害的功能有時會顯著降低您的網站速度！
例如，添加 Facebook 分享按鈕或 Pinterest 固定按鈕可能會導致從外部源下載一段新的 javascript 代碼。
對於 Twitter、Facebook 或 Pinterest 等按鈕，我總是使用不需要外部加載代碼的“非 javascript”版本。
如果您想在您的網站上添加 Facebook 分享按鈕，您應該使用如下所示的超鏈接版本。
https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/
延遲加載您的圖像和 Javascript 代碼（5 分中的 5 分）——最重要的！
在提高頁面加載速度時，您應該只加載站點中必需或可見的元素。
例如，如果有一張圖片在您的頁面中向下滾動 5 次，您不應該顯示該圖片，直到您的客戶將其向下滾動到足以看到它為止。
同樣，對於 javascript 代碼，在實際需要加載之前，您不應為網站加載任何功能。
如何延遲加載您的 Javascript 和 CSS 代碼
延遲加載圖像相當簡單，大多數主題已經內置了圖像延遲加載。
但是您如何才能在您的網站上安全地延遲加載 javascript 代碼呢？
這是我如何做到的秘密。
對於我網站上的每個頁面，我首先加載我網站的視覺元素。 然後，一旦用戶在頁面上執行操作，我只會在我的網站上加載功能性 javascript 代碼。
例如，如果您現在訪問 Bumblebee Linens，您會注意到我的網站加載速度非常快（有時不到一秒鐘）。
但是，如果您單擊頁面或移動或滾動鼠標，則實時聊天才會與我商店中的其他“購物”功能一起加載。
換句話說，只有當用戶在我的商店中採取行動或購物時，我才會延遲加載我網站的購物車功能。
結果，我的頁面加載速度非常快，因為我只加載我網站的圖形 HTML/CSS 元素。
從用戶的角度來看，購物體驗是完美的，因為每個頁面加載速度都快如閃電。 同時，谷歌也看到了一個快速加載的頁面。
如何實現 Javascript 延遲加載
延遲加載您的 javascript 所需的第一步是找出可以在不破壞您的站點的情況下延遲加載的內容。
請記住，您必須將所有“基本”代碼加載到您的站點，以便您客戶的“視覺”購物體驗不受影響。
因此，您必須加載影響站點圖形元素呈現的每一段代碼。
以下是如何弄清楚什麼是必不可少的。
轉到 GTMetrix 並分析您的瀑布圖。 您的瀑布圖會告訴您頁面上加載的所有內容以及加載所需的時間。
根據上圖，klaviyo_subscribe.js 的加載時間為450 毫秒。 此外，klaviyo_subscribe.css 還需要 420 毫秒。
Klaviyo 是我的電子郵件營銷工具，我知道Klaviyo 根本不會影響我網站的呈現。
因此，我可以輕鬆地延遲加載 Klaviyo，而不會影響頁面的視覺元素。
事實上，刪除 Klaviyo 代碼將使我的頁面速度幾乎減少一整秒！
使用 GTMetrix，創建一個列表，列出呈現站點視覺元素不需要的所有慢速加載代碼，然後在發生以下任何事件時延遲加載代碼。
- 鼠標移動
- 頁面滾動
- 屏幕觸控
這是一個小代碼片段，說明了我的 javascript 實現。
function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}
// 應該被解釋為的 DOM 事件數組
//用戶活動。
var 活動事件 = [
“鼠標按下”、“鼠標移動”、“按鍵按下”、“滾動”、
'觸摸啟動'
];
window.onload = 函數（）{
//將這些事件添加到文檔中。
//將活動函數註冊為偵聽器參數。
activityEvents.forEach(function(eventName) {
document.addEventListener(eventName, activity, true);
});
}
一旦您實施了這一步，您應該能夠在移動設備和桌面設備上實現低於 1 秒的頁面加載速度！
如何解決累積佈局偏移問題
您 90% 的累積佈局偏移問題將由以下 2 個原因引起。
加載沒有尺寸的元素
圖像大小參數允許 Web 瀏覽器在加載時了解內容的大小。
例如，如果您在 HTML 代碼中定義圖像尺寸，瀏覽器將在加載圖像時為圖像保留空間，因此頁面不會跳轉。
但是，如果缺少尺寸參數，則不會發生保留，並且在最終加載圖像時頁面將不得不重新排列。
此問題的簡單解決方案是指定站點上每個元素的尺寸，如下所示。
<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">
使用 Javascript 動態添加內容
許多 Shopify 插件使用 JavaScript 在您的網站上動態顯示功能。 有時此代碼加載較晚，這可能會上下推動您的頁面。
例如，如果您在網站上展示廣告，您的網站可能會隨著廣告加載而上下跳躍。
防止這種情況發生的最佳方法是在頁面上預先分配空間以顯示添加的內容。
添加預渲染的空白對於某些插件來說可能會出現問題，因此如果這是您商店的問題，請確保與插件創建者聯繫。
如何解決更複雜的 CLS 問題
如前所述，90% 的 CLS 問題都可以通過向元素添加維度來解決。 但是剩下的 10% 可能在不使用特定工具集的情況下非常難以解決。
對於我的網站，我花了 3 週的時間來解決我的 CLS 問題，因為 Google Page Speed 測試不能反映現場測量的 CLS 分數。
例如，我在 MyWifeQuitHerJob.com 上的博客在頁面速度實驗室測試中獲得了完美的 CLS 分數，但未能通過該領域的 CLS 測試。
如果您不知道我在說什麼，這裡是 Google Page Speed Test 的快速細分。
最高分是從使用 Chrome 瀏覽器的真實用戶收集的數據。 最低分是在理想條件下的試運行。
當 2 個分數不匹配時，修復起來會很痛苦，因為 Google 不會告訴您出了什麼問題。 事實上，您可以在實驗室中獲得完美的 CLS 分數，但在現場完全失敗。
以下是 Google 沒有告訴您有關 CLS 的內容。
頁面速度測試僅在理想條件下測量您的首屏 CLS 。 在現實生活中，用戶在可能更慢的互聯網連接上上下滾動。
為了解決您的 CLS 問題，您必須模擬慢速連接並表現得像真正的人類用戶！
如何模擬真實用戶來修復 CLS
最好的方法是使用內置的 Chrome 調試器。
以下是逐步調試 CLS 問題的方法。
第 1 步：啟動 Chrome 調試器
第 2 步：降低網絡速度
在“網絡”選項卡上，將頁面速度降低到“慢 3G”。 這將顯著降低頁面加載速度，因此您可以輕鬆檢測佈局變化。
第 3 步：渲染佈局移位區域
單擊“性能”選項卡，然後確保選中“渲染”下的“佈局移位區域”框。
第 4 步：刷新頁面
設置好 Chrome 調試器後，刷新頁面並像真實用戶一樣在頁面上上下滾動。
確保您查找表示佈局偏移的藍色突出顯示區域。
步驟 5：分析性能時間表
如果您在加載時看到網站佈局發生變化，請通過放大頁面加載時間線來仔細查看。
在下面的示例中，佈局正在移動，因為我正在加載不同的字體，由於新字體更大，頁面稍微向下移動。
通過在頁面的不同區域多次運行這些測試，您可以輕鬆發現並修復累積佈局偏移問題。
最難的部分是診斷您的 CLS 問題所在，因為 Google Page Speed 測試僅考慮頁面的折疊部分。
您可以為電子商務商店獲得 90 多個核心網絡重要分數
如果您遵循上述所有說明，您可以在移動和桌面的 Core Web Vitals 上實現低於 1 秒的頁面加載速度並獲得 90+ 的評分。
一般來說，您應該始終保持您的網站盡可能簡單，並且不惜一切代價避免使用插件！
在實現某個功能之前，問問自己是否絕對需要某個功能。 然後，尋找不需要向您的站點添加額外 javascript 代碼的解決方案。
因為我是超級肛門，除了發生的網絡調用之外，我實際上檢查了我安裝的每個插件的源代碼。
有一次，我盲目使用了一個插件，該插件實際上將我的網站信息發送到多個廣告網絡，並在我不知情的情況下出售我的客戶信息！
大多數頁面速度問題不是由您的主題引起的，而是由您安裝的插件引起的。 小心和快樂銷售！