web-performance-audit

Category: Security compliance

Tags:

development

For: Claude Code

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

Installation

Copy to your project

cp -r skills/web-performance-audit/ /your-project/.claude/skills/web-performance-audit/

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({
                '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)
        }

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 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

// 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

❌ 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

Back to All Skills