web-performance-optimization

用途

本技能面向网站与 Web 应用的性能优化，目标是改善用户体验、SEO 排名和转化率。它提供系统化的方法来测量、分析和改进加载速度、运行时性能以及 Core Web Vitals 指标。

适用场景

网站或应用加载缓慢时
针对 Core Web Vitals（LCP、FID、CLS）进行优化时
缩减 JavaScript 打包体积时
改善 Time to Interactive（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、FID 180ms、CLS 0.25、Lighthouse 62/100 为基线，识别出三处问题：2.5MB 的主图加载慢（LCP 问题）、850KB 的 JS 打包阻塞主线程（FID 问题）、无尺寸图片导致布局偏移（CLS 问题）。对应方案包括：用 <picture> 配合 AVIF/WebP 现代格式、压缩图片至 200KB 以下、使用 CDN、预加载主图；通过 lazy()/动态 import() 做代码分割、延迟非关键脚本、移除未使用依赖；为图片指定宽高、用 aspect-ratio 和骨架屏预留空间。优化后 LCP 1.8s、FID 45ms、CLS 0.05、Lighthouse 94/100。

示例 2：缩减 JavaScript 打包体积 初始总打包 850KB（gzip 后 280KB），3G 下加载 8.2s。分析发现 moment.js 67KB、lodash 整库 72KB、约 150KB 死代码、未做代码分割。优化动作：用 date-fns 替换 moment、按需引入 lodash 或改用原生方法、实施代码分割（Next.js dynamic 与基于路由的自动分割）、启用 tree shaking 移除死代码、将第三方脚本延迟到页面可交互后加载。优化后总打包降至 380KB（减少 55%），3G 加载 3.1s（提升 62%）。

示例 3：图片优化策略 15 张图片总计 12MB，无现代格式、无响应式、无懒加载。策略包括：使用 sharp 转换生成 WebP、AVIF 与优化后的 JPEG 兜底；用 <picture> 配合 srcset/sizes 实现响应式；使用原生 loading="lazy"，首屏图片用 loading="eager" 与 fetchpriority="high"；在 Next.js 中使用 next/image 组件。优化后图片总体积从 12MB 降至 1.8MB（减少 85%），LCP 从 4.5s 降至 1.6s，3G 页面加载从 18s 降至 4.2s。

最佳实践清单

建议做法：先测量再优化；定期运行 Lighthouse 审计；使用现代图片格式与响应式图片；代码分割；懒加载；为静态资源配置缓存头；减少主线程工作（JS 执行保持在 50ms 以内的分块）；用 <link rel="preload"> 预加载关键资源；用 CDN 分发静态资源；监控真实用户的 Core Web Vitals。

应避免的做法：盲目优化；忽视移动端；阻塞渲染；一次性加载全部资源；忘记图片尺寸；使用同步脚本；忽视第三方脚本；跳过压缩与混淆。

常见陷阱及解决方向

桌面端正常但移动端慢：在真实移动设备测试、使用 Chrome DevTools 移动端限速、针对 3G/4G 网络优化、减少 JS 执行时间。
JavaScript 打包过大：用 webpack-bundle-analyzer 分析、移除未使用依赖、代码分割、懒加载非关键代码。
图片导致布局偏移：始终指定宽高、使用 aspect-ratio、用骨架屏预留空间。
服务器响应慢：实施服务端缓存、静态资源用 CDN、优化数据库查询、考虑静态站点生成（SSG）。

性能检查清单要点

图片：转换为 WebP/AVIF、响应式、懒加载、指定尺寸、压缩至单张 200KB 以下、CDN 分发。JavaScript：gzip 后打包 < 200KB、代码分割、懒加载、移除未用依赖、混淆压缩、使用 async/defer。CSS：内联关键 CSS、延迟非关键 CSS、移除未使用 CSS、压缩、使用 CSS containment。缓存：设置静态资源缓存头、实施 service worker、CDN 缓存、缓存 API 响应、静态资源版本化。Core Web Vitals 目标：LCP < 2.5s、FID < 100ms、CLS < 0.1、TTFB < 600ms、TTI < 3.8s。

限制

本资料未提供该技能的安装命令、收费方式、价格、平台限制或官方文档地址，以上信息暂未提供。技能本身为流程与最佳实践指导，实际效果取决于项目的具体技术栈与实施情况。

技能介绍

用途