SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场web-performance-optimization

web-performance-optimization

前端与建站

查看项目

更新于 10-15 18:37

技能介绍

用途

该技能帮助开发者优化网站和 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）、在不同设备和网络上测试。

主要能力与示例

技能文档通过三个示例展示具体做法：

示例一：优化 Core Web Vitals

针对 LCP 问题（首屏大图 2.5MB 加载慢），使用 <picture> 提供 AVIF/WebP 格式、压缩图片至 200KB 以下、使用 CDN、预加载首屏图片。针对 FID 问题（850KB JavaScript 包阻塞主线程），实施代码分割与懒加载、移除未使用依赖（如用 date-fns 替代 moment）、延迟非关键脚本。针对 CLS 问题（图片无尺寸导致布局偏移），为图片指定宽高、使用 aspect-ratio、为动态内容预留骨架屏空间。示例中优化后 LCP 从 4.2s 降至 1.8s，FID 从 180ms 降至 45ms，CLS 从 0.25 降至 0.05，Lighthouse 分数从 62 提升至 94。

示例二：减小 JavaScript 打包体积

通过 webpack-bundle-analyzer 分析包组成，替换重型依赖（moment.js 67KB → date-fns 12KB）、按需引入 Lodash、实施代码分割（Next.js dynamic 导入）、移除死代码（启用 tree shaking）、优化第三方脚本加载时机。示例中总包从 850KB 降至 380KB，3G 加载时间从 8.2s 降至 3.1s。

示例三：图片优化策略

使用 sharp 将图片转换为 WebP 和 AVIF 格式并生成 JPEG 回退，实施响应式图片（srcset/sizes），使用原生懒加载（loading="lazy"）与首屏急切加载（loading="eager"、fetchpriority="high"），以及 Next.js Image 组件。示例中图片总大小从 12MB 降至 1.8MB，LCP 从 4.5s 降至 1.6s。

最佳实践

文档列出应做与不应做的事项：先测量再优化、定期运行 Lighthouse、使用现代图片格式与响应式图片、代码分割、懒加载、积极缓存、减少主线程工作（JavaScript 执行控制在 50ms 以内）、预加载关键资源、使用 CDN、监控真实用户。避免盲目优化、忽视移动端、阻塞渲染、一次性加载所有内容、忘记图片尺寸、使用同步脚本、忽视第三方脚本、跳过压缩。

常见陷阱

文档还列出常见问题及解决方向：桌面端优化好但移动端慢（在真实移动设备测试、使用节流、针对 3G/4G 优化）；JavaScript 包过大（分析包、移除未使用依赖、代码分割、懒加载）；图片导致布局偏移（指定宽高、使用 aspect-ratio、骨架屏预留空间）；服务器响应慢（服务端缓存、CDN、优化数据库查询、考虑静态生成）。

性能检查清单

文档提供覆盖图片、JavaScript、CSS、缓存、Core Web Vitals 的检查清单，包括：图片转现代格式、响应式图片、懒加载、指定尺寸、压缩至 200KB 以下、CDN 分发；JS 包 gzip 后小于 200KB、代码分割、懒加载、移除未使用依赖、压缩、async/defer；内联关键 CSS、延迟非关键 CSS、移除未使用 CSS、压缩、CSS containment；设置缓存头、Service Worker、CDN 缓存、缓存 API 响应、静态资源版本化；LCP < 2.5s、FID < 100ms、CLS < 0.1、TTFB < 600ms、TTI < 3.8s。

性能工具

文档列举了测量工具（Lighthouse、WebPageTest、Chrome DevTools、PageSpeed Insights、Web Vitals Extension）、分析工具（webpack-bundle-analyzer、source-map-explorer、Bundlephobia、ImageOptim）、监控工具（Google Analytics、Sentry、New Relic、Datadog）。

相关技能

文档提及 @react-best-practices、@frontend-dev-guidelines、@systematic-debugging、@senior-architect 等相关技能。

限制

该技能的具体安装方式、收费模式、支持平台等信息暂未提供。