⚡

Web性能审计技能 web-performance-audit

这个技能用于进行全面的Web性能审计和优化，包括核心Web指标（如LCP、FID、CLS、INP）测量、瓶颈识别、优化策略实施和性能预算设置，帮助改善页面加载时间、用户体验和网站性能，适用于前端开发、性能审查和SEO优化。关键词：Web性能审计、核心Web指标、优化建议、页面加载、用户体验、前端优化。

前端开发 0 次安装 0 次浏览 更新于 3/7/2026

名称: web-performance-audit 描述: 使用核心Web指标进行Web性能审计、瓶颈识别、优化建议。用于页面加载时间、性能审查、UX优化，或遇到LCP、FID、CLS问题、资源阻塞、渲染延迟。 许可证: MIT

Web性能审计

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

核心Web指标目标

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

性能测量

// 使用web-vitals库
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周）

  • 实现代码分割
  • 添加服务工作者缓存
  • 预加载关键资源
  • 消除渲染阻塞资源

长期（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 }
  ]
}

审计清单

  • [ ] 测量基线核心Web指标
  • [ ] 运行Lighthouse审计（移动端和桌面端）
  • [ ] 分析真实用户指标（RUM）
  • [ ] 识别最大内容元素
  • [ ] 检查布局偏移
  • [ ] 审查JavaScript包大小
  • [ ] 在慢速3G连接上测试
  • [ ] 设置性能预算
  • [ ] 配置监控警报