发布时间：2026 年 6 月 24 日
Nuvemshop（在讲西班牙语的拉丁美洲称为 Tiendanube）是该地区领先的电子商务平台，为超过 18 万家网店提供支持。随着商家通过多种主题和动态内容安排来定制其店面，确保在各种情况下都能快速加载页面带来了独特的技术挑战。
- Largest Contentful Paint (LCP) 的健康度在一年内从 57%提高到 96%，提升了 68%，这反映出商店在视口顶部为真实用户渲染内容的方式发生了重大转变。
- Core Web Vitals达标率从 48% 跃升至 72%，这意味着现在有近四分之三的商店达到了 Google 的基准性能阈值。
- 购物互动度显著提升：通过分析 2025 年 1 月和 2026 年 1 月都在运营的同一批巴西商店，我们发现来自 Google 自然搜索的移动设备访问者表现出以下变化：
- 转化率（从会话到付费订单）提高了 8.9%
- 购物车互动率（从会话到购物车）提高了 8.4%
- 移动设备带来的增幅最大，这与 LCP 改进最为显著的平台一致。
这些结果与 Google 委托德勤开展的研究（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 图像是最高优先级的资源，让浏览器能够在布局和渲染完成之前更早地发现并下载该图像。我们添加了验证逻辑，以确保只有当元素实际位于可能成为 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%） |
| Core Web Vitals（通过率） | +50%（48% 至 72%） |
| 转化率（会话到付费订单）- 移动设备 Google 自然搜索 | +8.9% |
| 购物车互动（从会话到购物车）- Google 自然搜索（移动设备） | +8.4% |
这些改进使 Nuvemshop 和 Tiendanube 成为巴西、阿根廷和墨西哥排名第一的电子商务平台。
要点总结和事后分析反思
Nuvemshop 的高度可定制架构意味着我们无法依赖标准优化 playbook。真正的问题不是图片大小或服务器延迟时间，而是浏览器由于 CSS 过渡、缺少优先级信号以及对视口顶部的图片应用了延迟加载，而选择了意外的元素作为 LCP。
在了解根本原因后，修复过程非常简单：从第一位置部分移除过渡效果，从视口顶部的图片中移除延迟加载，并添加明确的优先级信号。我们已将此标准一致地应用于所有核心主题、网页类型以及我们平台上的 18 万多家商店。
结果不言而喻：LCP 通过率从 57% 提高到 96%，整体 Core Web Vitals 通过率从 48% 提高到 72%，商家也取得了可观的成效：转化率提高了 8.9%，移动设备上的购物车互动度提高了 8.4%。快速的店面不仅是一项技术成就，还能直接推动商家的成功。