web-performance-optimization

Web 性能优化

通过 Core Web Vitals、现代浏览器 API（View Transitions、Speculation Rules）和特定框架的技术来优化 Web 性能。

何时使用此技能

• 提高 Lighthouse 评分（目标：90+）
• 缩短页面加载时间（目标：LCP <2.5s）
• 优化 Core Web Vitals，以提升 SEO 排名
• 实施现代性能模式（2025）
• 调试性能瓶颈
• 设置持续性能监控

业务影响： 延迟 1 秒 = 转化率损失 7%。提升 0.1 秒 = 转化率提高 8%。

从这里开始：快速优化

按投入时间划分的高 ROI 优化：

1 小时快速优化（⭐⭐⭐⭐⭐ ROI）：

• 为首屏以下的图片添加 loading="lazy"（减少 40-60% 的资源大小）
• 启用压缩（gzip/brotli）（减少 70-80% 的传输大小）
• 为关键来源添加 rel="preconnect"（节省 100-500ms）

投入 1 天（⭐⭐⭐⭐ ROI）：

• 实施代码拆分（减少 30-50% 的打包体积）
• 使用 fetchpriority="high" 优化 LCP 图片（提升 200-400ms）
• 添加基础 Service Worker（重复访问时即时加载）

全面投入 1 周（⭐⭐⭐⭐⭐ ROI）：

• 完整的缓存策略（HTTP 标头 + Service Worker）
• 打包优化（tree shaking，减少 40-60%）
• 性能监控（Lighthouse CI + RUM）

→ 有关完整的实施详情，请参阅 quick-wins.md

Core Web Vitals 一览

指标	目标	权重	关键优化
LCP（最大内容绘制）	<2.5s	25%	优化图片，预加载关键资源
INP（下次绘制交互）	<200ms	30%	减少 JavaScript，拆分长任务
CLS（累积布局偏移）	<0.1	25%	预留空间，优化字体
TBT（总阻塞时间）	<200ms	30%	代码拆分，延迟加载非关键 JS
FCP（首次内容绘制）	<1.8s	10%	消除阻塞渲染的资源

→ 有关各项指标的深入介绍，请参阅 core-web-vitals.md

现代模式（2025）

View Transitions API - 无需 JavaScript 即可实现流畅的页面过渡

@view-transition { navigation: auto; }

Speculation Rules API - 预渲染页面，实现即时导航
React Server Components - 零打包体积的服务端组件
Priority Hints - 使用 fetchpriority="high" 优化 LCP
Content Visibility - 基于 CSS 的渲染优化

→ 有关前沿技术，请参阅 modern-patterns-2025.md

导航

快速入门（优先加载）

• ⚡ 快速优化 - 按时间划分的优化（1 小时/1 天/1 周），附带 ROI 评级。优先加载，快速见效。

深入介绍

• 📊 Core Web Vitals - LCP、INP、CLS 优化策略及调试工作流。针对特定指标进行优化时加载。
• 🔧 优化技术 - 图片、JavaScript、CSS、资源加载和缓存模式。实施特定优化时加载。

现代特性

• ✨ 2025 现代模式 - View Transitions、Speculation Rules、RSC、Islands Architecture。采用前沿模式时加载。

特定框架

• ⚛️ 框架模式 - Next.js、React、Vue、Vite、Astro、SvelteKit 优化。使用相应框架时加载。

测量与监控

• 📈 监控 - Lighthouse CI、RUM 设置、性能预算和调试工具。设置持续监控时加载。

关键提醒

• 先测量，再优化 - 改动前务必使用 Lighthouse/WebPageTest 建立基准
• 关注以用户为中心的指标 - 核心 Web 指标 > 虚荣指标
• 在真实设备上测试 - 53% 的移动用户会在 3 秒后离开
• 持续监控 - 不加以关注，性能会随时间推移而下降
• 按投资回报率确定优先级 - 从快速见效项（高影响、低投入）开始

危险信号

出现以下情况时，请停下来重新考虑：

• 未测量基准就进行优化
• 只关注 Lighthouse 评分（忽略实测数据）
• 忽视移动端性能（3 秒后的离开率为 53%）
• 急切加载所有资源（没有延迟加载）
• 未实施缓存策略
• 第三方脚本同步加载
• 缺少性能监控/预算

与其他技能的集成

• nextjs-core - Next.js Image 组件、字体优化、静态生成
• react - 组件优化、记忆化、代码拆分
• vite - 构建优化、代码块拆分
• typescript-core - 类型安全的性能模式

真实影响

转化影响：

• Pinterest：感知等待时间缩短 40% = 注册量增加 15% + SEO 流量增加 15%
• Zalando：提升 0.1s = 收入增加 0.7%
• AutoAnything：加载速度提升 50% = 销售额增加 12-13%

SEO 影响：

• 核心 Web 指标是排名因素（自 2021 年 6 月起）
• 75% 的用户通过核心 Web 指标 = 排名提升
• 移动优先索引优先考虑移动端性能

---

请记住： 性能是一项功能，而非事后才考虑的事项。每一毫秒都很重要。从快速见效项入手，立即带来影响。