Web Vitals INP/LCP/CLS 监控与优化实践

原生监控（LCP/CLS）：// LCP new PerformanceObserver((list) => { const entries = list.getEntries() const last = entries[entries.length - 1] console.log('LCP', last.startTime, last.element) }).observe({ type: 'largest-contentful-paint', buffered: true }) // CLS let cls = 0 new PerformanceObserver((list) => { for (const e of list.getEntries()) { if (!e.hadRecentInput) cls += e.value } console.log('CLS', cls) }).observe({ type: 'layout-shift', buffered: true }) web-vitals 集成（INP/LCP/CLS）：import { onINP, onLCP, onCLS } from 'web-vitals' onINP(console.log) onLCP(console.log) onCLS(console.log) 优化要点：LCP：关键资源预加载、服务器渲染、减少阻塞脚本INP：避免长任务，切分交互逻辑，使用 `scheduler.postTask`CLS：预留尺寸、避免懒加载无尺寸媒体、延迟插入广告