如何在 Shopify 上優化 Core Web Vitals

已發表: 2023-01-30

網上有很多關於如何衡量 Core Web Vitals 以及您的網站得分高低的信息。但是很少有關於您需要做什麼來進行改進的可行建議，特別是在 Shopify 上。

在本文中，我們將了解如何在您的 Shopify 商店中提高您的 Core Web Vitals 分數。我們已嘗試讓盡可能多的建議在沒有開發人員的情況下也能付諸實施，但有些建議需要專家技術實施。

我們將依次分解每個核心網絡重要指標，解釋影響其性能的因素，然後向您展示如何改進任何 Shopify 商店的每個 CWV 指標。

單擊下面的標題可直接跳轉到該部分：

如何在 Shopify 上計算 Core Web Vitals
如何在 Shopify 上改進 LCP
如何在 Shopify 上改進 CLS
如何提高 Shopify 上的 FID
Shopify Core Web Vitals 應用程序

什麼是核心網絡生命力

讓我們非常簡要地回顧一下 Core Web Vitals 是什麼。

Core Web Vitals 是 Google 用來衡量網頁性能和用戶體驗的一組指標。對於每個指標，URL 被標記為“綠色 - 好”、“琥珀色 - 需要改進”或“紅色 - 差”。

Core Web Vitals 分數直接影響搜索引擎排名。

LCP - 最大的內容繪畫

將頁面上最大的元素渲染到屏幕上需要多長時間？

CLS - 累積佈局偏移

頁面加載時頁面佈局移動了多少？

FID - 首次輸入延遲

頁面需要多長時間才能響應交互？

如何在 Shopify 上計算 Core Web Vitals

了解 Google 如何計算 Core Web Vitals 分數很重要，因為這會影響如何進行有意義的改進。 Core Web Vitals 的數據來自 CrUX 數據，該數據衡量使用 Chrome 網絡瀏覽器的真實網站訪問者的性能。這稱為“現場數據”。

對於每個 CWV 指標，您需要達到一個最低平均分數才能不被標記為“差”。這是基於針對頁面組記錄的平均分數。重要的是要了解您的 Shopify 網站並未根據核心網絡生命力指標進行評分；您網站上的網址是。

當您的 Shopify 商店在 Core Web Vitals 指標上失敗時，Search Console 將向您顯示受該問題影響的 URL 示例。這有助於您縮小問題所在的範圍並應用目標改進。在開始對您的 Shopify 商店進行任何 Core Web Vitals 優化工作之前，首先要確定哪些改進領域的影響最大。不要將時間浪費在不會產生積極結果的工作上。

Shopify Core Web 重要指標優化技巧

Core web vitals 就是要盡快提供最重要的內容和資源。

頁面速度優化不是一次性的事情。您的組織需要採用一種文化，將頁面速度影響納入所有決策制定。對於您考慮對商店進行的每項改進，請考慮頁面速度的權衡。

如何改進 Shopify 上的 LCP

LCP 指的是頁面上最大的元素以及瀏覽器加載該元素並將其呈現到屏幕上所花費的時間。這通常是圖像，但也可以是文本元素。

要改進 Shopify 商店的 LCP，有助於了解影響 LCP 的因素。加載 LCP 元素有四個階段。

不。	階段	描述
1個	第一個字節的時間	從 Web 瀏覽器啟動到瀏覽器收到 HTML 響應中的第一個字節數據的時間
2個	資源加載延遲	TTFB 與瀏覽器開始加載 LCP 元素之間的增量
3個	資源加載時間	瀏覽器下載 LCP 元素所需的時間
4個	元素渲染延遲	下載 LCP 元素和將其呈現到頁面上之間的增量

LCP 是關於網絡瀏覽器將最大的元素繪製/渲染到頁面上需要多長時間。加載和繪畫不是一回事。即使您的 LCP 元素已優化為很小的文件大小，LCP 仍可能需要很長時間，因為：

資源加載延遲。瀏覽器開始下載元素的時間太長
元素渲染延遲。瀏覽器下載 LCP 元素後，需要很長時間才能將元素呈現到頁面上。

這裡的要點是 LCP 不僅僅是最大元素的文件大小。這是完成上述 4 個階段過程所需的時間。要提高 LCP 分數，請關注加載和呈現 LCP 元素的整個過程。

如何在任何 Shopify 頁面上查找 LCP 元素

