讓顧客滿意是零售業成功的秘訣。事實證明，提供快速、一致的在線體驗可以顯著提高零售商關心的每項指標——從轉化率和收入到留存率和品牌認知度。

本文大綱：

• 頁面速度影響在線零售業務數據

• 如何將您的網站速度與競爭對手進行比較

• 性能優化入門：分析是什么拖慢了你的頁面速度，從圖片和第三方到樣式表和自定義字體，以及你可以采取哪些措施

頁面速度影響在線零售業務數據

對于大多數在線零售商而言，頁面速度對利潤有著可衡量的影響。即使是很小的改進也可以顯著提高轉化率等指標。比如

如何分析網站性能和業務轉化數據關系

但是您的網站呢？要了解頁面速度改進對您自己的網站的影響，您需要查看您自己的真實用戶監控 (RUM) 數據。關聯圖 是向企業中的每個人傳達績效的好方法。您可以使用 RUM 創建這些可視化效果，讓即使是最不懂技術的利益相關者也可以輕松看到績效與用戶參與度和業務指標（例如跳出率和轉化率）之間的關聯。

關聯圖表為您提供所有用戶流量的直方圖視圖，這些流量根據性能指標（例如開始渲染、最大內容繪制和下次繪制前的互動次數）細分為不同的群組。該圖表包含一個疊加層，向您顯示與每個群組相關的用戶參與度指標或業務指標（例如跳出率或轉化率）。這樣您就可以一目了然地了解性能、用戶參與度和業務之間的關系。

在此關聯圖中可以看到，在最大內容繪制 (LCP) 時間為 1.1 秒時，轉化率峰值略高于 6%。隨著 LCP 變慢，轉化率迅速下降，并在 2 秒時降至 3% 以下。通過上述可以看出，優化網站性能降低 LCP 時間可以帶來總體更高的轉化次數以及更多的收入。

您的網站與競爭對手相比如何？

借助 SpeedCurve Synthetic等綜合性能監控，您可以像在自己的網站上一樣在任何其他網站上運行頁面速度測試。這意味著您可以獲得所有相同、豐富、出色的數據、屏幕截圖和幻燈片以供比較。

您的競爭性基準測試儀表板還可以讓您深入研究并關注頁面構建等內容。那個頁面的渲染速度是您的兩倍……他們做了什么不同的事情？他們有更多的 JavaScript 嗎？更少？您是否發出了 400 個請求，而他們只發出了 80 個？這里就是找出答案的地方。

Page Speed Benchmarks 是一個面向公眾的儀表板，可向您顯示美國、歐盟、英國和日本領先零售商的當前績效快照。

性能優化入門

要提供出色、快速的在線體驗，首先要問自己兩個問題：

• 什么原因導致我的頁面對于用戶來說顯得比較慢？

• 我能做什么呢？

好消息是，導致購物者頁面速度變慢的大多數問題都發生在您的頁面上，這意味著您可以控制它們。以下是零售網站上最常見的性能問題的概述，以及如何跟蹤和修復這些問題。

什么原因導致你的網頁速度變慢？絕大多數性能問題都是由四個原因引起的：

• 第三方，例如追蹤器和分析器

• 樣式表

• 自定義字體

• 頁面大小，特別是圖像大小

第三方腳本

如今，典型的零售網頁可以包含多達 75 個第三方腳本，例如跟蹤器和分析信標。

第三方通過增加轉化率（通過定位信標）和以前所未有的方式幫助您了解用戶（通過分析標簽）增加了大量價值，因此它們不會很快消失。但它們可以顯著影響您的頁面呈現方式（甚至是否呈現！）。

你可以做什么：監控第三方的表現

首先采取積極主動的方式了解第三方可能造成的任何潛在性能損害。

您無法修復未測量的內容。這就是我們在 SpeedCurve 中創建 專用第三方儀表板的原因 ，這樣您就可以一目了然地了解第三方的表現，跟蹤單個腳本并 為其設置性能預算。

在您了解第三方腳本的性能后，您可以使用歷史數據與供應商制定 SLA。

案例研究： 瑪莎百貨通過關注第三方內容徹底改變了業績

圖像和頁面大小

雖然頁面大小并不總是與較慢的用戶體驗相關，但通常情況下確實如此。未經優化的大型圖像往往是罪魁禍首。

除了優化圖像（以確保您不會向用戶提供 1MB 的資源！）之外，您還應確保最重要的圖像（例如主要產品圖像）盡早呈現。

您可以做什么：為與圖片相關的指標創建性能預算

性能預算和警報是應對性能下降的好方法。性能預算始于您的團隊（每個人：營銷人員、設計師和開發人員）就用戶體驗和網站速度的原則達成一致。首先，您需要確定要跟蹤哪些指標，然后根據過去的表現設置閾值。

對于圖像，需要考慮以下一些指標：

• 最大內容繪制 – 這是視口中最大視覺元素（圖像或視頻）的大小。LCP 是 Google 的 核心網絡指標之一，它是 Google 搜索排名算法的一組指標，因此跟蹤它是個好主意。

• 圖片大小 – 頁面上所有圖片的總大小。這是一種一目了然地查看頁面中是否添加了未優化的大型圖片的好方法。

• 圖像請求——頁面上的圖像總數。

案例研究： Zillow 如何在預算有限的情況下變得更大、更快、更具吸引力

樣式表

樣式表是現代網頁的一大福音。它們解決了從瀏覽器兼容性到設計維護和更新等大量設計問題。如果沒有樣式表，我們就不會擁有響應式設計等偉大的東西。

然而，執行不當的樣式表可能會造成一系列性能問題。這些問題包括 CSS 下載和解析時間過長，以及樣式表放置不當導致頁面其余部分無法呈現。

你可以做什么：了解哪些樣式表可能會阻止你的頁面渲染

再次強調，你無法修復你沒有測量的東西。你的綜合監測工具可以告訴你：

• 我的頁面中有多少個樣式表，其中有多少個阻止頁面呈現？

• 這個數字是上升了還是下降了？

• CSS 請求有多大？

• 樣式表對我的每個第三方的表現如何？

自定義字體

自定義字體讓設計師能夠前所未有地控制設計中使用的字體。這種控制欲望是自定義字體流行度飆升的原因。但這種流行度的背后是性能的代價。

有些字體需要大量的 CSS 代碼，而其他字體則需要大量 JavaScript 或外部托管 - 所有這些都會大大減慢頁面渲染速度。

你可以做什么：跟蹤字體的大小和渲染速度

除了跟蹤字體大小和請求數量之外，您還可以使用 SpeedCurve 來測量第一個 H1 元素何時完成渲染。（在 SpeedCurve 中，我們將此指標稱為 Hero H1。它是我們捕獲的三個 Hero 渲染時間之一 。）如果您的網站使用自定義字體，則這些字體很可能會應用于 H1 副本，這使得此指標成為衡量自定義字體渲染速度的有效方法。

與我們為您跟蹤的所有其他指標一樣，您可以 為任何與字體相關的指標創建性能預算，并在它們超出閾值時收到警報。

案例研究： NerdWallet 使用 H1 Render 指標幫助將字體加載速度提高了 30%