Back to Details

web-performance-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Performance Audit

Web性能审计

Conduct comprehensive performance audits and implement optimizations.
执行全面的性能审计并实施优化方案。

Core Web Vitals Targets

Core Web Vitals 指标目标

MetricGoodNeeds ImprovementPoor
LCP (Largest Contentful Paint)<2.5s2.5-4s>4s
FID (First Input Delay)<100ms100-300ms>300ms
CLS (Cumulative Layout Shift)<0.10.1-0.25>0.25
INP (Interaction to Next Paint)<200ms200-500ms>500ms
指标良好需要改进较差
LCP (Largest Contentful Paint)<2.5s2.5-4s>4s
FID (First Input Delay)<100ms100-300ms>300ms
CLS (Cumulative Layout Shift)<0.10.1-0.25>0.25
INP (Interaction to Next Paint)<200ms200-500ms>500ms

Performance Measurement

性能测量

javascript
// 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);
javascript
// 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 Automation

Lighthouse 自动化

javascript
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;
}
javascript
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;
}

Optimization Strategies

优化策略

Quick Wins (1-2 days)

快速优化项（1-2天）

  • Enable gzip/brotli compression
  • Minify CSS/JS
  • Defer non-critical scripts
  • Optimize images (WebP, lazy loading)
  • 启用gzip/brotli压缩
  • 压缩CSS/JS
  • 延迟非关键脚本
  • 优化图片（WebP、懒加载）

Medium Effort (1-2 weeks)

中等难度优化（1-2周）

  • Implement code splitting
  • Add service worker caching
  • Preload critical resources
  • Eliminate render-blocking resources
  • 实现代码分割
  • 添加Service Worker缓存
  • 预加载关键资源
  • 消除阻塞渲染的资源

Long-term (1-3 months)

长期优化（1-3个月）

  • Architecture improvements
  • CDN optimization
  • Database query optimization
  • 架构改进
  • CDN优化
  • 数据库查询优化

Performance Budget

性能预算

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

Audit Checklist

审计检查清单

  • Measure baseline Core Web Vitals
  • Run Lighthouse audit (mobile & desktop)
  • Analyze real user metrics (RUM)
  • Identify largest contentful element
  • Check for layout shifts
  • Review JavaScript bundle size
  • Test on slow 3G connection
  • Set performance budget
  • Configure monitoring alerts
  • 测量基准Core Web Vitals指标
  • 运行Lighthouse审计（移动端和桌面端）
  • 分析真实用户指标（RUM）
  • 识别最大内容元素
  • 检查布局偏移
  • 审查JavaScript包体积
  • 在慢速3G网络下测试
  • 设置性能预算
  • 配置监控告警