
关于
优化网站和 Web 应用性能,包括加载速度、Core Web Vitals、打包体积、缓存策略和运行时性能。
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
识别的问题
- LCP问题: Hero图片(2.5MB)加载缓慢
- FID问题: 大型JavaScript包(850KB)阻塞主线程
- 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包阻塞主线程
解决方案:
- 代码分割:
// 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();
});
});
}
- 移除未使用的依赖:
# Analyze bundle
npx webpack-bundle-analyzer
# Remove unused packages
npm uninstall moment # Use date-fns instead (smaller)
npm install date-fns
- 延迟非关键脚本:
<!-- 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
兼容工具
Claude CodeCursor
标签
数据分析