要改進 LCP，您需要知道頁面上的哪個元素是 LCP。這在 Shopify 上很容易。只需轉到 PageSpeed Insights 並分析您需要為其查找 LCP 的 URL。報告完成後，滾動到底部並查看“診斷”部分。將有一行稱為“Largest Contentful Paint element”。展開它以查看有關此頁面上的 LCP 是什麼元素的詳細信息。

不要延遲加載 LCP 元素

延遲加載是一種僅在元素在視口中可見時才加載元素的方法。這有助於加快首屏內容的加載速度。您不應該延遲加載 LCP 元素，因為它會延遲瀏覽器開始下載該元素的速度。

在 Shopify 商店中，產品頁面上的 LCP 元素通常是主要產品圖片。或者在博客文章中，LCP 元素可能是博客標題圖片。一些 Shopify 主題會自動為每張圖片添加延遲加載，即使是那些出現在首屏的圖片。查看您的每個 Shopify 模板並弄清楚 LCP 元素是什麼。如果它出現在首屏上方，請確保以下屬性未包含在 HTML 標記中：

加載=“懶惰”

預加載 LCP 元件

您可以使用 rel=”preload” 告訴網絡瀏覽器盡快下載特定資源。通過在 LCP 元素上應用 rel=”preload”，瀏覽器將優先將該資源加載到頁面中。

您可以通過編輯主題代碼自行完成此操作。對於 Shopify 主題開發人員，可以將過濾器添加到 Shopify 液體模板中，以輸出預加載標籤。

使用下一代圖像

WebP 等新圖像格式的文件大小比 JPG 和 PNG 等傳統格式小。如果您的 LCP 元素是圖像，使用 Nextgen 圖像格式將加快下載時間。在可能的情況下，使用 WebP 圖像，但請記住為不支持下一代圖像的舊版瀏覽器添加回退。

新的 Shopify 主題會自動將您的圖像轉換為 WebP，並將它們提供給適當的瀏覽器。

確保 LCP 元素包含在初始 HTML 響應中

通過確保您的 LCP 元素在初始 HTML 響應中交付來減少“資源加載延遲”。如果 LCP 元素是通過外部資源（例如 JS 腳本）加載到頁面中的，瀏覽器將需要更長的時間來開始下載 LCP 元素。

這是否會影響您的 Shopify 商店將取決於您使用的商店模版。一個快速測試的方法是弄清楚你的 LCP 元素是什麼，然後在關閉 JS 的情況下查看頁面。如果 LCP 元素未在頁面 HTML 中輸出，則意味著它未在初始 HTML 響應中傳遞。

消除渲染阻塞資源

“消除渲染阻塞資源”的建議已經存在了很長時間。但這究竟意味著什麼？某些資源（例如腳本和样式表）會阻止網頁呈現。當瀏覽器發現資源時，它將停止下載頁面，而是下載並執行該資源。這會延遲為用戶呈現頁面。

燈塔報告將向您顯示任何頁面的呈現阻塞資源。因此，您需要確定哪些腳本和样式表會阻塞渲染，然後優化它們的交付方式。

消除渲染阻塞 JS

首先你需要了解兩個屬性 defer 和 async。這些 HTML 屬性可以附加到外部腳本並告訴瀏覽器何時下載/執行資源。

屬性	定義
推遲	在頁面呈現之前不要下載或執行腳本
異步	在下載頁面其餘部分的同時繼續下載腳本，但隨後停止下載頁面並執行腳本

因此，通過將 async 或 defer 應用到您的 JS 腳本，您可以最大限度地減少它們對頁面呈現的影響。 Shopify 不會自動異步或延遲您的腳本，因此您需要進入主題液體模板並自行添加屬性。但是在執行此過程時要非常小心，因為您需要考慮推遲腳本對商店功能的影響。

您還會發現您在 Shopify 商店中安裝的應用程序和插件會輸出渲染阻塞 JS 腳本。您可以通過 Lighthouse 報告識別這些。仔細考慮您在商店中安裝的每個應用程序，並考慮對頁面速度的潛在影響。一些商家甚至不會意識到未使用的應用程序仍在商店中安裝並影響頁面速度。當您卸載應用程序時，請確保它不會在您的主題中留下任何遺留代碼。

消除渲染阻塞 CSS 樣式表

