网站速度优化 2026：如何让 Core Web Vitals 达到 90+
从速度、质量、隐私和移动端体验四个维度比较免费图片压缩服务，重点覆盖批量速度、清晰度、隐私策略和移动端体验差异，用于发布前的选型依据。内容适用于博客、详情页和社媒素材的实际发布流程。
> **核心摘要** 2026 年，Google Core Web Vitals 的合格线依然是：LCP（Largest Contentful Paint）< 2.5s，INP（Interaction to Next Paint）< 200ms，CLS（Cumulative Layout Shift）< 0.1。这三项指标会直接影响 Google 搜索排名。最值得优先做的优化包括：① 图片转换为 WebP/AVIF ② 预加载字体 ③ 拆分 JavaScript 代码 ④ 使用 CDN 边缘部署。对 Next.js 用户来说，只要默认能力配置得当，Lighthouse 90+ 并不难达到。
什么是 Core Web Vitals？ Core Web Vitals 是 Google 用来衡量页面用户体验的三项核心指标，自 2021 年起已被纳入 SEO 排名信号。
三项核心指标 | 指标 | 全称 | 衡量内容 | 良好 | 需要改进 | 较差 |
|---|---|---|---|---|---|
| **LCP** | Largest Contentful Paint | 最大图片或文本块完成渲染所需时间 | < 2.5s | 2.5–4s | > 4s |
| **INP** | Interaction to Next Paint | 从用户操作到页面出现视觉响应的时间 | < 200ms | 200–500ms | > 500ms |
| **CLS** | Cumulative Layout Shift | 加载期间发生的意外布局偏移 | < 0.1 | 0.1–0.25 | > 0.25 | 注意：FID（First Input Delay）已在 2024 年被 INP 取代。
为什么 Core Web Vitals 很重要 - **直接影响 SEO**：它已经进入 Google 排名算法。在内容质量相近时，加载更快、体验更稳的网站更占优势
**跳出率**：LCP > 3s 会使移动端跳出率增加 53%（Google 研究）
**广告收入**：AdSense RPM 与页面停留时间相关，网站越快，用户越愿意停留，RPM 通常也更好
**转化率**：延迟 1 秒 = 转化率下降 7%（Akamai 研究）
LCP 优化 LCP 通常取决于首屏主视觉图片，或页面中最大文本块的加载与渲染速度。
图片优化（影响最大） **格式对比：** | 格式 | 体积减少 | 浏览器支持 |
|---|---|---|
| JPEG | 基准 | 100% |
| WebP | 小 25–35% | 98%+ |
| AVIF | 小 40–50% | 90%+（2026） | ```html
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero image" width="1200" height="628" loading="eager">
</picture>
``` **Next.js Image 组件：**
```typescript
import Image from 'next/image' // LCP images must have priority prop
<Image src="/hero.jpg" alt="Hero image" width={1200} height={628} priority // critical — eliminates LCP delay quality={85}
/>
```
资源预加载 ```html
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<link rel="preload" as="font" href="/fonts/main.woff2" type="font/woff2" crossorigin>
```
服务器响应时间（TTFB） | 方法 | 影响 | 实现方式 |
|---|---|---|
| CDN | 使用全球边缘缓存缩短访问距离 | Cloudflare, Vercel Edge |
| 缓存头 | 回访用户几乎可以立即加载静态资源 | Cache-Control: max-age=31536000 |
| SSG/ISR | 提前生成 HTML，减少运行时等待 | Next.js generateStaticParams |
INP 优化 INP 衡量的是用户任意一次交互（点击、轻触、键盘输入）到浏览器绘制下一帧之间的耗时。
减少主线程阻塞 ```javascript
// Bad: heavy sync computation blocks click response
button.addEventListener('click', () => { const result = heavyComputation(data) // blocks main thread updateUI(result)
}) // Good: offload to Web Worker
const worker = new Worker('heavy-worker.js')
button.addEventListener('click', () => { worker.postMessage(data) // runs in separate thread
})
worker.onmessage = (e) => updateUI(e.data)
```
代码拆分（Next.js） ```typescript
import dynamic from 'next/dynamic' // Defer components not visible on first load
const HeavyChart = dynamic(() => import('./HeavyChart'), { loading: () => <div>Loading chart...</div>, ssr: false
})
```
Tree Shaking ```javascript
// Bad: imports entire lodash (70KB+)
import _ from 'lodash' // Good: imports only what you need (1KB)
import chunk from 'lodash/chunk'
```
CLS 优化 广告、图片或动态内容在加载过程中把页面内容挤开，就会产生 CLS。
始终指定图片尺寸 ```html
<img src="photo.jpg" width="800" height="600" alt="photo">
<img src="photo.jpg" alt="photo">
```
预留广告空间 ```css.ad-container { min-height: 250px; /* pre-reserve ad space */ display: flex; align-items: center; justify-content: center;
}
```
字体加载 ```css
@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: swap; /* show system font immediately, swap when loaded */
}
```
Lighthouse 90+ 检查清单（30 项） **LCP（10 项）**
[ ] 找出 LCP 元素（DevTools → Performance 选项卡）
[ ] 为 LCP 图片添加 priority 或 preload
[ ] 将首屏主图转换为 WebP/AVIF
[ ] 使用 next/image 做自动优化
[ ] 通过 srcset 提供响应式图片
[ ] 使用 CDN（Cloudflare Pages、Vercel Edge）
[ ] 验证 TTFB < 600ms
[ ] 尽可能使用 SSG/ISR
[ ] 移除不必要的重定向
[ ] 延迟加载所有第三方脚本 **INP（10 项）**
[ ] 在 Lighthouse 中检查 INP 分数
[ ] 移除 Long Tasks（50ms+）— DevTools Performance 选项卡
[ ] 将繁重计算移到 Web Workers
[ ] JavaScript bundle < 200KB（压缩后）
[ ] 移除不必要的 polyfills
[ ] 在 React 中使用 useMemo/useCallback
[ ] 对事件处理器做防抖或节流
[ ] 使用 CSS transitions 替代 JS animations
[ ] 为第三方 script 标签添加 async/defer
[ ] 优化 LCP 元素相关的 JS 执行顺序 **CLS（10 项）**
[ ] 为所有图片和视频设置 width/height
[ ] 为广告容器预留最小高度
[ ] 将动态注入的内容放在底部
[ ] 在 @font-face 规则中使用 font-display: swap
[ ] 添加字体 preload 链接标签
[ ] 只对 transform/opacity 做动画（不要使用会改变布局的属性）
[ ] 使用骨架屏预先保留内容空间
[ ] 确认 sticky/fixed 元素不会挤压内容
[ ] 在无限滚动插入内容时保持滚动位置
[ ] 使用 overflow: hidden 修复标签切换动画的高度问题
测量工具 | 工具 | 用途 | URL |
|---|---|---|
| PageSpeed Insights | 查看真实用户的 LCP/INP/CLS 数据 | pagespeed.web.dev |
| Lighthouse | 获取实验室环境下的性能评分 | Chrome DevTools → Lighthouse |
| WebPageTest | 在全球不同地区进行测试 | webpagetest.org |
| Chrome DevTools | 做详细性能分析 | F12 → Performance tab |
| Core Web Vitals Report | 查看用于 SEO 的 CrUX 现场数据 | Search Console |