Shopify 首屏大图怎么预加载才提升 LCP

现象#

Lighthouse 显示 LCP 4.5 秒，元素是首屏 banner 图，图片本身加载并不慢，但发现得太晚。

原因#

• 图片写在 CSS background-image 里，浏览器要到解析 CSS 后才发现
• 图片标签在 DOM 靠后，或由 JS 注入
• 加了 loading="lazy"，首屏图被延迟加载
• 没有 preload 与 fetchpriority 提示

处理步骤#

1. 首屏图改成 <img> 并加 fetchpriority="high"，去掉 lazy
2. 在 <head> 里 <link rel="preload" as="image" href="..." imagesrcset="...">
3. 用 image_url 生成与展示尺寸匹配的宽度，避免下载 2000px 大图
4. 确认 CDN 返回 cache-control 长缓存，重复访问命中缓存

验收标准#

Lighthouse LCP 降到 2.5 秒内，Network 面板中首屏图在 HTML 解析早期就开始下载。