64
移动端 LCP 4.2 秒，PageSpeed 指出 LCP 元素是首页 banner 图，图片已经压缩过了。
已采纳 · 提问者确认解决
35
先把判断放在前面：LCP 由四段时间组成：TTFB、资源加载延迟、资源加载时长、渲染延迟。图片压缩只解决第二段时间。
1处理顺序
- 用
fetchpriority="high"标记首屏图，让浏览器优先加载。 - 不要给首屏图加
loading="lazy"，这会直接拖慢 LCP。 - 用
image_url输出多尺寸srcset，避免下载桌面大图。 - 检查 TTFB，超过 600ms 说明服务端或 CDN 有问题。
- 给图片容器设置固定宽高比，消除渲染延迟。
liquid
{%- comment -%} 首屏图：显式宽度 + 高优先级 + 多尺寸 {%- endcomment -%}
{{ section.settings.image
| image_url: width: 1600
| image_tag:
widths: '400,600,800,1200,1600',
sizes: '(max-width: 749px) 100vw, 1200px',
fetchpriority: 'high',
loading: 'eager',
width: 1200, height: 700,
alt: section.settings.image.alt }}验收：移动端 LCP 降到 2.5 秒以内，CrUX 数据进入良好区间。
风
风格技术团队 回答于 2 个月前
