Web 性能优化实战：LCP 与 Core Web Vitals 指标提升方案
前端开发中 Web 性能优化直接决定用户留存。Core Web Vitals 三件套中 LCP（最大内容绘制）衡量首屏加载速度，目标是 2.5 秒内；INP 衡量交互延迟，目标是 200 毫秒内；CLS 衡量布局稳定性，目标是 0.1 以内。本文针对 LCP 展开：从图片加载、资源优先级、预连接、关键 CSS 四个方向给出可直接落地的优化手段，用 Performance 面板验证前后效果。
<!-- 首屏关键资源预加载 -->
图片加载优化与 LCP 元素提速
LCP 元素通常是首屏图片。把 hero 图转成 AVIF 或 WebP 格式，体积比 PNG 降低 60% 以上；加 fetchpriority=”high” 让浏览器优先下载；用 srcset 按视口宽度返回合适尺寸，避免手机加载 2 倍大图。图片接口带宽不足时配合 CDN 边缘缓存，把命中率提到 95% 以上。视频背景这类资源首屏常被误判为 LCP 元，直接把视频首帧替换为 poster 图，可显著提前 LCP 时间。
关键 CSS 与渲染阻塞资源处理
CSS 文件阻塞渲染，体积越大 LCP 越晚。拆分为关键 CSS（首屏样式）与非关键 CSS（下方模块、字体、组件库样式），关键部分以内联 style 注入 HTML，非关键部分用 media="print" onload="this.media='all'" 延迟加载。第三方的字体、统计脚本、客服组件放在首屏渲染完成后再加载，用 dynamic import 或