Web Performance Audit Workshop

Comprehensive web performance analysis and optimization toolkit covering Core Web Vitals, lighthouse auditing, bundle analysis, rendering performance, and network optimization strategies.

When to Use This Skill

Choose Web Performance Audit when:

• Diagnosing slow page load times or poor Core Web Vitals scores
• Optimizing Largest Contentful Paint (LCP), First Input Delay (FID), and CLS
• Reducing JavaScript bundle size and improving load performance
• Analyzing and optimizing rendering performance (jank, layout thrashing)
• Preparing for Google's page experience ranking signals

Consider alternatives when:

• Need backend API optimization — profile server-side code
• Need database optimization — use database-specific profiling
• Need CDN configuration — use CDN provider tools

Quick Start

Copy
# Activate performance audit
claude skill activate smart-web-performance-audit-workshop

# Run performance audit
claude "Audit the performance of https://example.com and prioritize fixes"

# Optimize bundle
claude "Analyze and optimize the JavaScript bundle size"

Example: Performance Audit Report

Copy
## Performance Audit: example.com

### Core Web Vitals
| Metric | Current | Target | Status |
|--------|---------|--------|--------|
| LCP (Largest Contentful Paint) | 4.2s | <2.5s | Needs Improvement |
| FID (First Input Delay) | 180ms | <100ms | Poor |
| CLS (Cumulative Layout Shift) | 0.08 | <0.1 | Good |
| TTFB (Time to First Byte) | 1.1s | <0.8s | Needs Improvement |
| TBT (Total Blocking Time) | 650ms | <200ms | Poor |

### Critical Issues (Fix First)
1. **Render-blocking CSS** (saves ~1.2s LCP)
   - 3 external CSS files blocking first render
   - Fix: Inline critical CSS, async-load the rest

2. **Unoptimized hero image** (saves ~0.8s LCP)
   - 2.4MB JPEG, no srcset, no lazy loading
   - Fix: Convert to WebP, add responsive srcset, preload

3. **Large JS bundle** (saves ~400ms TBT)
   - main.js: 450KB (150KB gzipped)
   - Contains unused lodash, moment.js
   - Fix: Tree-shake, replace with date-fns, code-split

Core Concepts

Core Web Vitals

Metric	Measures	Good	Needs Work	Poor
LCP	Loading performance	<2.5s	2.5-4.0s	>4.0s
INP	Interactivity (replaces FID)	<200ms	200-500ms	>500ms
CLS	Visual stability	<0.1	0.1-0.25	>0.25

Optimization Categories

Category	Techniques	Impact
Network	Compression, caching, CDN, preloading	TTFB, LCP
Resources	Image optimization, font loading, code splitting	LCP, TBT
Rendering	Critical CSS, layout containment, paint optimization	LCP, CLS
JavaScript	Tree shaking, lazy loading, worker threads	TBT, INP
Fonts	font-display: swap, preload, subset	LCP, CLS
Third-party	Defer analytics, lazy-load widgets, facade patterns	TBT, LCP

Copy
# Performance measurement commands
# Lighthouse CLI audit
npx lighthouse https://example.com --output json --output-path report.json

# Bundle analysis
npx webpack-bundle-analyzer stats.json
# or for Next.js
ANALYZE=true next build

# Core Web Vitals in the field (CrUX API)
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY" \
  -d '{"url": "https://example.com"}'

# Network waterfall analysis
npx sitespeed.io https://example.com

# Image optimization audit
npx squoosh-cli --webp auto images/

Copy
// Measure Core Web Vitals in code
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(({ value, rating }) => {
  analytics.send('web-vital', { metric: 'LCP', value, rating });
});

onINP(({ value, rating }) => {
  analytics.send('web-vital', { metric: 'INP', value, rating });
});

onCLS(({ value, rating }) => {
  analytics.send('web-vital', { metric: 'CLS', value, rating });
});

Configuration

Parameter	Description	Default
target_lcp	Target LCP in seconds	2.5
target_inp	Target INP in milliseconds	200
target_cls	Target CLS score	0.1
budget_js	JavaScript budget (gzipped KB)	150
budget_css	CSS budget (gzipped KB)	50
budget_images	Per-image budget (KB)	200
audit_tool	Primary tool: lighthouse, pagespeed, webpagetest	lighthouse

Best Practices

1. Measure field data, not just lab data — Lighthouse scores are synthetic. Use Chrome UX Report (CrUX) or web-vitals library for real user metrics. Field data reveals performance on actual devices and networks that lab tests can't simulate.

2. Fix LCP first — it has the highest user perception impact — Identify your LCP element (usually hero image or heading text), then optimize its delivery: preload the resource, inline critical CSS, use responsive images, and reduce server response time.

3. Set performance budgets and enforce them in CI — Define maximum bundle sizes, image weights, and request counts. Fail CI builds that exceed budgets. Automated enforcement prevents gradual performance regression that manual monitoring misses.

4. Defer or remove third-party scripts — Analytics, chat widgets, and social embeds often account for 40-60% of page weight. Load them after the critical rendering path using defer, async, or facade patterns that load the real widget only on interaction.

5. Use loading="lazy" for all below-fold images and iframes — Native lazy loading prevents below-fold images from competing with critical resources during initial load. Only eager-load images that are visible in the initial viewport.

Common Issues

Lighthouse score is good but real users report slow experience. Lab tests run on fast networks with high-end hardware. Use Real User Monitoring (RUM) to measure actual user experience. Focus on 75th percentile metrics (not averages) to understand the experience for users on slower devices and connections.

CLS spikes caused by dynamic content insertion. Ads, images without dimensions, and dynamically loaded content cause layout shifts. Always set explicit width and height on images and iframes, use min-height on containers that will receive dynamic content, and use content-visibility: auto for off-screen content.

JavaScript bundle size keeps growing despite optimization efforts. Implement automated bundle analysis in CI that reports size changes per PR. Use import() dynamic imports for route-based code splitting. Replace large libraries with smaller alternatives: lodash → lodash-es (tree-shakeable), moment → date-fns, axios → fetch.