mcpField
W
web-performance-audit

web-performance-audit

github.com/secondsky测试与质量240532 次安装5 周前更新
代码仓库

关于 web-performance-audit

web-performance-audit 是用于审计和改进 Web 性能的技能，涵盖 Core Web Vitals 目标、测量示例、Lighthouse 自动化指引、优化策略和性能预算。

主要功能

  1. 01Core Web Vitals 目标
  2. 02Web 性能测量示例
  3. 03Lighthouse 审计自动化
  4. 04按投入划分的优化策略
  5. 05性能预算示例
  6. 06审计检查清单

适用场景

  1. 01建立性能基线
  2. 02查找页面速度问题
  3. 03按投入规划优化
  4. 04设置资源与耗时预算

安装

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

$npx skills add https://github.com/secondsky/claude-skills --skill web-performance-audit

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

详细介绍

Web 性能审计

进行全面的性能审计并实施优化。

Core Web Vitals 目标

指标良好需要改进较差
LCP（最大内容绘制）<2.5s2.5-4s>4s
FID（首次输入延迟）<100ms100-300ms>300ms
CLS（累积布局偏移）<0.10.1-0.25>0.25
INP（交互到下一次绘制）<200ms200-500ms>500ms

性能测量

// Using web-vitals library
import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  console.log({ name, value, id });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

Lighthouse 自动化

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runAudit(url) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const result = await lighthouse(url, {
    port: chrome.port,
    onlyCategories: ['performance']
  });

  await chrome.kill();
  return result.lhr;
}

优化策略

快速见效（1-2 天）
  • 启用 gzip/brotli 压缩
  • 压缩 CSS/JS
  • 延迟加载非关键脚本
  • 优化图像（WebP、延迟加载）
中等工作量（1-2 周）
  • 实施代码拆分
  • 添加 Service Worker 缓存
  • 预加载关键资源
  • 消除阻塞渲染的资源
长期（1-3 个月）
  • 改进架构
  • 优化 CDN
  • 优化数据库查询

性能预算

{
  "timings": [
    { "metric": "first-contentful-paint", "budget": 1500 },
    { "metric": "largest-contentful-paint", "budget": 2500 }
  ],
  "resourceSizes": [
    { "resourceType": "script", "budget": 150 },
    { "resourceType": "image", "budget": 300 }
  ]
}

审计清单

  • 测量 Core Web Vitals 基准值
  • 运行 Lighthouse 审计（移动设备和桌面设备）
  • 分析真实用户指标（RUM）
  • 找出最大内容元素
  • 检查是否存在布局偏移
  • 检查 JavaScript 包大小
  • 在慢速 3G 连接下测试
  • 设置性能预算
  • 配置监控警报

评论

支持 Markdown