Back to Details

web-performance-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Performance Audit

网页性能审计

Overview

概述

Web performance audits measure load times, identify bottlenecks, and guide optimization efforts to create faster, better user experiences.
网页性能审计会测量加载时间、识别性能瓶颈，并指导优化工作，以打造更快、更优质的用户体验。

When to Use

适用场景

  • Regular performance monitoring
  • After major changes
  • User complaints about slowness
  • SEO optimization
  • Mobile optimization
  • Performance baseline setting
  • 定期性能监控
  • 完成重大变更后
  • 用户反馈页面卡顿
  • SEO优化
  • 移动端优化
  • 性能基准设定

Instructions

操作指南

1. Performance Metrics

1. 性能指标

yaml
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):
  Measure: First visible content appears
  Target: <1.8 seconds

Time to Interactive (TTI):
  Measure: Page is fully interactive
  Target: <3.8 seconds

Total Blocking Time (TBT):
  Measure: JavaScript blocking time
  Target: <300ms

Interaction to Next Paint (INP):
  Measure: Latency of user interactions
  Target: <200ms

---

Measurement Tools:
  - Google PageSpeed Insights
  - Lighthouse (Chrome DevTools)
  - WebPageTest
  - New Relic
  - Datadog
  - GTmetrix
yaml
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):
  Measure: First visible content appears
  Target: <1.8 seconds

Time to Interactive (TTI):
  Measure: Page is fully interactive
  Target: <3.8 seconds

Total Blocking Time (TBT):
  Measure: JavaScript blocking time
  Target: <300ms

Interaction to Next Paint (INP):
  Measure: Latency of user interactions
  Target: <200ms

---

Measurement Tools:
  - Google PageSpeed Insights
  - Lighthouse (Chrome DevTools)
  - WebPageTest
  - New Relic
  - Datadog
  - GTmetrix

2. Performance Analysis Process

2. 性能分析流程

python
undefined
python
undefined

Conduct performance audit

Conduct performance audit

class PerformanceAudit: def measure_performance(self, url): """Baseline measurements""" return { 'desktop_metrics': self.run_lighthouse_desktop(url), 'mobile_metrics': self.run_lighthouse_mobile(url), 'field_data': self.get_field_data(url), # Real user data 'lab_data': self.run_synthetic_tests(url), # Lab measurements 'comparative': self.compare_to_competitors(url) }
def identify_opportunities(self, metrics):
    """Find improvement areas"""
    opportunities = []

    if metrics['fcp'] > 1.8:
        opportunities.append({
            'issue': 'First Contentful Paint slow',
            'current': metrics['fcp'],
            'target': 1.8,
            'impact': 'High',
            'solutions': [
                'Reduce CSS/JS for critical path',
                'Preload critical fonts',
                'Defer non-critical JavaScript'
            ]
        })

    if metrics['cls'] > 0.1:
        opportunities.append({
            'issue': 'Cumulative Layout Shift high',
            'current': metrics['cls'],
            'target': 0.1,
            'impact': 'High',
            'solutions': [
                'Reserve space for dynamic content',
                'Avoid inserting content above existing',
                'Use transform for animations'
            ]
        })

    return sorted(opportunities, key=lambda x: x['impact'])

def create_audit_report(self, metrics, opportunities):
    """Generate comprehensive report"""
    return {
        'overall_score': self.calculate_score(metrics),
        'current_metrics': metrics,
        'target_metrics': self.define_targets(metrics),
        'opportunities': opportunities,
        'quick_wins': self.identify_quick_wins(opportunities),
        'timeline': self.estimate_effort(opportunities),
        'recommendations': self.prioritize_recommendations(opportunities)
    }
undefined
class PerformanceAudit: def measure_performance(self, url): """Baseline measurements""" return { 'desktop_metrics': self.run_lighthouse_desktop(url), 'mobile_metrics': self.run_lighthouse_mobile(url), 'field_data': self.get_field_data(url), # Real user data 'lab_data': self.run_synthetic_tests(url), # Lab measurements 'comparative': self.compare_to_competitors(url) }
def identify_opportunities(self, metrics):
    """Find improvement areas"""
    opportunities = []

    if metrics['fcp'] > 1.8:
        opportunities.append({
            'issue': 'First Contentful Paint slow',
            'current': metrics['fcp'],
            'target': 1.8,
            'impact': 'High',
            'solutions': [
                'Reduce CSS/JS for critical path',
                'Preload critical fonts',
                'Defer non-critical JavaScript'
            ]
        })

