技能 web-performance-optimization
⚡

web-performance-optimization

安全

使用 Claude 优化 Web 性能

缓慢的网站会损害用户体验和 SEO 排名。此技能可帮助您使用经过验证的技术（如代码分割、图片优化和 Core Web Vitals 改进）系统地测量、分析和优化 Web 性能。

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“web-performance-optimization”。 My LCP is 4.2s and I need it under 2.5s. The main hero image is 2.5MB.

预期结果:

将主图转换为 AVIF 格式（节省约 80%），压缩至 200KB 以下，添加 preload 链接，使用 fetchpriority='high'，并为不同屏幕尺寸实施带 srcset 的响应式图片。

正在使用“web-performance-optimization”。 My JavaScript bundle is 850KB gzipped and causing slow TTI.

预期结果:

用 date-fns（12KB）替换 moment.js（67KB），仅导入所需的 lodash 函数而非整个库，为重型组件实施基于路由的代码分割，并延迟非关键脚本（如分析脚本）。

正在使用“web-performance-optimization”。 I have a CLS score of 0.25 with content jumping around.

预期结果:

为所有图片添加 width 和 height 属性，使用 CSS aspect-ratio 属性，为动态内容实施骨架屏加载器，并在广告/小部件加载前预留空间。

安全审计

安全
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
已扫描文件
649
分析行数
1
发现项
1
审计总数
低风险问题 (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
100
安全
87
规范符合性

你能构建什么

电商网站优化

优化产品页面，通过减少加载时间和改进 Core Web Vitals 分数来提高转化率

仪表板性能改进

减少 JavaScript 捆绑包大小并优化数据加载，以实现更快的仪表板交互

内容网站速度优化

实施图片优化、懒加载和缓存策略，以实现更快的内容交付

试试这些提示

分析性能问题 
I ran a Lighthouse audit and got these results: [paste scores]. Help me understand what's causing poor performance and prioritize which issues to fix first.
优化 Core Web Vitals 
My Core Web Vitals are: LCP [value], FID [value], CLS [value]. Show me specific code changes to improve these metrics for my [framework] application.
减少捆绑包大小 
My JavaScript bundle is [size] and takes [time] to load on 3G. Analyze my dependencies and suggest code splitting strategies or smaller alternatives.
实施图片优化 
Help me implement an image optimization strategy for my site. I have [number] images totaling [size]. Show me how to convert to modern formats and implement lazy loading in [framework].

最佳实践

  • 在进行优化之前，始终使用 Lighthouse 建立基线指标，以便准确衡量改进效果
  • 首先关注 Core Web Vitals（LCP、FID、CLS），因为它们直接影响用户体验和 SEO 排名
  • 在真实移动设备和慢速 3G 网络上测试性能，而不仅仅是在高速互联网的桌面上测试

避免

  • 未先测量就进行优化——在更改之前始终运行审计以识别实际瓶颈
  • 过度优化桌面端而忽略移动端性能——大多数用户使用移动设备和较慢的网络
  • 过早优化——专注于影响用户-facing 指标的高影响力更改，而非微优化

常见问题

什么是 Core Web Vitals，为什么它们很重要？
Core Web Vitals 是 Google 的性能指标：LCP（加载速度）、FID（交互性）和 CLS（视觉稳定性）。它们直接影响 SEO 排名和用户体验。良好的分数为：LCP 低于 2.5 秒，FID 低于 100 毫秒，CLS 低于 0.1。
我应该先优化图片还是 JavaScript？
从 Lighthouse 审计识别为最严重的问题开始。通常，如果图片超过 1MB，请先优化图片，因为这通常是最快的收获。然后，如果 JavaScript 捆绑包压缩后超过 200KB，请解决其大小问题。
懒加载和代码分割有什么区别？
懒加载延迟加载资源（如图片）直到需要时。代码分割将您的 JavaScript 分解为按需加载的较小组块。两者结合使用：懒加载图片和折叠线以下组件，按路由或功能分割代码。
我如何知道我的优化是否有效？
在更改前后运行 Lighthouse 审计，记录每个指标。在多种设备和网络速度下测试。使用真实用户监控（RUM）工具跟踪随时间推移的实际用户体验，而不仅仅是实验室分数。
此技能可以自动实施优化吗？
不，此技能提供专家指导、代码示例和优化策略。您或您的开发团队将实施建议的更改。此技能帮助您了解要优化什么以及如何实施。
我应该与此技能一起使用哪些工具？
Lighthouse（内置于 Chrome DevTools）用于审计，webpack-bundle-analyzer 用于捆绑包分析，WebPageTest 用于详细的水瀑图，Chrome DevTools Performance 标签页用于运行时分析。此技能帮助解释所有这些工具的结果。

开发者详情

作者

sickn33

许可证

MIT

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

引用

main

文件结构

📄 SKILL.md