performance-profiling
使用 Lighthouse 进行网页性能分析
此技能帮助开发者使用 Lighthouse 审核和浏览器开发者工具来测量和优化网页应用的性能。它提供了一个结构化的工作流程，用于识别性能瓶颈并提升 Core Web Vitals 分数。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“performance-profiling”。 Run Lighthouse audit on my website
预期结果:
Performance Score: 78/100
Key Findings:
- LCP: 2.8s (Needs improvement)
- CLS: 0.05 (Good)
- INP: 180ms (Good)
Recommendations:
1. Eliminate render-blocking resources
2. Properly size images
3. Reduce JavaScript execution time
正在使用“performance-profiling”。 What are the Core Web Vitals thresholds?
预期结果:
Core Web Vitals Thresholds:
| Metric | Good | Poor |
|-------|------|------|
| LCP | < 2.5s | > 4.0s |
| INP | < 200ms | > 500ms |
| CLS | < 0.1 | > 0.25 |
安全审计
安全Evaluated 11 static security findings. All patterns detected are false positives. The subprocess.run call uses list arguments (not shell=True), preventing command injection. Temp file operations use the safe tempfile module. Documentation examples in SKILL.md are not executable code. The 'cryptographic algorithm' alerts were misidentified keywords. This is a legitimate performance profiling skill with no security concerns.
高风险问题 (2)
中风险问题 (2)
低风险问题 (1)
质量评分
你能构建什么
前端开发者优化加载速度
前端开发者希望提升其网页应用的加载性能。他们使用此技能运行 Lighthouse 审核，识别最大的性能瓶颈，并应用有针对性的优化措施。
DevOps 工程师设置 CI 性能检查
DevOps 工程师希望在其 CI/CD 流水线中添加自动化性能测试。他们使用此技能的 Lighthouse 脚本在每次部署时运行审核，并使低于性能阈值的构建失败。
全栈开发者排查运行时问题
全栈开发者注意到其网页应用上的交互很慢。他们使用此技能来分析运行时性能，识别长任务，并使用 DevTools 内存面板查找内存泄漏。
试试这些提示
使用 performance-profiling 技能对 https://example.com 运行 Lighthouse 性能审核。显示性能分数和主要建议。
使用 performance-profiling 技能，解释 Core Web Vitals（LCP、INP、CLS）衡量什么，并提供改善每个指标的技巧。
使用 performance-profiling 技能分析大型 JavaScript 包。我应该查找哪些常见问题，以及推荐的优化措施是什么？
使用 performance-profiling 技能的 4 步分析工作流程（基线、识别、修复、验证），帮助我优化一个慢的网页应用。从建立基线开始。
最佳实践
- 在进行任何更改之前，始终建立性能基准
- 优先关注最大的瓶颈，而不是微优化
- 通过重复测量验证改进，以考虑差异
避免
- 在未进行性能分析的情况下猜测性能问题
- 在确定实际瓶颈之前优化代码
- 忽略真实用户数据，只依赖合成测试