在单个 WordPress 博客上修复 Core Web Vitals 很容易。而要在拥有 400 万个 SKU 的无头 React 应用上修复它们，则是一场噩梦。本指南提供...
在单个 WordPress 博客上修复 Core Web Vitals 很容易。而要在拥有 400 万个 SKU 的无头 React 应用上修复它们，则是一场噩梦。本指南提供了一种程序化、可扩展的方法，用于在企业级架构中解决 LCP、INP 和 CLS 问题。
诊断清单
在写任何一行代码之前，你必须先定位故障点。使用 Chrome 用户体验报告（CrUX）数据，而不是 Lighthouse 实验室数据，来诊断Core Web Vitals性能。
- LCP 故障：LCP 元素是图片还是文本？它是否通过 JS 动态注入？
- INP 故障：是哪个第三方脚本在用户交互期间阻塞了主线程？
- CLS 故障：动态注入的广告是否缺少预留的 CSS 高度？
修复方案：预加载关键资源（LCP）
最常见的 LCP 瓶颈是发现较晚的主视觉图。浏览器必须先下载 HTML、解析 CSS 并执行 JS，之后才意识到需要获取主横幅图。通过在 `
` 中注入 preload 提示来解决这个问题。
<!-- Preload the LCP hero image -->
<link rel="preload" as="image" href="/images/hero-desktop.webp"
imagesrcset="/images/hero-mobile.webp 480w, /images/hero-desktop.webp 1200w"
imagesizes="100vw">
修复方案：延迟加载非关键 JS（INP）
Interaction to Next Paint（INP）会被严重的主线程阻塞毁掉。绝不要同步加载分析脚本、聊天组件或追踪像素。
<!-- BAD: Blocks the main thread --> <script src="https://third-party.com/heavy-tracker.js"></script> <!-- GOOD: Executes after parsing --> <script defer src="https://third-party.com/heavy-tracker.js"></script>
监测影响
部署之后，不要指望 Search Console 里立刻出现结果。该数据是一个滚动 28 天窗口、每日更新——因此你今天上线的一项改动，要大约 30 天后才会被完全反映出来：
"Chrome User Experience Report（也称为 Chrome UX Report，简称 CrUX）是一个数据集，反映了真实的 Chrome 用户在网络热门站点上的实际体验。"
— Chrome for Developers，CrUX 文档
在报告你技术实现的 ROI 之前，请至少等待 4 周。