Performance & Optimization

Lighthouse Basics

Google Lighthouse performance auditing.

Running Lighthouse

Chrome DevTools
F12 → Lighthouse tab → Generate report

CLI
npm install -g lighthouse
lighthouse https://example.com

Programmatic
const lighthouse = require(lighthouse);
const result = await lighthouse(url, options);

Core Web Vitals

LCP (Largest Contentful Paint)
Good: < 2.5s
Needs improvement: 2.5s - 4s
Poor: > 4s

FID (First Input Delay)
Good: < 100ms
Needs improvement: 100ms - 300ms
Poor: > 300ms

CLS (Cumulative Layout Shift)
Good: < 0.1
Needs improvement: 0.1 - 0.25
Poor: > 0.25

Performance Metrics

FCP (First Contentful Paint)
First text/image painted

TTI (Time to Interactive)
Page is fully interactive

Speed Index
How quickly content is visually displayed

TBT (Total Blocking Time)
Sum of blocking time between FCP and TTI

Lighthouse Categories

Performance (0-100)
Speed metrics and optimizations

Accessibility (0-100)
ARIA, contrast, labels, etc.

Best Practices (0-100)
HTTPS, console errors, deprecated APIs

SEO (0-100)
Meta tags, crawlability, mobile-friendly