Shopify LCP 元素是大图怎么优化

现象#

移动端 LCP 4 秒以上，Lighthouse 指出首屏 banner 图就是 LCP 元素，图已经压缩过仍然慢。

原因#

• 首屏图用 CSS background-image 输出，无法生成 srcset，移动端下载的是桌面大图
• 图片没加 fetchpriority="high"，与下方十几张图抢带宽
• 使用了 loading="lazy"，浏览器推迟到布局后才开始下载
• 图片经应用或外链 CDN 二次处理，首字节比 Shopify CDN 慢

处理步骤#

1. 把首屏图改成 {{ image | image_url: width: 1600 | image_tag: fetchpriority: 'high', loading: 'eager' }}
2. 为移动端提供 750/1080 两档宽度，用 widths 与 sizes 让浏览器按视口挑选
3. 删除该图上的 loading="lazy"，并把它放在 HTML 靠前的位置
4. 在 <head> 里对该图加 rel="preload"，避免 CSS 解析后才被发现
5. 用 PageSpeed 的「图像传递」与「LCP 分解」两项确认下载延迟已降到 200ms 以内

验收标准#

移动端 LCP 降到 2.5 秒以内；Lighthouse 的 LCP 分解中「加载延迟」占比明显下降，首屏图请求优先级为 Highest。