前言
2026 年 Core Web Vitals 已成为 SEO 排名的重要因素。本文系统讲解如何优化三大核心指标。
一、LCP（最大内容渲染时间）
目标：< 2.5s。优化方向：
1. 图片预加载：<link rel="preload" as="image" href="...">
2. 服务端渲染（SSR）首屏
3. CDN 加速静态资源
4. 图片格式用 webp / avif
二、INP（交互到下一次绘制）
目标：< 200ms。优化方向：
1. 减少长任务（>50ms 的 JS 任务）
2. 使用 requestIdleCallback 推迟非紧急任务
3. 防抖节流用户输入
4. 虚拟列表渲染大数据
三、CLS（累计布局偏移）
目标：< 0.1。优化方向：
1. 图片/视频指定 width 和 height
2. 字体预加载，避免 FOUT
3. 避免 DOM 动态插入导致偏移
四、实战工具
1. Lighthouse - 完整审计
2. PageSpeed Insights - 真实用户体验数据
3. Chrome DevTools Performance - 详细火焰图
总结
性能优化不是一次性的，需要持续监控和迭代。Core Web Vitals 是用户真实体验的体现。