    if metrics['cls'] > 0.1:
        opportunities.append({
            'issue': 'Cumulative Layout Shift high',
            'current': metrics['cls'],
            'target': 0.1,
            'impact': 'High',
            'solutions': [
                'Reserve space for dynamic content',
                'Avoid inserting content above existing',
                'Use transform for animations'
            ]
        })

    return sorted(opportunities, key=lambda x: x['impact'])

def create_audit_report(self, metrics, opportunities):
    """Generate comprehensive report"""
    return {
        'overall_score': self.calculate_score(metrics),
        'current_metrics': metrics,
        'target_metrics': self.define_targets(metrics),
        'opportunities': opportunities,
        'quick_wins': self.identify_quick_wins(opportunities),
        'timeline': self.estimate_effort(opportunities),
        'recommendations': self.prioritize_recommendations(opportunities)
    }
undefined

3. Optimization Strategies

3. 优化策略

yaml
Performance Optimization Roadmap:

Quick Wins (1-2 days):
  - Enable gzip compression
  - Minify CSS/JavaScript
  - Compress images (lossless)
  - Remove unused CSS
  - Defer non-critical JavaScript
  - Preload critical fonts

Medium Effort (1-2 weeks):
  - Implement lazy loading
  - Code splitting (split routes)
  - Service worker for caching
  - Image optimization (WebP, srcset)
  - Critical CSS extraction
  - HTTP/2 server push

Long-term (1-3 months):
  - Migrate to faster framework
  - Database query optimization
  - Content delivery optimization
  - Architecture refactor
  - CDN implementation
  - Build process optimization

---

Optimization Checklist:

Network:
  [ ] Gzip compression enabled
  [ ] Brotli compression enabled
  [ ] HTTP/2 enabled
  [ ] CDN configured
  [ ] Browser caching configured
  [ ] Asset fingerprinting

JavaScript:
  [ ] Code split by route
  [ ] Unused code removed
  [ ] Minified and mangled
  [ ] Source maps generated
  [ ] Deferred non-critical

CSS:
  [ ] Critical CSS extracted
  [ ] Unused CSS removed
  [ ] Minified
  [ ] Preloaded fonts
  [ ] WOFF2 format used

Images:
  [ ] Optimized and compressed
  [ ] WebP with fallback
  [ ] Responsive srcset
  [ ] Lazy loading
  [ ] SVG where possible
yaml
Performance Optimization Roadmap:

Quick Wins (1-2 days):
  - Enable gzip compression
  - Minify CSS/JavaScript
  - Compress images (lossless)
  - Remove unused CSS
  - Defer non-critical JavaScript
  - Preload critical fonts

Medium Effort (1-2 weeks):
  - Implement lazy loading
  - Code splitting (split routes)
  - Service worker for caching
  - Image optimization (WebP, srcset)
  - Critical CSS extraction
  - HTTP/2 server push

Long-term (1-3 months):
  - Migrate to faster framework
  - Database query optimization
  - Content delivery optimization
  - Architecture refactor
  - CDN implementation
  - Build process optimization

---

Optimization Checklist:

Network:
  [ ] Gzip compression enabled
  [ ] Brotli compression enabled
  [ ] HTTP/2 enabled
  [ ] CDN configured
  [ ] Browser caching configured
  [ ] Asset fingerprinting

JavaScript:
  [ ] Code split by route
  [ ] Unused code removed
  [ ] Minified and mangled
  [ ] Source maps generated
  [ ] Deferred non-critical

CSS:
  [ ] Critical CSS extracted
  [ ] Unused CSS removed
  [ ] Minified
  [ ] Preloaded fonts
  [ ] WOFF2 format used

Images:
  [ ] Optimized and compressed
  [ ] WebP with fallback
  [ ] Responsive srcset
  [ ] Lazy loading
  [ ] SVG where possible

4. Monitoring & Continuous Improvement

4. 监控与持续改进

javascript
// Setup performance monitoring

class PerformanceMonitoring {
  setupMonitoring() {
    return {
      tools: [
        'Google Analytics (Web Vitals)',
        'Datadog or New Relic',
        'Sentry for errors',
        'Custom monitoring'
      ],
      metrics: [
        'LCP (Largest Contentful Paint)',
        'FID (First Input Delay)',
        'CLS (Cumulative Layout Shift)',
        'FCP (First Contentful Paint)',
        'TTI (Time to Interactive)'
      ],
      frequency: 'Real-time monitoring',
      alerts: {
        lcp_degradation: 'Alert if >3 seconds',
        fid_degradation: 'Alert if >200ms',
        cls_degradation: 'Alert if >0.2'
      }
    };
  }

