技术干货：Core Web Vitals 优化实战清单

从 LCP、INP 到 CLS，一份可直接落地的网页核心性能指标优化清单。

网页性能直接影响用户体验与搜索排名。Google 的 Core Web Vitals 已成为衡量页面体验的重要标准，而对国内站点而言，百度同样给出了类似的体验指标要求。

LCP（最大内容绘制）主要受首屏图片、字体与渲染阻塞资源影响。建议优先加载首屏主图并使用 fetchpriority="high"，对 Web 字体采用 font-display: swap，同时将关键 CSS 内联、非关键 CSS 异步加载。

INP（交互到下一次绘制）取代了原有的 FID，更关注交互后的响应速度。优化方向包括：拆分长任务、使用 requestIdleCallback 处理非紧急逻辑、避免在事件回调中执行重计算。

CLS（累积布局偏移）通常源于未指定尺寸的图片与动态插入的内容。所有图片务必显式声明 width / height，广告位与动态 Banner 预留固定容器高度。

此外，建议接入 RUM（真实用户监控）而非仅依赖实验室数据，因为真实网络环境与设备差异会显著影响指标表现。沐青澜运维监控云已内置上述指标的持续监测与告警能力。