网站速度优化：如何提升 Core Web Vitals

网站再好看，加载慢的话大多数访客也会关掉页面。根据 Google 的研究，加载超过 3 秒时 53% 的用户会离开，而且 Google 已把速度作为直接的排名因素。本指南用通俗的方式解释 Core Web Vitals，并逐步介绍真正有效的优化方法。

什么是 Core Web Vitals？

Core Web Vitals 是 Google 于 2020 年推出、2021 年起纳入搜索排名的三项核心用户体验指标，数据来自真实用户，而非实验室测试。

1. LCP — 最大内容绘制

衡量页面中最大的可见元素（通常是首屏大图或大标题）出现所需的时间。

• 良好： 2.5 秒以内
• 需改进： 2.5–4 秒
• 较差： 超过 4 秒

主要影响因素：大体积图片、服务器响应慢、阻塞渲染的 JavaScript/CSS。

2. INP — 交互到下一次绘制

衡量用户交互（点击、触摸、键盘输入）时页面的响应速度，2024 年取代了旧的 FID 指标。

• 良好： 200 毫秒以内
• 需改进： 200–500 毫秒
• 较差： 超过 500 毫秒

耗时长的 JavaScript 任务、沉重的第三方脚本和低效的事件处理都会拖累 INP。

3. CLS — 累积布局偏移

衡量页面加载过程中元素“跳动”的程度。

• 良好： 0.1 以内
• 需改进： 0.1–0.25
• 较差： 超过 0.25

未设尺寸的图片、动态插入的内容和延迟加载的广告是 CLS 的主要来源。

在哪里测量性能？

Google PageSpeed Insights — 输入 URL 即可查看实验室数据和真实用户数据（CrUX），免费易用。

Google Search Console → Core Web Vitals 报告 — 按 URL 分组展示真实用户体验，直接看到哪些页面有问题。

WebPageTest — 适合进阶用户：瀑布图、视频对比和多步骤测试。

Chrome DevTools → Lighthouse — 本地开发时即时测量。

改善 LCP：具体步骤

使用现代图片格式

将 JPEG 和 PNG 转为 WebP 或 AVIF，通常可减小 30–50% 的体积，画质损失极小。

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

使用 Next.js 时，<Image> 组件会自动完成转换。

预加载首屏图片

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

缩短服务器响应时间（TTFB）

• 使用静态生成（SSG）或 ISR，提供预先生成的 HTML
• 使用 CDN，让内容从离用户最近的服务器送达
• 资源不足时迁移到 VPS 或云主机

内联关键 CSS

把首屏样式直接嵌入 HTML 可缩短渲染时间，Critical 或 Critters 等工具可自动完成。

改善 INP：减少 JavaScript 负担

拆分长任务

超过 50 毫秒的 JavaScript 任务属于“长任务”，会阻塞交互。可用 setTimeout(..., 0) 或 scheduler.yield() 拆分：

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // 每处理 50 项让主线程喘口气 if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

移除不必要的第三方脚本

在线客服、广告网络、统计工具和社交按钮都会带来明显的 INP 成本。对每个额外脚本都要问：“这个页面真的需要它吗？”如使用 Google Tag Manager，请定期清理无用标签。

在 React/Next.js 中使用代码分割

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>加载中…</div>, }); ``

把 CLS 降到零

为所有图片指定尺寸

``html <img src="product.jpg" alt="商品图片" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

避免字体导致的 FOUT/FOIT

使用 font-display: optional 或 swap，并预加载字体：

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

为动态内容预留占位

``css .content-area { min-height: 120px; / 内容加载前预留空间 / } ``

Next.js 的自动优化

使用基于 Next.js 的网站，以下功能开箱即用：

| 功能 | 作用 | |---|---| | <Image> 组件 | 自动 WebP/AVIF、懒加载、尺寸属性 | | <Script strategy="lazyOnload"> | 延迟非关键脚本 | | 静态生成（SSG） | 将 TTFB 降到最低 | | 字体优化 | 自托管字体、swap 策略 | | 自动代码分割 | 每页只加载所需 JS |

我们在企业网站成本一文中也提到了这些功能对 Core Web Vitals 的直接贡献。

优先级：从哪里开始？

1. 图片优化 — 在多数网站上仅此一项即可让 LCP 改善 30–40%。

2. 删除未使用的 JavaScript — 用 Chrome DevTools 的 Coverage 工具查看。

3. 减少阻塞渲染的资源 — 使用 async/defer 或内联关键 CSS。

4. 检查服务器性能 — 若使用共享主机且 TTFB 超过 800 毫秒，考虑更换主机。

5. 审查第三方脚本 — 在 PageSpeed Insights 的“第三方代码”部分查看各脚本的影响。

结论：速度不是奢侈品，而是必需品

Core Web Vitals 优化已不是可选项，而是 Google 排名、用户满意度和转化率的必要基础。应把它当作持续的监测与改进循环，而不是一次性的冲刺。

想了解网站当前的 Core Web Vitals 状况或获得专业的速度优化？联系我们——我们提供免费的初步分析。