Structured 5-phase web performance audit workflow with Core Web Vitals thresholds and actionable optimization recommendations. Use when auditing website performance, diagnosing slow page loads, optimizing Core Web Vitals scores, or reviewing frontend performance patterns. Covers Webpack, Vite, Next.js, and Nuxt optimization.
Structured 5-phase web performance audit workflow with Core Web Vitals thresholds and actionable optimization recommendations. Use when auditing website performance, diagnosing slow page loads, optimizing Core Web Vitals scores, or reviewing frontend performance patterns. Covers Webpack, Vite, Next.js, and Nuxt optimization.
Structured 5-phase web performance audit workflow. Diagnose performance bottlenecks, measure Core Web Vitals, and produce actionable optimization recommendations.
When to Apply
Use this skill when:
Auditing website performance for Core Web Vitals compliance
Diagnosing slow page loads, high Time to Interactive, or layout shifts
Optimizing Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), or Interaction to Next Paint (INP)
Reviewing frontend code for performance anti-patterns
Preparing a site for Google's page experience ranking signals
Optimizing build output for Webpack, Vite, Next.js, or Nuxt
Core Web Vitals Thresholds
Metric
Good
Needs Improvement
Poor
What It Measures
LCP
<= 2.5s
2.5s - 4.0s
> 4.0s
Loading performance
CLS
<= 0.1
0.1 - 0.25
> 0.25
Visual stability
INP
<= 200ms
200ms - 500ms
> 500ms
Interactivity (replaced FID)
Additional Performance Metrics
Metric
Good
Poor
What It Measures
FCP
<= 1.8s
> 3.0s
First content rendered
TTFB
<= 800ms
> 1800ms
Server response time
TBT
<= 200ms
> 600ms
Main thread blocking
Speed Index
<= 3.4s
> 5.8s
Visual completeness over time
5-Phase Audit Workflow
Phase 1: Performance Trace
Capture a performance trace to establish baseline metrics.
Browser-Based (Chrome DevTools):
Open Chrome DevTools (F12) > Performance tab
Click "Record" and reload the page
Stop recording after page fully loads
Analyze the flame chart for:
Long tasks (> 50ms, marked in red)
Layout thrashing (forced reflow cycles)
Render-blocking resources
JavaScript execution bottlenecks
Lighthouse Audit:
# CLI-based Lighthouse audit
npx lighthouse https://example.com --output=json --output-path=./lighthouse-report.json
# With specific categories
npx lighthouse https://example.com --only-categories=performance --output=html
# Mobile simulation (default)
npx lighthouse https://example.com --preset=perf --throttling-method=simulate
Key Trace Indicators:
Main thread busy time: Should be < 4s total
Largest task duration: Should be < 250ms
Script evaluation time: Should be < 2s
Layout/style recalculation: Should be < 500ms
Phase 2: Core Web Vitals Analysis
Measure each Core Web Vital and identify specific causes.
LCP Diagnosis
LCP measures loading performance -- when the largest content element becomes visible.
<!-- Modern format with fallback --><picture><sourcesrcset="/hero.avif"type="image/avif" /><sourcesrcset="/hero.webp"type="image/webp" /><imgsrc="/hero.jpg"alt="Hero"width="1200"height="600"fetchpriority="high"decoding="async"
/></picture>
@font-face {
font-family: 'CustomFont';
src: url('/font.woff2') format('woff2');
font-display: swap;
size-adjust: 100.5%; /* Match fallback font metrics */
}
Avoid inserting content above existing content
Banners should push down from top, not shift existing content
Use transform animations instead of top/left/width/height
INP Diagnosis
INP measures interactivity -- the delay between user interaction and visual response.
Common INP Causes:
Long JavaScript tasks blocking the main thread
Synchronous layout/style recalculations
Heavy event handlers
Excessive re-renders (React, Vue)
INP Optimization Checklist:
Break up long tasks
// Instead of one long taskfunctionprocessAllItems(items) {
for (const item of items) {
/* heavy work */
}
}
// Break into chunks with schedulerasyncfunctionprocessAllItems(items) {
for (const item of items) {
processItem(item);
// Yield to main thread between itemsawait scheduler.yield();
}
}
