"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、减少同步布局与长任务。验证要点指标采集基于稳定浏览器实现与库封装；在真实流量中对照监控平台验证成效。通过性能面板与采样数据检查优化前后差异，避免单次实验导致偏差。