每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 1 个月前

全站图片都开了懒加载

2 个回答 3,133 次浏览 性能与 Core Web Vitals 最后活跃 1 个月前
33

为了提速,把所有图片都加了 loading="lazy",结果 LCP 变差了。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
1 个月前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
53

先把判断放在前面:懒加载会推迟首屏图片的加载,LCP 反而变慢。

1处理顺序

  1. 首屏图片用 loading="eager" 加 fetchpriority="high"。
  2. 只有视口外的图片才用懒加载。
  3. 用 sizes 与 srcset 确保加载正确尺寸。
  4. 折叠线附近的图片可以预加载,不一定要懒加载。
  5. 改完对比 LCP 前后数据。
验收:首屏图立即加载,LCP 改善,总加载量下降。
风 风格技术团队 回答于 1 个月前
22

懒加载不是「全站开关」,是「首屏之外才用」的策略。这个误解非常普遍。

泽 阿泽 · 前端工程师 · 1 个月前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu