Web Performance Checklist

Measure first

0/4

Check field data (CrUX or real-user monitoring) before lab tools, since it reflects actual visitors' devices and networksA lab score on a fast dev machine can look great while real users on mid-range phones have a genuinely slow experience.
Record baseline LCP, INP, and CLS before making any changesWithout a baseline there's no way to tell whether a later change actually helped or just felt like it should.
Test on a throttled mobile profile, not just a fast desktop connectionMedian real-world conditions are far closer to a mid-tier phone on a mediocre connection than to office wifi.
Identify which specific page templates are slowest, rather than auditing only the homepageThe homepage is often the most optimized page on a site precisely because it gets audited the most.

0/5

Identify the single element responsible for LCP and confirm it isn't render-blockedLCP measures the largest visible element's render time — optimizing anything else first won't move the metric that matters.
Preload the LCP resource (hero image, critical font) directly in the document headA preload hint gets the browser fetching the resource before it would otherwise discover it deep in the render process.
Move non-critical CSS and JavaScript off the critical rendering pathAnything blocking render before first paint delays every metric downstream of it, not just one.
Check for excessive server response time (TTFB), since every other metric starts after itA slow TTFB pushes back LCP and every paint metric no matter how optimized the front end is.
Verify a CDN serves static assets close to where real users actually areNetwork latency compounds on every request — serving from a nearby edge cuts that cost across the whole page.

0/5

Serve images in a modern format (WebP or AVIF) with a JPEG/PNG fallback if neededThese formats routinely cut file size 25-50% over JPEG at equivalent visual quality, which is pure load-time saved.
Set explicit width and height (or aspect-ratio) on every image and embedThis is what lets the browser reserve space before the image loads, which is the direct fix for layout-shift-driven CLS.
Lazy-load images below the fold, but never the LCP image itselfLazy-loading the LCP candidate delays exactly the element that metric is timing, working against the goal.
Serve responsive image sizes via srcset instead of one large file scaled down by CSSA phone downloading a desktop-sized hero image pays the full byte cost for pixels it never renders.
Compress video and prefer streaming formats over a large autoplaying file loaded wholeAn uncompressed autoplay video can dwarf every other asset on the page combined.

0/5

Audit bundle size and remove or defer anything not needed for first renderUnused JavaScript still has to be downloaded, parsed, and compiled before the browser gets to what actually matters.
Break up long tasks on the main thread — anything over 50ms delays input responseThis is precisely what INP measures: a busy main thread delays how quickly a click or tap gets a visible response.
Code-split by route so a page only loads the JavaScript it actually usesA shared bundle loaded everywhere means every page pays the download cost of code most visits never execute.
Defer or lazy-load third-party scripts (analytics, chat widgets, ads) that aren't needed immediatelyThird-party scripts are a common and often invisible source of both blocked rendering and slow interaction response.
Audit event handlers and effects for work that runs more often than the interaction actually requiresA handler that re-runs expensive work on every scroll or keystroke is a common, avoidable cause of poor INP.

0/4

Preload critical web fonts and set font-display: swap or optionalWithout this, the browser can hide text for seconds waiting on a font — the classic flash-of-invisible-text, and its own CLS risk.
Subset fonts to only the character sets and weights actually usedA full font family with unused weights and scripts adds download weight for nothing the page ever displays.
Match the fallback font's metrics to the web font to avoid a layout shift on swapMismatched line-height or character width between fallback and final font is a frequent, easily fixed cause of CLS.
Remove unused CSS rules and avoid shipping one large stylesheet to every pageUnused CSS is parsed and held in memory for no benefit, and large stylesheets delay first paint on pages that need only a fraction of the rules.