  defineBaselines(metrics) {
    return {
      baseline: {
        lcp: metrics.lcp,
        fid: metrics.fid,
        cls: metrics.cls
      },
      targets: {
        lcp: metrics.lcp * 0.9,  // 10% improvement
        fid: metrics.fid * 0.8,
        cls: metrics.cls * 0.8
      },
      review_frequency: 'Weekly',
      improvement_tracking: 'Month-over-month trends'
    };
  }

  setupPerformanceBudget() {
    return {
      javascript: {
        target: '150KB gzipped',
        monitor: 'Every build',
        alert: 'If exceeds 160KB'
      },
      css: {
        target: '50KB gzipped',
        monitor: 'Every build',
        alert: 'If exceeds 55KB'
      },
      images: {
        target: '500KB total',
        monitor: 'Every deployment',
        alert: 'If exceeds 550KB'
      }
    };
  }
}
javascript
// Setup performance monitoring

class PerformanceMonitoring {
  setupMonitoring() {
    return {
      tools: [
        'Google Analytics (Web Vitals)',
        'Datadog or New Relic',
        'Sentry for errors',
        'Custom monitoring'
      ],
      metrics: [
        'LCP (Largest Contentful Paint)',
        'FID (First Input Delay)',
        'CLS (Cumulative Layout Shift)',
        'FCP (First Contentful Paint)',
        'TTI (Time to Interactive)'
      ],
      frequency: 'Real-time monitoring',
      alerts: {
        lcp_degradation: 'Alert if >3 seconds',
        fid_degradation: 'Alert if >200ms',
        cls_degradation: 'Alert if >0.2'
      }
    };
  }

  defineBaselines(metrics) {
    return {
      baseline: {
        lcp: metrics.lcp,
        fid: metrics.fid,
        cls: metrics.cls
      },
      targets: {
        lcp: metrics.lcp * 0.9,  // 10% improvement
        fid: metrics.fid * 0.8,
        cls: metrics.cls * 0.8
      },
      review_frequency: 'Weekly',
      improvement_tracking: 'Month-over-month trends'
    };
  }

  setupPerformanceBudget() {
    return {
      javascript: {
        target: '150KB gzipped',
        monitor: 'Every build',
        alert: 'If exceeds 160KB'
      },
      css: {
        target: '50KB gzipped',
        monitor: 'Every build',
        alert: 'If exceeds 55KB'
      },
      images: {
        target: '500KB total',
        monitor: 'Every deployment',
        alert: 'If exceeds 550KB'
      }
    };
  }
}

Best Practices

最佳实践

✅ DO

✅ 建议

  • Measure regularly (not just once)
  • Use field data (real users) + lab data
  • Focus on Core Web Vitals
  • Set realistic targets
  • Prioritize by impact
  • Monitor continuously
  • Setup performance budgets
  • Test on slow networks
  • Include mobile in testing
  • Document improvements
  • 定期测量（而非仅一次）
  • 结合真实用户数据（field data）和实验室数据（lab data）
  • 聚焦Core Web Vitals
  • 设置切合实际的目标
  • 按影响优先级排序
  • 持续监控
  • 设定性能预算
  • 在慢速网络环境下测试
  • 将移动端纳入测试范围
  • 记录优化成果

❌ DON'T

❌ 避免

  • Ignore field data
  • Focus on one metric only
  • Set impossible targets
  • Optimize without measurement
  • Forget about images
  • Ignore JavaScript costs
  • Skip mobile performance
  • Over-optimize prematurely
  • Forget about monitoring
  • Expect improvements without effort
  • 忽略真实用户数据
  • 仅关注单一指标
  • 设置无法实现的目标
  • 无测量依据的盲目优化
  • 忽视图片优化
  • 忽略JavaScript的性能成本
  • 跳过移动端性能测试
  • 过早过度优化
  • 忘记持续监控
  • 不付出努力就期望性能提升

Performance Tips

性能优化小贴士

  • Start with Lighthouse audit (free, in DevTools)
  • Use WebPageTest for detailed analysis
  • Test on 3G mobile to find real bottlenecks
  • Prioritize LCP optimization first
  • Create performance budget for teams
  • 从Lighthouse审计开始（免费，集成在DevTools中）
  • 使用WebPageTest进行详细分析
  • 在3G移动网络环境下测试以发现真实瓶颈
  • 优先优化LCP指标
  • 为团队设定性能预算