发布时间：2026 年 6 月 24 日
Nuvemshop（在讲西班牙语的拉丁美洲地区称为 Tiendanube）是该地区领先的电子商务平台，为超过 18 万家网店提供支持。由于商家会通过多种主题和动态内容排列方式自定义其店面，因此确保在这些多样化的店面中实现快速网页加载会带来独特的技术挑战。
- Largest Contentful Paint (LCP) 运行状况提升了 68%，在一年内从 57% 提升到了 96%，这反映了商店在视口顶部为真实用户呈现内容的方式发生了重大转变。
- Core Web Vitals 达标率从 48% 跃升至 72%，这意味着近 3/4 的商店现在都达到了 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" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"添加了显式优先级信号。通过添加
fetchpriority="high"，我们告诉浏览器的预加载扫描器，LCP 图片是优先级最高的资源，让它在布局和渲染完成之前更早地被发现和下载。我们添加了验证逻辑，以确保仅当元素实际处于可能成为 LCP 候选元素的位置时，优先级信号才会应用：向过多图片添加fetchpriority="high"会适得其反，因为如果所有内容都是高优先级，那么就没有什么内容是高优先级。<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- 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 的架构高度可定制，这意味着我们无法依赖标准的优化策略。真正的问题不在于图片权重或服务器延迟，而在于浏览器会因 CSS 过渡、缺少优先级信号以及对视口顶部的图片应用延迟加载，而选择意外元素作为 LCP。
在了解根本原因后，修复过程非常简单：从首位版块中移除过渡效果，从视口顶部的图片中移除延迟加载，并添加明确的优先级信号。我们在所有核心主题、页面类型以及平台上的 18 万多家商店中始终如一地应用了这一原则。
结果不言自明：LCP 通过率从 57% 提高到 96%，整体 Core Web Vitals 通过率从 48% 跃升至 72%，商家也看到了可衡量的收益：转化率提高了 8.9%，移动端购物车互动度提高了 8.4%。快速的店面不仅是一项技术成就，还能直接推动商家取得成功。