前端性能优化：Core Web Vitals 实战指南

什么是 Core Web Vitals？

Google 定义的三个核心用户体验指标：

1. LCP (Largest Contentful Paint)：最大内容绘制，目标 < 2.5s
2. FID (First Input Delay)：首次输入延迟，目标 < 100ms
3. CLS (Cumulative Layout Shift)：累计布局偏移，目标 < 0.1

LCP 优化

问题原因

• 慢速服务器响应
• 渲染阻塞资源
• 资源加载时间长

解决方案

<!-- 预加载关键资源 -->
<link rel="preload" href="/hero-image.jpg" as="image">

<!-- 优化图片 -->
<img src="image.webp" alt="" loading="eager">

<!-- 使用 CDN -->
<!-- 启用服务器缓存 -->

FID 优化（现改用 INP）

减少 JavaScript 执行时间

// 代码分割
import(./heavy-module).then(module => {
  module.init();
});

// Web Worker 处理计算密集型任务
const worker = new Worker("worker.js");

延迟非关键 JS

<script src="analytics.js" defer></script>

CLS 优化

预留空间

.img-container {
  aspect-ratio: 16 / 9;
}

/* 或显式设置尺寸 */
img {
  width: 800px;
  height: 450px;
}

避免动态插入内容

// ❌ 糟糕：页面加载后插入
setTimeout(() => insertAd(), 1000);

// ✅ 更好：预留广告位
<div class="ad-slot" style="min-height: 250px;"></div>

测量工具

• PageSpeed Insights
• Lighthouse
• Chrome DevTools
• Web Vitals 扩展

总结

Core Web Vitals 直接影响 SEO 排名和用户留存。持续监控和优化这些指标是现代前端开发的必备技能。