performance-and-web-vitals

性能和 Web Vitals

运行 Lighthouse 审计

# CLI audit — outputs JSON and HTML report
npx lighthouse https://example.com --output html --output-path ./lighthouse-report.html

# Headless, useful in CI
npx lighthouse https://example.com --chrome-flags="--headless" --output json --output-path ./report.json

# Audit specific categories only
npx lighthouse https://example.com --only-categories=performance,accessibility,seo

或者打开 Chrome DevTools → Lighthouse 标签页 → 分析页面加载情况。

目标得分：

类别	目标
性能	≥ 90
无障碍	100
最佳实践	≥ 95
SEO	≥ 95

---

核心 Web Vitals

LCP — 最大内容绘制

主要内容显示得有多快？

目标：≤ 2.5s

LCP 衡量最大可见元素（主视觉图片、标题、视频封面）渲染的时间。它反映了用户对“页面是否加载完成”的感受。

常见原因和解决方法：

原因	解决方法
未优化的主视觉图片	使用 WebP/AVIF、适当的尺寸和 fetchpriority="high"
图片未预加载	<link rel="preload" as="image" href="hero.webp">
阻塞渲染的 CSS/JS	延迟加载非关键 JS，内联关键 CSS
服务器响应缓慢	使用 CDN、缓存标头和边缘传输
Web 字体阻塞渲染	使用 font-display: swap 或 optional

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


<img src="hero.webp" alt="..." fetchpriority="high" width="1200" height="600">

切勿在 LCP 图片上使用 loading="lazy"——这会延迟最重要的渲染。

---

CLS — 累积布局偏移

内容加载时会不会跳来跳去？

目标：≤ 0.1

CLS 衡量意外的布局偏移——内容渲染后发生移动。图片未设置尺寸、广告延迟加载、字体切换，或在现有内容上方注入动态内容，都可能导致偏移。

常见原因和解决方法：

原因	解决方法
图片未设置宽度/高度	始终为 <img> 设置 width 和 height
Web 字体切换	使用 font-display: optional 或预加载字体
首屏上方的动态内容	为容器设置 min-height 以预留空间
延迟加载的广告或嵌入内容	为广告位预留固定尺寸
导致布局偏移的动画	只对 transform 设置动画，绝不要对 top/left/width/height 设置动画

<img src="product.jpg" width="400" height="300" alt="...">

/* Reserve space for dynamic content */
.ad-slot { min-height: 250px; }

/* Animate transform, not layout properties */
.slide-in { transform: translateY(0); transition: transform 300ms; }

---

INP — 交互到下一次绘制

页面响应用户输入的速度有多快？

目标：≤ 200ms

INP 衡量用户交互（点击、轻触、键盘输入）与下一次视觉更新之间的延迟。INP 较高会让界面感觉迟钝或卡顿。

常见原因和解决方法：

原因	解决方法
主线程上的 JS 负载过重	拆分为较小的任务，使用 requestIdleCallback
事件处理程序过大	对滚动和调整大小处理程序使用防抖/节流
同步 DOM 更新	使用 requestAnimationFrame 批量写入 DOM
第三方脚本造成阻塞	使用 async 或 defer 加载第三方脚本
React 重新渲染	使用 useMemo、useCallback、React.memo 进行记忆化

---

图片

在大多数页面中，图片是对性能影响最大的因素。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" width="800" height="600" alt="..." loading="lazy">
</picture>


<img
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="image-800.webp"
  alt="..."
  width="800"
  height="600"
  loading="lazy"
>

规则：

• 始终设置 width 和 height——防止 CLS
• 在首屏下方使用 loading="lazy"，切勿用于 LCP 图片
• 使用 WebP 或 AVIF——通常比 JPEG 小 30–50%
• 图片尺寸应与显示尺寸一致——不要为 400px 的区域提供 2000px 的图片
• 尽可能使用支持自动格式转换的 CDN

---

字体

如果处理不当，Web 字体会阻塞渲染。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


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

@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;     /* show fallback immediately, swap when loaded */
  /* font-display: optional; — never swap, use fallback if not cached */
}

• font-display: swap——适合标题，可接受 CLS
• font-display: optional——CLS 为零，仅在缓存中有字体时使用（最适合正文）
• 仅保留实际用到的字符以生成字体子集——可将文件大小减少 60–80%

---

JavaScript

<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>


<script type="module" src="app.js"></script>

• defer：HTML 解析后执行，并按顺序执行——适用于大多数脚本
• async：下载后立即执行，不保证顺序——适用于独立脚本（如分析脚本）
• 切勿在 <head> 中使用同步 <script> 阻塞主线程

---

Lighthouse CI（自动化审计）

在 CI 中运行 Lighthouse，在部署前发现性能退化。

# Install
npm install -g @lhci/cli

# Run
lhci autorun --upload.target=temporary-public-storage

# .lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["warn", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 1.0 }],
        "categories:seo": ["warn", { "minScore": 0.95 }]
      }
    }
  }
}

---

审核清单

• Lighthouse 性能评分 ≥ 90
• Lighthouse 无障碍评分 = 100
• LCP ≤ 2.5s — 预加载 LCP 图片，不要在其上使用 loading="lazy"
• CLS ≤ 0.1 — 所有图片均设置 width 和 height，且不使用导致布局偏移的动画
• INP ≤ 200ms — 主线程上没有繁重的同步 JS
• 图片以 WebP 或 AVIF 格式提供，且尺寸正确
• 所有首屏以下的图片均使用 loading="lazy"
• Web 字体使用 font-display: swap 或 optional
• 使用 defer 或 async 加载非关键 JS
• 配置 Lighthouse CI，在部署流水线中检测回归