如何降低PageSpeed Insights的LCP数值？常规优化后无改善怎么办

1. 先定位真实LCP元素
   打开Chrome浏览器DevTools的「Performance」面板，选择移动端预设跑一次完整的页面加载测试，在时间线里找到标记为LCP的节点，hover即可看到当前页面实际触发LCP的元素。你移除视频后评分无变化，基本可以确定当前LCP根本不是你以为的视频，大概率是未优化的背景图、大字号文本块或者其他首屏资源。
2. 排查加载优先级错误问题

• 禁止给LCP元素添加loading="lazy"属性：很多人会批量给所有图片加懒加载，反而导致首屏最大的元素被推迟加载，直接拉低LCP数值
• 给LCP资源添加预加载标记：如果LCP是图片/字体类资源，在页面head中添加对应preload规则，让浏览器优先分配带宽加载该资源
• 清理首屏阻塞资源：用DevTools的「Coverage」面板统计首屏实际用到的CSS/JS占比，把未用到的冗余代码拆分为异步加载，避免大量无用的同步JS/CSS阻塞页面渲染

3. 检查资源配置疏漏

• 确认图片是否使用WebP/AVIF等现代压缩格式：同等画质下体积比JPG/PNG小50%以上
• 检查图片sizes属性是否配置正确：如果属性值和页面实际展示尺寸不匹配，浏览器会错误加载远超实际需要的大尺寸图片
• 确认CDN缓存规则生效：如果静态资源缓存时间设置过短，用户每次访问都需要重新从源站拉取资源，会直接拖慢所有静态资源加载速度

4. 排查服务端响应速度
   如果站点TTFB（首字节响应时间）超过200ms，哪怕前端优化做全，LCP也不可能达标，先优化服务端响应逻辑、缓存静态页面，把TTFB降到200ms以内再做后续优化。

以上几个是最容易被遗漏的基础优化点，排查修正后LCP基本都会有明显降幅，不需要一开始就逐毫秒抠细节。

内容的提问来源于stack exchange，提问作者Daniel