Core Web Vitals 监控与优化实战

Core Web Vitals 监控与优化实战概述Core Web Vitals 包含 LCP（最大内容绘制）、CLS（累积布局偏移）与 INP（交互到下一次绘制）。本文给出稳定监测方案与优化清单，帮助团队持续改善站点体验。监控方案（web-vitals）import { onLCP, onCLS, onINP } from 'web-vitals'

function report(metric: any) {

navigator.sendBeacon('/analytics', JSON.stringify({

name: metric.name,

value: metric.value,

id: metric.id,

}))

}

onLCP(report)

onCLS(report)

onINP(report)

说明：`web-vitals` 基于标准 API 实现跨浏览器一致监测；用 `sendBeacon` 低开销上报，避免干扰主线程。原生 PerformanceObserver（可选）const po = new PerformanceObserver((list) => {

for (const entry of list.getEntries()) {

// 处理 'layout-shift' 等条目（仅示意）

}

})

po.observe({ type: 'layout-shift', buffered: true })

优化策略清单LCP：关键资源预加载（字体、首图）、服务器端渲染与压缩、减少阻塞脚本。CLS：为图片与广告预留占位、避免动态注入影响布局、稳定字体加载（`font-display: swap`）。INP：事件处理去抖与分片、昂贵计算移至 Web Worker、减少同步布局与长任务。验证要点指标采集基于稳定浏览器实现与库封装；在真实流量中对照监控平台验证成效。通过性能面板与采样数据检查优化前后差异，避免单次实验导致偏差。