← Back to Caching and Performance

Website Performance Optimization

Frontend performance through smaller bundles, faster rendering, and leaner assets.

Caching and PerformanceFrontendPerformance

Fast websites are usually the result of disciplined tradeoffs, not one secret trick. The browser has to download bytes, decide what matters first, build the page, run scripts, and keep the main thread responsive while the user interacts. Performance work improves one or more of those steps.

Shrink the amount of work

The first win is almost always fewer bytes. Compress text assets with Brotli or gzip. Ship modern image formats where browser support allows it. Remove unused JavaScript and CSS instead of assuming compression will save you. A page with a 900 kB bundle can still feel slow even if the transfer is compressed, because parsing and execution also cost time.

This is why code splitting matters. Send the code needed for the first screen now and defer the rest until the user actually navigates or opens a heavy component. Apply the same logic to images. A full-resolution hero image loaded on a mobile device over a weak connection is a tax on every visit.

Prioritise the critical path

A browser cannot paint meaningful content until it has enough HTML and CSS to lay out the page. Keep the critical rendering path short. Inline only truly critical CSS, preload high-value assets such as key fonts, and avoid scripts that block parsing unless they are essential. Server-side rendering or static generation can improve perceived speed because the browser receives useful markup earlier, but those strategies only help if the HTML arrives quickly and hydration cost stays under control.

Third-party scripts deserve special suspicion. Analytics, chat widgets, A/B tools, and ad tech often compete for bandwidth and main-thread time at the exact moment your page is trying to become interactive. If a third party is not worth a measurable business outcome, it is not worth the latency budget.

Protect the main thread

Pages feel slow when input is delayed, even if the network is fast. Large client-side rendering passes, heavy event handlers, and long JavaScript tasks can freeze scrolling and typing. Use windowing for long lists, debounce expensive work, and move non-UI computation into web workers where appropriate. The goal is not only faster load, but smoother interaction under real user behaviour.

Cache deliberately and measure honestly

Good caching turns repeated visits into much cheaper visits. Fingerprinted static assets can be cached aggressively. API responses may need short TTLs, revalidation, or stale-while-revalidate depending on how fresh the data must be. A CDN reduces distance, but it does not fix uncacheable pages or oversized assets.

Finally, optimise with measurements, not instinct. Core Web Vitals, network waterfalls, bundle analysis, and real-user monitoring reveal where the page actually spends time. Performance is a budget. Every framework choice, animation, image, and script spends part of it.