---

name: web-performance-optimization description: "优化网站和Web应用性能，包括加载速度、Core Web Vitals、包体积、缓存策略和运行时性能" risk: unknown source: community date_added: "2026-02-27"

Web性能优化

概述

帮助开发者优化网站和Web应用性能，以改善用户体验、SEO排名和转化率。本技能提供系统化的方法来测量、分析和改善加载速度、运行时性能和Core Web Vitals指标。

何时使用本技能

• 网站或应用加载缓慢时
• 优化Core Web Vitals（LCP、FID、CLS）时
• 减小JavaScript包体积时
• 改善可交互时间（TTI）时
• 优化图片和资源时
• 实施缓存策略时
• 调试性能瓶颈时
• 准备性能审计时

工作流程

步骤1：测量当前性能

建立基线指标：

• 运行Lighthouse审计
• 测量Core Web Vitals（LCP、FID、CLS）
• 检查包体积
• 分析网络瀑布图
• 识别性能瓶颈

步骤2：识别问题

分析性能问题：

• JavaScript包过大
• 未优化的图片
• 阻塞渲染的资源
• 服务器响应时间慢
• 缺少缓存头
• 布局偏移
• 长任务阻塞主线程

步骤3：优先排序

聚焦高影响力改进：

• 关键渲染路径优化
• 代码分割和懒加载
• 图片优化
• 缓存策略
• 第三方脚本优化

步骤4：实施优化

应用性能改进：

• 优化资源（图片、字体、CSS、JS）
• 实施代码分割
• 添加缓存头
• 懒加载非关键资源
• 优化关键渲染路径

步骤5：验证改进

测量变更影响：

• 重新运行Lighthouse审计
• 对比优化前后指标
• 监控真实用户指标（RUM）
• 在不同设备和网络上测试

示例

示例1：优化Core Web Vitals

## 性能审计结果

### 当前指标（优化前）
- **LCP（最大内容绘制）：** 4.2s ❌（应 < 2.5s）
- **FID（首次输入延迟）：** 180ms ❌（应 < 100ms）
- **CLS（累积布局偏移）：** 0.25 ❌（应 < 0.1）
- **Lighthouse分数：** 62/100

识别的问题

1. LCP问题： Hero图片（2.5MB）加载缓慢
2. FID问题： 大型JavaScript包（850KB）阻塞主线程
3. CLS问题： 没有尺寸的图片导致布局偏移

优化方案

修复LCP（最大内容绘制）

问题： Hero图片2.5MB，加载缓慢

解决方案：

<!-- Before: Unoptimized image -->
<img src="/hero.jpg" alt="Hero">

<!-- After: Optimized with modern formats -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img 
    src="/hero.jpg" 
    alt="Hero"
    width="1200" 
    height="600"
    loading="eager"
    fetchpriority="high"
  >
</picture>

额外优化：

• 压缩图片至 < 200KB
• 使用CDN加速分发
• 预加载hero图片：<link rel="preload" as="image" href="/hero.avif">

修复FID（首次输入延迟）

问题： 850KB JavaScript包阻塞主线程

解决方案：

1. 代码分割：

// Before: Everything in one bundle
import { HeavyComponent } from './HeavyComponent';
import { Analytics } from './analytics';
import { ChatWidget } from './chat';

// After: Lazy load non-critical code
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const ChatWidget = lazy(() => import('./chat'));

// Load analytics after page interactive
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {
    import('./analytics').then(({ Analytics }) => {
      Analytics.init();
    });
  });
}

1. 移除未使用的依赖：

# Analyze bundle
npx webpack-bundle-analyzer

# Remove unused packages
npm uninstall moment  # Use date-fns instead (smaller)
npm install date-fns

1. 延迟非关键脚本：

<!-- Before: Blocks rendering -->
<script src="/analytics.js"></script>

<!-- After: Deferred -->
<script src="/analytics.js" defer></script>

修复CLS（累积布局偏移）

问题： 没有尺寸的图片导致布局偏移

解决方案：

<!-- Before: No dimensions -->
<img src="/product.jpg" alt="Product">

<!-- After: With dimensions -->
<img 
  src="/product.jpg" 
  alt="Product"
  width="400" 
  height="300"
  style="aspect-ratio: 4/3;"
>

动态内容处理：

/* Reserve space for content that loads later */
.skeleton-loader {
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

缓存策略

# 静态资源 - 长期缓存（带哈希文件名）
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML - 短期缓存
location ~* \.html$ {
  expires 5m;
  add_header Cache-Control "public, must-revalidate";
}

# API响应
location /api/ {
  add_header Cache-Control "private, no-cache";
}

性能预算

建立并执行性能预算：

• JavaScript总量 < 300KB（压缩后）
• CSS总量 < 100KB（压缩后）
• 图片总量 < 1MB（首屏）
• LCP < 2.5秒
• FID < 100毫秒
• CLS < 0.1
• TTI < 3.5秒

监控工具

• 实验室数据：Lighthouse、WebPageTest、Chrome DevTools
• 真实用户数据：Google CrUX、web-vitals库、自定义RUM
• 持续监控：SpeedCurve、Calibre、Sentry Performance