Modern Web Performance Checklist 2026: 37 Wins

This is a web performance checklist for 2026 — 37 concrete, current items grouped so you can work through them top to bottom. It pulls together the highest-leverage techniques for a fast site: measure first, ship less and deliver it well, keep the main thread free, and lock in the wins so they don’t regress. Each item links out to a deeper guide where there’s more to say.

Measurement & goals

• Measure real-user field data (Chrome UX Report / the web-vitals library), not just Lighthouse lab scores.
• Set explicit budgets — a target initial JS size and Core Web Vitals goals (LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 at the 75th percentile).
• Profile before optimizing: use the DevTools Performance panel to find the real bottleneck instead of guessing.
• Test on a mid-range phone and throttled network, not just your fast laptop.

Loading & delivery

• Serve everything over HTTP/2 or HTTP/3 from a CDN/edge close to users.
• Improve TTFB with server-side and edge caching; use preconnect to warm critical third-party origins.
• Enable Brotli compression (gzip fallback) for all text assets.
• Eliminate render-blocking resources: inline critical CSS, defer the rest, load scripts with defer/async.
• Preload only the few genuinely critical resources (the LCP image, one hero font) — over-preloading backfires.

JavaScript

• Code-split by route so first load ships only the current page — see the code splitting guide.
• Tree-shake and delete dead code (ESM + sideEffects, knip) — see the tree shaking guide.
• Audit dependencies; replace heavy libraries (e.g. moment → dayjs) — see how to reduce bundle size.
• Break up long tasks (over 50ms) and yield with scheduler.yield() (feature-detected for Safari) to protect INP.
• Move CPU-heavy work to a Web Worker; lazy-load non-critical code with dynamic import().
• See how to speed up JavaScript for the full set.

CSS

• Remove unused CSS; inline the critical above-the-fold styles and async-load the rest.
• Animate only transform/opacity (GPU-composited); avoid animating layout properties.
• Skip offscreen work with content-visibility: auto (+ contain-intrinsic-size) and contain.
• See how to optimize CSS for all 14 techniques.

Images & media

• Serve modern formats — AVIF → WebP → fallback — via <picture>.
• Use srcset/sizes so each device downloads the right size.
• Set width/height (or aspect-ratio) on every image to prevent layout shift.
• Lazy-load offscreen images/iframes; never lazy-load the LCP image.
• Give the LCP image fetchpriority="high" (preload it if it’s hidden from the preload scanner).
• See the image optimization guide for compression, CDNs and placeholders.

Fonts

• Ship WOFF2, subset to the characters you use, and preload the one critical font.
• Use font-display: swap and size-match the fallback (size-adjust) to avoid FOIT and layout shift.
• Prefer a system font stack for body/UI text where a brand font isn’t required.

Core Web Vitals

• LCP: optimize the LCP element, cut render-blocking resources, improve TTFB.
• INP: break up long tasks, minimize main-thread JS, defer non-urgent updates (React useTransition).
• CLS: reserve space for media/ads, don’t inject content above the fold, tame the font swap.
• Remember INP replaced FID in March 2024; see how to improve Core Web Vitals.

Caching & network

• Serve content-hashed static assets with Cache-Control: immutable, max-age=31536000; cache HTML short.
• Add a service worker / PWA cache for repeat-visit and offline speed where it fits.
• Reduce third-party scripts; lazy-load or facade heavy embeds (chat, video, maps).

Monitoring

• Run Lighthouse CI on pull requests as a lab guardrail.
• Track real-user monitoring (field Core Web Vitals) continuously, watching the 75th percentile.
• Enforce a bundle-size budget in CI (e.g. size-limit) so performance can’t silently regress.

Use the checklist

Work it top to bottom, but start where your data points: pull a real-user Core Web Vitals report, find your worst metric, and fix its section first. Re-measure after each change — performance work is only real when the field numbers move.

Prototype and benchmark changes instantly in XCODX Studio — run real code with npm packages in the browser, no setup. Then go deep with our guides on Core Web Vitals, bundle size, images and JavaScript speed.