"前端体验优化：Core Web Vitals 的指标与落地"

指标与阈值LCP（最大内容渲染）应 ≤ 2.5s；INP（交互到下一次绘制）应 ≤ 200ms；CLS（累计布局偏移）应 ≤ 0.1［参考1,2,4］。Search Console 的 Core Web Vitals 报告基于 CrUX 实测数据，按设备与 75 百分位进行判定［参考3］。优化路径LCP：降低 TTFB、内联关键 CSS、延迟非关键资源、图像优化（尺寸/格式/WebP/预加载）。INP：减少主线程阻塞（代码拆分、延迟加载）、优化事件处理、尽量避免长任务、使用请求空闲回调与并发渲染。CLS：为媒体/广告预留尺寸、避免动态插入未设尺寸的组件、稳定字体加载（font-display）。监测与工具使用 `web-vitals` SDK 或 RUM 平台上报指标；结合 Lighthouse、PageSpeed、Search Console 做实验室与线上融合评估。参考与验证［参考1］web.dev：Core Web Vitals 指标与阈值（LCP≤2.5s、INP≤200ms、CLS≤0.1）：https://web.dev/articles/vitals［参考2］web.dev：Core Web Vitals 阈值的定义依据（INP 200ms）：https://web.dev/articles/defining-core-web-vitals-thresholds［参考3］Google 支持：Search Console 的 Core Web Vitals 报告（CrUX 实测与 75 百分位）：https://support.google.com/webmasters/answer/9205520?hl=zh-Hans［参考4］Google Developers：Core Web Vitals 概览与阈值：https://developers.google.com/search/docs/appearance/core-web-vitals关键词校验关键词围绕 Core Web Vitals 指标与优化，与正文一致。