要消除渲染阻塞 CSS，您應該內聯渲染首屏內容所需的關鍵樣式。立即為每位訪問者下載整個樣式表效率不高，因為大部分 CSS 都不會被使用。

解決方案是通過將其包含在head的樣式標記中來內聯呈現頁面首屏部分所需的關鍵 CSS。然後將下面的代碼添加到你的 theme.liquid.js 異步加載你的主樣式表。

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

在將其發佈到您的在線商店之前，請嘗試測試主題以驗證您的頁面在視覺上仍然顯示正確。

如何在 Shopify 上改進 CLS

CLS 是關於頁面加載時頁面佈局移動了多少。原因通常是圖像在加載和渲染時四處移動內容。

為圖像添加寬度和高度屬性

最簡單的 CLS 解決方案是確保您的 img 標籤輸出明確的寬度和高度屬性。這些屬性應用於圖像 HTML 並告訴瀏覽器圖像的寬度和高度。有了這些信息，瀏覽器就可以計算出圖像的寬高比和尺寸，並為該圖像預留所需的空間。當圖像添加到頁面中時，這會阻止佈局移動。

要在您自己的 Shopify 商店的圖片上執行此操作，請登錄並轉到主題部分。並為您的主題進入“編輯代碼”。然後在您的 liquid 模板中找到輸出圖像的代碼片段，並將以下片段添加到 img 標籤中。

 height="{{img.height}}" width="{{img.width}}

查看您用於 Shopify 主頁、產品系列、產品和博客的液體模板，並確保 img 標籤引用寬度和高度屬性。

優化你的字體

由於稱為 FOUS（無樣式文本閃爍）的問題，您從 Google 字體等地方加載的那些花哨的網絡字體可能會導致 CLS 問題。這是 Web 瀏覽器最初加載後備字體的地方，然後當加載主 Web 字體時，文本會重新呈現，從而導致佈局偏移。

減少對第三方網絡字體的依賴首先，嘗試減少對第三方網絡字體的依賴。導入 Web 字體時，僅導入您需要的字體系列。如果從未使用過不同的字體粗細和样式，請不要導入它們，因為這會使字體文件大小膨脹。

預加載字體Web 字體有時從樣式表中加載。這會延遲瀏覽器開始下載字體的速度。相反，將您的字體文件預加載到你的商店。這將告訴瀏覽器以高優先級加載字體文件。

使用 font-display:optional Font-display 是一個 CSS 屬性，它告訴瀏覽器在 100 毫秒內未下載字體時要做什麼。瀏覽器最初會加載後備字體，如果自定義字體在 100 毫秒內未完成下載，瀏覽器將保持後備字體呈現在頁面上。這降低了自定義字體加載過晚並導致佈局偏移的風險。

如何提高 Shopify 上的 FID

根據我們的經驗，FID 是我們看到影響 Shopify 商店的最不常見的 Core Web Vital 指標。將 FID 視為衡量頁面在加載期間的響應程度的一種方式。沒有什麼比點擊/敲擊卻什麼也沒有發生更讓用戶感到沮喪的了。

FID 類似於另一個稱為總阻塞時間 (TBT) 的指標。 TBT 測量頁面開始呈現（First Contentful Paint 或 FCP）與頁面響應（交互時間或 TTI）之間的時間。

TBT 是由阻止主線程處理的“長任務”引起的。主線程是瀏覽器處理加載頁面所需的一切的地方。如果長任務阻止主線程處理，它會延遲頁面對用戶交互的速度。

FID 和 TBT 有什麼區別

FID 和 TBT 之間的主要區別在於 FID 基於現場數據（來自訪問過您的 Shopify 商店的真實用戶的數據）。而 TBT 是實驗室可測量的，並且是通過在具有定義的網絡條件的人為環境中運行測試來計算的。

由於您在測試自己的頁面時無法衡量 FID，因此您應該衡量 TBT。

要提高 FID，您需要加快 Shopify 商店對用戶首次交互的響應速度。這是通過盡可能高效地加載您的 Shopify 頁面來完成的。重點關注這三個方面：

減少第三方代碼的影響

與所有核心 Web Vitals 指標一樣，第三方 JavaScript 通常是問題的根源。任何阻塞主線程超過 250 毫秒的第三方都將在 Lighthouse 報告中被標記。通過 Lighthouse 運行您的頁面，以確定哪些第三方腳本會導致問題。然後決定哪些可以設置為異步或延遲。

