mcpField
W
web-performance-audit

web-performance-audit

github.com/aj-geddes测试与质量373545 次安装34 周前更新
代码仓库

关于 web-performance-audit

用于指导网页性能测量、瓶颈分析和优化的测试技能，适合监控加载速度、处理页面缓慢问题或建立性能基线的团队。

主要功能

  1. 01性能指标指南
  2. 02审计流程
  3. 03优化策略
  4. 04持续监控指南

适用场景

  1. 01重大改动后检查性能
  2. 02调查页面缓慢反馈
  3. 03建立性能基线
  4. 04改善移动端性能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill web-performance-audit

安装后在 Claude Code 中输入/web-performance-audit确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
monitoring-continuous-improvement.md
optimization-strategies.md
performance-analysis-process.md
performance-metrics.md
scripts/
health-check.sh
templates/
dashboard-config.yaml

详细介绍

Web 性能审计

目录

概述

Web 性能审计用于测量加载时间、找出瓶颈并指导优化工作，从而打造更快、更出色的用户体验。

适用场景

  • 定期监控性能
  • 重大变更后
  • 用户抱怨速度慢
  • SEO 优化
  • 移动端优化
  • 设置性能基线

快速开始

最简可用示例：

Core Web Vitals (Google):

Largest Contentful Paint (LCP):
  Measure: Time to load largest visible element
  Good: <2.5 seconds
  Poor: >4 seconds
  Impacts: User perception of speed

First Input Delay (FID):
  Measure: Time from user input to response
  Good: <100 milliseconds
  Poor: >300 milliseconds
  Impacts: Responsiveness

Cumulative Layout Shift (CLS):
  Measure: Visual stability (unexpected layout shifts)
  Good: <0.1
  Poor: >0.25
  Impacts: User frustration

---

Additional Metrics:

First Contentful Paint (FCP):
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
性能指标性能指标
性能分析流程性能分析流程
优化策略优化策略
监控与持续改进监控与持续改进

最佳实践

✅ 应该做
  • 定期测量（而非只测一次）
  • 结合使用现场数据（真实用户）和实验室数据
  • 关注 Core Web Vitals
  • 设定切实可行的目标
  • 根据影响确定优先级
  • 持续监控
  • 设置性能预算
  • 在慢速网络环境下测试
  • 将移动端纳入测试
  • 记录改进情况
❌ 不应该做
  • 忽视现场数据
  • 只关注单一指标
  • 设定不可能实现的目标
  • 不测量就进行优化
  • 忘记图片
  • 忽视 JavaScript 的开销
  • 跳过移动端性能测试
  • 过早进行过度优化
  • 忘记监控
  • 期望不费力就能取得改进

评论

支持 Markdown