perf-web-optimization

Web 性能优化

系统化方法：测量 → 识别 → 排序 → 实施 → 验证。

目标指标

指标	良好	有待改进	较差
LCP	< 2.5s	2.5-4s	> 4s
INP	< 200ms	200-500ms	> 500ms
CLS	< 0.1	0.1-0.25	> 0.25
TTFB	< 800ms	800ms-1.8s	> 1.8s

快速见效的优化

1. 图片（通常对 LCP 影响最大）

<img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />


<img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />

始终设置 width 和 height，以防止 CLS。

2. 字体（常见的 LCP/CLS 问题根源）

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


<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
  media="print"
  onload="this.media='all'"
/>

3. 第三方脚本（常见的 INP 杀手）

<script>
  function loadThirdParty() {
    // Load analytics, chat widgets, etc.
  }
  ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
  setTimeout(loadThirdParty, 5000)
</script>

4. 关键 CSS

将关键 CSS 内联到 <head> 中，其余部分延后加载：

<style>
  /* critical styles */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

Bundle 分析

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

# Check package size before installing
npx bundlephobia <package-name>

可替换的常见大型包：

• moment（67KB）→ date-fns（12KB）或 dayjs（2KB）
• lodash（72KB）→ 按需导入所需函数或使用原生方法

代码拆分模式

// React lazy
const Chart = lazy(() => import('./Chart'))

// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })

// Vite/Rollup manual chunks
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom']
      }
    }
  }
}

缓存标头

# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable

# HTML (revalidate)
Cache-Control: no-cache

# API responses
Cache-Control: private, max-age=0, must-revalidate

测量

如需运行审计、阅读报告和设置预算，请使用 perf-lighthouse skill。

检查清单

图片

• 使用现代格式（WebP/AVIF）
• 使用响应式 srcset
• 设置 width/height 属性
• 对首屏以下的图片设置 loading="lazy"
• 对 LCP 图片设置 fetchpriority="high"

JavaScript

• Bundle 经 gzip 压缩后小于 200KB
• 按路由拆分代码
• 延后加载第三方脚本
• 不包含未使用的依赖

CSS

• 内联关键 CSS
• 延后加载非关键 CSS
• 不包含未使用的 CSS

字体

• 设置 font-display: swap
• 对字体源站预连接
• 尽可能使用子集

详细示例

如需深入了解优化模式，请参阅：

• references/core-web-vitals.md - 修复 LCP、CLS、INP 问题
• references/bundle-optimization.md - 减小 JS bundle 大小
• references/image-optimization.md - 图片格式、响应式图片、sharp 脚本