發布日期：2026 年 6 月 24 日
Nuvemshop (在拉丁美洲西班牙語地區稱為 Tiendanube) 是該地區首屈一指的電子商務平台，為超過 18 萬家網路商店提供服務。商家可透過多種主題和動態內容配置自訂店面，因此確保網頁在各種情況下都能快速載入，會帶來獨特的技術挑戰。
- Largest Contentful Paint (LCP)健康狀態提升 68%，從 57% 提高到 96%，這反映出商店在為實際使用者轉譯可視區域頂端內容時，出現了重大轉變。
- 網站使用體驗核心指標通過率從 48% 提高至 72%， 也就是說，現在有將近 3/4 的商店達到 Google 的基本成效 門檻。
- 購物參與度顯著提升：分析 2025 年 1 月和 2026 年 1 月在巴西上線的同一批商店後，我們發現 Google 自然搜尋的行動訪客：
- 轉換率 (工作階段到付費訂單) 提高 8.9%
- 購物車參與度 (工作階段至購物車) 提升 8.4%
- 行動裝置的增幅最大，這與 LCP 改善幅度最大的裝置一致。
這些結果與 Google 委託 Deloitte 進行的研究 (37 個品牌共 3,000 萬個以上的工作階段) 一致，該研究發現載入速度每提升 0.1 秒，零售業的轉換率就能提高 8.4%，證實我們的投資方向正確。
挑戰：在動態電子商務版面配置中偵測 LCP
2025 年初，只有 48% 的商店通過 Core Web Vitals 門檻，57% 的商店擁有健康的 LCP 分數。我們最初的假設是圖片權重或伺服器延遲。我們錯了。
我們對數千家商店進行 PageSpeed Insights 分析後發現，商家可透過平台動態安排首頁區塊：輪播、橫幅、產品格線和自訂模組可依任意順序顯示。
這項彈性措施帶來了意想不到的問題：系統不一定會將正確的元素識別為 LCP。在設有輪播的商店 (占店面 85%)，視窗中較下方的橫幅有時會標示為 LCP，而非第一個輪播圖片，具體情況取決於頁面在不同螢幕和裝置上的顯示方式。這表示我們的最佳化工作並未達到預期效果：我們最佳化的元素並非實際的 LCP 元素。
與一般 SaaS 平台不同，我們無法只修正首頁。我們需要一個解決方案，適用於所有可能的主題設定、區段排列方式和商家自訂項目，且不會破壞現有商店或限制創作自由。
動態版面配置如何影響 LCP 元素選取
透過 PageSpeed Insights 分析和實際使用者監控，我們發現當元素對瀏覽器的 LCP 偵測演算法顯示時，輪播和橫幅上的 CSS 轉場效果會延遲。雖然使用者認為輪播內容是第一個載入的元素，但瀏覽器有時會將第二個區段中的橫幅標示為 LCP 元素，因為該元素的顯示不會受到轉場效果延遲。
我們找出三項根本原因：
- 元素被視為可見時，CSS 轉場效果會延遲，導致 LCP 偵測推送到錯誤的影格。
- 系統已對可視區域頂端的圖片套用延遲載入功能，這些圖片需要立即載入。
- 缺少優先順序信號表示系統不會優先載入最重要的圖片。
我們也發現，LCP 測量結果有很大一部分來自類別和產品頁面，而不只是首頁，這表示我們需要針對所有高流量頁面類型，一致地套用修正措施。
實作：大規模修正三種根本原因
找出原因後，修正方式就相當簡單。我們在所有核心主題和網頁類型中一致套用這些原則，但每個原則都需要仔細評估範圍，以免產生新問題。
- 已移除第一個位置區段的 CSS 轉場效果。網頁上最先顯示的區塊現在會立即轉譯，確保瀏覽器偵測到這些區塊是 LCP 候選項目，不會出現人為延遲。
從視埠頂端的圖片中移除延遲載入。對於第一個區段中的圖片，我們會有條件地移除
loading="lazy"，以消除資源載入延遲。我們謹慎地將這項功能限制在第一位置區段的第一張圖片：<!-- Before --> <img src="slide-1.webp" loading="lazy" alt="Featured product"> <!-- After --> <img src="slide-1.webp" alt="Featured product">新增明確優先順序信號。加入
fetchpriority="high"後，我們就能告訴瀏覽器的預先載入掃描器，LCP 圖片是優先順序最高的資源，讓瀏覽器在版面配置和算繪完成前，就能更快找到並下載圖片。我們新增了驗證邏輯，確保優先順序信號只會在元素實際位於可做為最大內容繪製候選項的位置時套用。如果為太多圖片新增fetchpriority="high"，反而會適得其反，因為如果所有項目都是高優先順序，就沒有優先順序可言。<!-- Before --> <img src="slide-1.webp" alt="Featured product"> <!-- After --> <img src="slide-1.webp" fetchpriority="high" alt="Featured product">透過邊緣快取縮短延遲時間。快取可有效縮短載入時間，但在電子商務中，快取會帶來實際風險：提供過時的價格和庫存資料會直接影響顧客信任度和收益。我們謹慎地監控業務指標和成效資料，盡可能提高快取命中率，同時確保不會快取可能損害商家或買家體驗的內容。
影響和結果：LCP 改善幅度從 57% 到 96%
| 指標 (2025 年 1 月至 2026 年 1 月) | 相對改善 |
|---|---|
| LCP (良好) | +68% (57% 至 96%) |
| 網站體驗核心指標 (通過率) | +50% (48% 至 72%) |
| 轉換率 (工作階段到付費訂單) - 行動裝置 Google 自然搜尋 | +8.9% |
| 購物車參與度 (工作階段到購物車) - 行動裝置 Google 自然搜尋 | +8.4% |
這些改善措施讓 Nuvemshop 和 Tiendanube 成為巴西、阿根廷和墨西哥排名第一的電子商務平台。
重點回顧和事後檢討
Nuvemshop 的架構可高度自訂，因此我們無法採用標準的優化應對手冊。真正的問題並非圖片權重或伺服器延遲： 而是由於 CSS 轉場效果、缺少優先順序信號，以及套用至可視區域頂端圖片的延遲載入功能，導致瀏覽器選取了非預期的元素做為 LCP。
瞭解根本原因後，修正方式就很簡單：從第一個位置的區段移除轉場效果、從檢視區塊頂端的圖片移除延遲載入，並新增明確的優先順序信號。我們在所有核心主題、頁面類型和平台上的 18 萬多個商店中，都一致套用這項做法。
結果不言而喻：LCP 及格率從 57% 提高至 96%，整體 Core Web Vitals 及格率從 48% 提高至 72%，商家也獲得顯著成效：轉換率提高 8.9%，行動裝置上的購物車參與度提高 8.4%。快速的店面不僅是技術成就，還能直接帶動商家成功。