Core Web Vitals优化指南

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

Core Web Vitals概述

LCP优化

什么是LCP

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

优化方法

1. 优化服务器响应时间

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

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

2. 优化CSS

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

3. 优化图片

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

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

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

4. 预加载

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

FID优化

什么是FID

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

优化方法

1. 减少JavaScript执行

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

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

2. 分解长任务

// 分割大任务
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();
}

3. 优化第三方脚本

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

CLS优化

什么是CLS

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

优化方法

1. 设置图片尺寸

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

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

2. 预留广告位

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

3. 字体加载优化

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

4. 动态内容

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

// 加载完成后替换

测量工具

优化检查清单

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

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