web-performance-checklist

Web Performance Checklist

A concrete checklist for diagnosing and improving web performance. Measure before and after — optimize against field data, not hunches.

Rationalizations (read first)

Pre-written rebuttals to the excuses that precede a skipped measurement. If you catch yourself thinking the left column, the right column is the answer.

Rationalization	Rebuttal
"It's fast on my machine."	Your machine isn't the p75 user. Check field data (CrUX/RUM) and throttle to mid-tier Android.
"I'll add the index later."	An unindexed query degrades with data growth — later is an incident, not a task.
"Memoize everything to be safe."	useMemo/useCallback cost too. Without a profile they add overhead, not speed.
"The bundle's only a bit bigger."	Bloat compounds. Read the analyzer, not your gut — name the KB before adding the dep.
"It looks instant locally."	Local has no network or CPU throttle. Unverified under realistic conditions = unverified.

Core Web Vitals targets

Metric	Good	Needs improvement	Poor
LCP (Largest Contentful Paint)	≤ 2.5s	≤ 4.0s	> 4.0s
INP (Interaction to Next Paint)	≤ 200ms	≤ 500ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	≤ 0.25	> 0.25

TTFB diagnosis

When TTFB is too high (> 800ms), check each component in the Network panel:

• Slow DNS → add <link rel="dns-prefetch"> or preconnect for known origins.
• Slow TCP/TLS handshake → enable HTTP/2, consider edge deployment, check keep-alive.
• Slow server processing → profile the backend, find slow queries, add caching.

Frontend

Images

• Modern formats (WebP, AVIF).
• Responsive sizing (srcset + sizes).
• Explicit width/height on <img> and <source> (prevents CLS).
• Below-the-fold images use loading="lazy" and decoding="async".
• Hero/LCP images use fetchpriority="high" and are not lazy-loaded.

JavaScript

• Initial bundle < 200 KB gzipped.
• Code splitting via dynamic import() for routes and heavy features.
• Tree shaking enabled (dependency ships ESM, marked sideEffects: false).
• No render-blocking JS in <head> (use defer/async).
• Heavy computation offloaded to Web Workers where applicable.
• React.memo() on expensive components that re-render with identical props.
• useMemo()/useCallback() only where profiling shows real benefit.
• Long tasks (> 50ms) broken up — the main lever for INP.
• yieldToMain inside long loops so input can run between iterations.
• Modern scheduling where available: scheduler.yield() (preferred), scheduler.postTask() with priorities, isInputPending().
• requestIdleCallback for deferrable work (analytics, prefetch, cache warming).
• Non-critical work moved out of event handlers (analytics, logging) so it doesn't delay interaction response.
• Third-party scripts async/defer, size-checked, facaded if heavy (chat widgets, embeds).