Core Web Vitals优化指南

Core Web Vitals是Google排名的关键因素，本文详解LCP、FID、CLS三大指标的优化方法。

指标	含义	良好	需改进	差
LCP	最大内容渲染	<2.5s	2.5-4s	>4s
FID	首次输入延迟	<100ms	100-300ms	>300ms
CLS	累积布局偏移	<0.1	0.1-0.25	>0.25

Largest Contentful Paint，测量页面主要内容加载时间

server {
    # 开启gzip
    gzip on;
    gzip_types text/plain application/javascript text/css image/svg+xml;

    # 启用缓存
    expires 30d;
    add_header Cache-Control "public, immutable";
}

/* 关键CSS内联 */
<style>
/* 首屏关键样式 */
.hero { background: #333; color: #fff; }
.header { padding: 1rem; }
</style>

<!-- 使用现代格式 -->
<img src="image.webp" alt="描述">

<!-- 响应式图片 -->
<img src="small.jpg" srcset="small.jpg 500w, large.jpg 1000w" alt="">

<!-- 懒加载 -->
<img src="image.jpg" loading="lazy" alt="">

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

First Input Delay，首次输入延迟，测量用户首次交互的响应时间

// 延迟加载非关键JS
<script src="analytics.js" defer></script>

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

// 分割大任务
function processItems(items) {
  let i = 0;
  function step() {
    while(i < items.length && performance.now() < 50) {
      process(items[i++]);
    }
    if (i < items.length) {
      requestIdleCallback(step);
    }
  }
  step();
}

<!-- 第三方脚本延迟 -->
<script src="chat-widget.js" async defer></script>

Cumulative Layout Shift，累积布局偏移，测量页面视觉稳定性

<!-- 指定宽高 -->
<img src="image.jpg" width="800" height="600" alt="">

<!-- CSS宽高比 -->
.card img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

// 避免插入内容导致布局偏移
// 预先留出空间
const container = document.querySelector('.container');
const spacer = document.createElement('div');
spacer.style.height = '200px';
container.appendChild(spacer);

// 加载完成后替换

工具	用途
PageSpeed Insights	综合测试
Chrome DevTools	本地分析
Lighthouse CI	持续监控
Search Console	现场数据

• [ ] 优化服务器响应时间
• [ ] 启用gzip/brotli压缩
• [ ] 使用CDN
• [ ] 优化图片（WebP、懒加载）
• [ ] 代码分割
• [ ] 延迟第三方脚本
• [ ] 图片设置尺寸
• [ ] 字体优化

通过优化Core Web Vitals，不仅提升用户体验，还能获得Google搜索排名提升。