web-performance-optimization

# Web 性能优化 ## 概述 帮助开发者优化网站和 Web 应用性能，以提升用户体验、SEO 排名和转化率。此技能提供系统化的方法来测量、分析和改进加载速度、运行时性能和核心网页指标 (Core Web Vitals)。 ## 何时使用此技能 - 当网站或应用加载缓慢时 - 当优化核心网页指标 (LCP, FID, CLS) 时 - 当减少 JavaScript 包大小时 - 当提高交互时间 (TTI) 时 - 当优化图片和资源时 - 当实施缓存策略时 - 当调试性能瓶颈时 - 当准备性能审计时 ## 工作原理 ### 第 1 步：测量当前性能 我将帮助你建立基准指标： - 运行 Lighthouse 审计 - 测量核心网页指标 (LCP, FID, CLS) - 检查包大小 - 分析网络瀑布流 - 识别性能瓶颈 ### 第 2 步：识别问题 分析性能问题： - 大型 JavaScript 包 - 未优化的图片 - 渲染阻塞资源 - 服务器响应缓慢 - 缺失缓存头 - 布局偏移 - 阻塞主线程的长任务 ### 第 3 步：优化优先级排序 专注于高影响力的改进： - 关键渲染路径优化 - 代码分割和懒加载 - 图片优化 - 缓存策略 - 第三方脚本优化 ### 第 4 步：实施优化 应用性能改进： - 优化资源（图片、字体、CSS、JS） - 实施代码分割 - 添加缓存头 - 懒加载非关键资源 - 优化关键渲染路径 ### 第 5 步：验证改进 测量变更的影响： - 重新运行 Lighthouse 审计 - 比较变更前后的指标 - 监控真实用户指标 (RUM) - 在不同设备和网络上测试 ## 示例 ### 示例 1：优化核心网页指标 markdown ## 性能审计结果 ### 当前指标（优化前） - **LCP (最大内容渲染):** 4.2s ❌ (应 < 2.5s) - **FID (首次输入延迟):** 180ms ❌ (应 < 100ms) - **CLS (累积布局偏移):** 0.25 ❌ (应 < 0.1) - **Lighthouse 分数:** 62/100 ### 识别出的问题 1. **LCP 问题:** 首屏图片 (2.5MB) 加载缓慢 2. **FID 问题:** 大型 JavaScript 包 (850KB) 阻塞主线程 3. **CLS 问题:** 没有尺寸定义的图片导致布局偏移 ### 优化计划 #### 修复 LCP (最大内容渲染) **问题:** 首屏图片 "