Skip to content

Web performance

Core Web Vitals: LCP, INP, CLS, and what moves them.

From nextjs-pagespeed ↗ by Dan Billson

16 principles

01

Measure medians, not one run

02

Ship the hero in server HTML

03

Don't lazy-load the LCP image

04

Image dimensions and sizes

05

Load fonts without shift

06

Preload only what's critical

07

Smallest client leaf

08

Prefer native HTML and SVG

09

Load heavy code on demand

10

Keep interactions fast (INP)

11

Batch layout reads and writes

12

Use passive scroll listeners

13

Use will-change sparingly

14

Respect prefers-reduced-motion

15

Immutable cache, hashed names

16

ISR for shared HTML