AI-generated image
Performance

Web Performance Tuning Checklist 2026

4 min read

Five years ago I wrote a performance checklist for ScipioERP and it still gets traffic. A lot of it still holds up, too. But a lot has changed - INP replaced FID, AVIF made WebP look inefficient, and edge-first went from conference talk to standard practice. So here is the updated version, based on what actually moved the needle on our client projects this year.

If you want the full story of how we got Jewellerybox.co.uk to the top of UK fashion store performance rankings, that post is still worth reading. This one is the quick-reference list.

Server and infrastructure

Move your rendering to the edge. This is the single biggest change since 2021. Cloudflare Workers, Vercel Edge Functions, Deno Deploy - pick one. We moved a client’s SSR from a Frankfurt data center to edge nodes and TTFB dropped from 320ms to under 50ms for visitors in the US. That one change pushed the PageSpeed score by 15 points.

HTTP/3 with QUIC. If your CDN does not support it yet, switch CDNs. Connection setup alone saves 100-200ms on first visit, and that matters more on mobile than people think.

Brotli, pre-compressed at build time. Gzip is fine, but Brotli saves another 15-25% on text assets. Pre-compress them in your build pipeline so your server does not waste CPU on it per request.

Review your DNS. I still find clients on slow DNS providers. Switch to Cloudflare or Route 53. A DNS lookup adds 20-80ms per uncached domain, and most sites hit three or four domains before anything renders.

Images - still the biggest win

AVIF first, WebP fallback, JPEG last resort. AVIF compresses 30-50% better than WebP for photos. Use a <picture> element. We spent a lot of time on this back in 2021, and the picture-tag setup is still fiddly, but the payoff is real.

Do not serve a 2400px hero image to a phone. I know this sounds obvious. I still see it on client sites weekly. Use srcset and sizes. Actually set them.

Do not lazy-load your LCP image. This trips people up. Lazy-load everything below the fold, yes. But the LCP element - usually the hero image - should load immediately. Lazy-loading it makes the biggest image on the page load last. The score tanks.

Fonts

Variable fonts. One file replaces four or five weight/style files. Fewer requests, smaller download. We switched a client from five separate woff2 files to one variable font and shaved 120KB off the initial load.

font-display: optional. This is better than swap for CLS. If the font is not cached yet, the browser skips it entirely and uses the fallback. No flash, no shift. The user sees the fallback font on first visit and the real font on every visit after. Most people cannot tell the difference.

INP - the new pain

INP replaced First Input Delay in March 2024 and it measures something much harder. Not just the first click, but the worst interaction during the entire session. A page can feel fast on load and still fail INP because a dropdown menu blocks the main thread for 200ms.

Break up long tasks. Anything over 50ms blocks the thread. Use scheduler.yield() if you can, or just split the work. We had a product filtering component that ran a single 180ms task. Breaking it into three 60ms chunks fixed the INP score without changing anything the user could see.

Defer everything that is not needed for the first paint. Analytics, chat widgets, social embeds. None of these need to run before the page is interactive. I made this mistake on our own site - Chatwoot was loading synchronously and adding 400ms to every page. Switched it to load on first click and the problem went away.

Virtualize long lists. If you render 500+ items in a scrolling list, use a virtual scroll library. The DOM has limits and INP will find them.

What I am watching for 2027

The Speculation Rules API is interesting. Chrome supports it, Firefox is working on it. Prerender pages the user is likely to visit next, and when it works, navigation feels instant - literally zero load time on the next page.

View Transitions API is the other one. Native page transitions without JavaScript. Makes multi-page apps feel like SPAs without the SPA overhead. We have not used it on a client project yet, but I suspect we will within the year.

If any of this is on your list and you need help - get in touch. We have been doing this for a while and it is one of the parts of the job I genuinely enjoy.