該團隊分析了到達網頁上 1,000 萬次造訪的資料，發現最大內容繪製與轉換率之間的關聯性很高。
Groupe Renault 是法國的跨國汽車製造商，在超過 130 個國家/地區提供服務。以 Renault 這類汽車集團來說，成效良好的品牌網站可提高使用者參與度和轉換率，進而帶動業績成長。其所有品牌網站的目標都是大規模提供最佳使用者體驗，同時仍能靈活地為本地化網站提供內容與功能。在這種情況下，效能監控對客戶體驗團隊而言是一大關鍵，他們負責開發和維護全球平台。
評估網站體驗核心指標對業務的影響
Google Analytics (分析) 的評估功能
Renault 與該公司的全球資料合作夥伴 545 合作，共同設立了 Web-vitals 資料庫。這個資料庫可準確反映使用者評估的所有網站體驗指標，並回報給其他 Google 工具。
以下分析展示了在 2020 年 12 月至 2021 年 3 月期間，使用這些工具四個月擷取的資料集。
最佳化的 LCP 與使用者參與度和業務指標密切相關
研究團隊發現，最大內容繪製 (LCP) 與良好跳出率和轉換率之間特別有密切的關係，如下圖所示。
這個資料集在四個月內針對 33 個國家/地區總共擷取了超過 1,000 萬次造訪，顯示 LCP 值較低的值與下列指標之間的關聯：
- 跳出率降幅
- 更多轉換 (已填寫待開發客戶表單)
有趣的是，由於網站是以單一頁面應用程式 (SPA) 的形式運作，所有措施都只會反映在到達網頁上。資料顯示，在 LCP 接近 1 秒之前，有助於將網站最佳化。該群組的品牌網站永遠都不能做得太好！
這個資料集不僅顯示 LCP 與業務指標之間的負相關性，還能強調成效最佳到達網頁之間的成效差異。以這個網站為例，如果 LCP 不到 1 秒，轉換次數就會大幅增加，跳出率也隨之下降。
Eja Rakotoarimanana、顧問、555
縮短 1 秒的 LCP 可能導致跳出率降低 14 個百分點 (ppt)，轉換率則提高 13%。
| 1 秒 LCP 改善 | 結果 |
|---|---|
| LCP 約 1 秒 | 轉換率提升 13% |
| LCP 小於 1.6 | - 14 個百分點跳出率 |
| LCP 大於 1.6 秒 | - 5 百分率 |
Renault 如何大規模最佳化網站體驗核心指標
自 2020 年初起，在該品牌的歐洲前 5 大市場中，快速載入 LCP (2.5 秒以下) 的訪客數量對 Renault 網域平均提升了 22 個百分點 (從 51% 提升到 73%)。
以下提供他們的做法。
針對 SPA 中心進行集中最佳化
從平台的角度來看，多年來成效一直是首要之務，並將網站體驗核心指標納入這些重點指標，因為這項的關鍵指標十分順利。中央團隊透過 Google Lighthouse 和 Chrome UX Report API 建立了全方位的監控解決方案，並在整個機構中建立效能文化。以下提供幾種最佳化單頁應用程式的策略：
- 伺服器端轉譯 (SSR)：確保快速首次顯示內容所需時間 (FCP)。
- 程式碼分割：只提供到達網頁所需的 JS 和 CSS 區塊 (用於改善 LCP 和 FID)。
- 具備高層級資源快取的 CDN (包含可排序及移除不必要的查詢參數的 Lambda@Edge)。這有助於避免 SSR 的缺點 (伺服器運算導致 TTFB 較慢)，並能將內容提供給最終使用者 (更佳的 TTFB 和 LCP)。
- 使用 brotli 最佳化壓縮來縮減程式碼大小。
- HTTP2 啟用要求和回應的多工處理功能。
- 使用支援 WebP 支援和
srcset和sizes屬性的回應式圖片，向使用者提供最合適的圖片大小和格式。 - 使用
IntersectionObserver和 FPO (小型 1 KB 縮圖) 延遲載入圖片、影片和 iframe。 - 移除封鎖指令碼並調整瀏覽器目標的轉譯作業，以減少 JS 檔案大小 (減少不必要的 polyfill)。
- 縮減 Google 代碼管理工具容器的大小，只在必要時載入第三方指令碼。
- 減少自訂字型的數量、使用 woff/woff2 格式搭配 unicode-range 和
font-display:swap，藉此縮減字型檔案大小，並且盡快顯示文字 (即使尚無法使用自訂字型)。 - 預先載入主頁橫幅，這通常是 LCP 元素。
該團隊仍在努力改善日後的改善措施，例如：
- 伺服器推送，加快 CSS 推送速度，進而改善 FCP。(由於缺少 AWS 支援與淘汰提案，因此待命。
- 漸進式飲水，以改善 FID。
- ES6 模組支援：使用適用於新瀏覽器的 ES6 版本，提供更快速的體驗。
使用 SPA 方法有助於改善效能，因為當使用者切換不同網頁時，不需要重新載入整頁。話雖如此，現在 SPA 上的網站體驗核心指標評估方法可能會因為無法評估路徑轉換而出現負面影響。因此，系統不會將 UI 快取的因素納入考量，因此單一工作階段中頁面載入時間會比較快。而這也使得網站體驗核心指標與多網頁應用程式競爭對手網站進行比較，因為溫暖的快取，便會針對使用者在工作階段期間瀏覽的每個網頁上減少測量數據。詳情請參閱「網站體驗核心指標常見問題」一文。
Chrome 產品團隊目前正在調查這些已知限制。我們已推出新版 CLS 指標，以改善 SPA 的成效評估方式。
運作成效需要持續監控，因為各種技術團隊可能都會影響運作。即使 SPA 的評估方式有所限制，網站體驗核心指標仍讓我們能追蹤 Google 團隊採取的措施帶來的影響。希望在不久的將來，我們能將轉換過程納入考量！
Renault 技術主管 Cedric Bazureau
當地指南：以共同責任致力推廣成效最佳化
成效能以全球 (中央) 和地方性的方式傳達。公司團隊彙整了一系列當地內容擁有者應遵循的最佳做法。以下是這些規範的幾個範例：
- 將本機 Google 代碼管理工具容器最佳化，以提升網站效能。例如，有條件會觸發特定代碼。
- 你可以使用內部工具壓縮影片內容，或是將影片內容存放在 YouTube 等外部平台，藉此限制影片內容的大小。
- 請避免透過 Google 代碼管理工具上傳圖片。
深入瞭解我們的數位成效是確保品牌網站持續最佳化的關鍵。我們的客戶體驗團隊致力提供能對本地團隊帶來正面影響的全球平台，同時讓這些團隊制定指南和最佳做法，以維持高成效。
Renault 成效部門主管 Alexandre Perruche
總而言之，Renault 一直將網站效能視為首要考量，網站平台也會持續最佳化。同時評估網站體驗核心指標和業務指標，讓該機構以全球共同的責任來宣傳這個主題，而當地規範可讓團隊參與這項助益。