減少 JavaScript 執行時間

執行 JavaScript 所需的時間也很重要。首先，通過 Lighthouse 運行您的頁面並確定哪些腳本執行時間最長。 Lighthouse 會標記任何超過 2 秒的腳本。

使用代碼拆分與其在單個文件中交付所有 JavaScript 代碼，不如將代碼拆分為更小的部分，並且僅交付該頁面所需的代碼。這並不容易，需要管理代碼的開發人員的支持。如果在項目開始時將其集成到 Shopify 主題的開發中，您會發現這會容易得多。

縮小和壓縮您的代碼當您縮小您的代碼時，您刪除了不必要的空格和註釋。這減少了文件的大小，但加快了瀏覽器執行代碼的速度。 Shopify 的一大優點是大多數主題 js 都會自動縮小。

與縮小一樣，壓縮 js 可減小文件大小並加快 Web 瀏覽器執行代碼的速度。

最小化線程工作

主線程完成所有處理和計算如何構建頁面的工作。當主線程被密集型任務佔用時，你的TBT就會變差。這主要取決於您的 Shopify 主題有多強大。可憐的開發人員構建的廉價主題不會像 Shopify 專家開發的那樣高效加載。

如何最大限度地減少 Shopify 商店的線程工作？如上所述，如果從一開始就將其集成到您的主題中，就會容易得多。我們建議您購買好評如潮的高級 Shopify 主題。或者，如果您正在構建自己的 Shopify 商店，請確保您正在與 Shopify 專家開發人員合作，他們可以確保您的主題得到優化以最大限度地減少線程工作。

如何衡量核心 Web Vitals 性能

現在您了解瞭如何在您的 Shopify 商店中改進 Core Web Vitals，接下來您需要知道如何衡量您的 Core Web Vitals 進度。

搜索控制台

查看您的 Shopify 商店當前在 Core Web Vitals 方面表現如何的最快方式是通過 Search Console。從左側菜單轉到 Core Web Vitals 報告，獲取有關您的網站當前表現的數據。它將包括您遇到任何 Core Web Vitals 問題的細分，並向您展示受影響的 URL 示例。

Pagespeed Insights/燈塔

Pagespeed insights 是一款免費的 Google 工具，可讓您測量任何頁面的頁面速度。通過該工具運行您的 Shopify URL，以詳細了解您的表現以及獲得更高分數的建議操作。

關鍵點報告

CrUX 是 Google 自己的數百萬真實頁面的速度/性能數據集。您可以使用 Google CrUX Data Studio 儀表板訪問您自己的 Shopify 商店的 CrUX 數據。該儀表板提供了過去 16 個月您的網站在核心網絡生命指標方面的表現的深入細分。

所有這些 CWV 術語是什麼意思？

當您開始查看 Core Web Vitals 時，您會遇到許多複雜的術語，這就是它們的全部含義：

學期	定義
預加載	提示瀏覽器優先下載特定資源。高優先級
DNS 預取	解析域名
預取	告訴瀏覽器在用戶請求之前加載資源。用於近期可能需要的資源（例如下一頁）。將在需要資源時加快加載速度，但可能會減慢當前頁面的加載速度。低優先級
預連接	在從域下載資源之前，建議瀏覽器連接到源。將解析 DNS 和 TCP 握手/TLS 協商
推遲	延遲加載腳本，直到頁面加載完畢
異步	到達後立即加載腳本，但繼續加載頁面的其餘部分

核心網絡活力 Shopify 應用

有很多 shopify 應用程序聲稱能夠提高 Core Web Vitals 分數。其中一些應用程序非常有效，確實可以提高性能。雖然這可以提高您的 Core Web Vitals 分數，但不能保證您會看到任何效果。這是因為每個 Shopify 商店的 Core Web Vitals 分數都是獨一無二的。如果您商店的 Core Web Vitals 分數因特定主題問題而較差，應用程序可能不會產生任何影響。

如果您想採用應用程序路線，我們建議您試用一個應用程序並觀察它對性能的影響。以下是一些建議試用的應用程序：

https://apps.shopify.com/core-web-vitals-booster
https://apps.shopify.com/page-speed-optimizer
https://apps.shopify.com/swift

如果您的電子商務業務需要任何建議或支持，請聯繫我們的團隊，我們很樂意提供幫助。