web-performance-audit

name	web-performance-audit
description	Conduct comprehensive web performance audits. Measure page speed, identify bottlenecks, and recommend optimizations to improve user experience and SEO.

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

Instructions

1. Performance Metrics

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

# 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({
                : ,
                : metrics[],
                : ,
                : ,
                : [
                    ,
                    ,
                    
                ]
            })

         (opportunities, key= x: x[])

     ():
        
         {
            : .calculate_score(metrics),
            : metrics,
            : .define_targets(metrics),
            : opportunities,
            : .identify_quick_wins(opportunities),
            : .estimate_effort(opportunities),
            : .prioritize_recommendations(opportunities)
        }

3. Optimization Strategies

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  
     
     
    
    
     





  [ ]   
  [ ]   
  [ ]  
  [ ]  
  [ ]   
  [ ]  


  [ ]    
  [ ]   
  [ ]   
  [ ]   
  [ ]  


  [ ]   
  [ ]   
  [ ] 
  [ ]  
  [ ]   


  [ ]   
  [ ]   
  [ ]  
  [ ]  
  [ ]   

4. Monitoring & Continuous Improvement

// 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
      },
      : ,
      : 
    };
  }

  () {
     {
      : {
        : ,
        : ,
        : 
      },
      : {
        : ,
        : ,
        : 
      },
      : {
        : ,
        : ,
        : 
      }
    };
  }
}

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

❌ 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

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