Core Web Vitals指标优化

Core Web Vitals 是 Google 用于衡量网页用户体验的一组真实指标，包括加载性能、交互性和视觉稳定性。
优化这三项指标，不仅能改善用户访问体验，也会影响网站在搜索结果中的表现。
本文面向零基础站长，从检测到修复，给出可落地的操作步骤。

先检测：获取当前指标数据

优化前需要知道问题出在哪里。
推荐两种免费检测方式。

1. PageSpeed Insights 在线检测

访问 https://pagespeed.web.dev/，输入你的网址。
报告会分别显示移动端和桌面端的核心指标得分，以及具体的优化建议。
重点关注带红色或橙色标记的指标。

2. 使用 Lighthouse 命令行

如果服务器已安装 Node.js，可以通过 npm 安装 Lighthouse：

npm install -g lighthouse
lighthouse https://你的域名 --view

运行后会生成 HTML 报告，包含每个指标的详细诊断。

结果解读：

• LCP（最大内容绘制）：理想值小于 2.5 秒，超过 4 秒为差。
• FID（首次输入延迟）：理想值小于 100 毫秒，超过 300 毫秒为差。
• CLS（累积布局偏移）：理想值小于 0.1，超过 0.25 为差。

优化 LCP：让主要内容更快出现

LCP 衡量的是页面中最大元素（通常是主图或大标题）的加载时间。
优化方向是减少资源加载时间和服务器响应时间。

1. 压缩图片并启用懒加载

使用 WebP 格式替代 JPEG/PNG，可减少 30% 以上体积。
在 Nginx 配置中添加：

location ~* \.(jpg|jpeg|png|gif)$ {
    add_header Vary Accept;
    if ($http_accept ~* "webp") {
        rewrite ^(.*)\.(jpg|jpeg|png|gif)$ $1.webp last;
    }
}

同时，为图片添加 loading="lazy" 属性，但首屏主图不要懒加载。

2. 启用服务器缓存与 CDN

在宝塔面板中，进入「网站」-「设置」-「配置文件」，添加浏览器缓存规则：

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

如果使用 CDN，确保静态资源走 CDN 加速。

3. 减少服务器响应时间

开启 Nginx 的 Gzip 压缩：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
gzip_min_length 1000;

改善 FID：降低交互延迟

FID 衡量用户首次点击按钮或链接时，浏览器响应的速度。
主要瓶颈是长任务阻塞主线程。

1. 拆分长 JavaScript 任务

使用 Chrome DevTools 的 Performance 面板录制交互过程，找出耗时超过 50ms 的任务。
将大段 JS 拆分为多个小函数，或使用 setTimeout 分片执行。

2. 延迟加载非关键脚本