How fast a page really feels is decided in the browser. This category collects articles on the front-end side of optimisation: image formats and responsive sizes, web fonts and their loading behaviour, CSS delivery and critical styles, JavaScript bundles and how to split them, deferred loading, third-party scripts and their side effects. We explain how layout shifts occur and how reserved space prevents them, why interactivity suffers under long tasks and which techniques reduce the main work in the browser. Every article describes measurement before and after the change, so the effect of a measure can be quantified rather than assumed. We also cover collaboration: which requirements for design and editing prevent every new page from degrading loading time again.
On this page you will find all posts on the topic “Front-end optimisation”. The newest posts are at the top.
Below each title there is a short text about it. Click on a post. Then you can read the whole text.
Above the list you also see the other topics. At the bottom, a link takes you back to all posts.
Chrome 155 and Firefox 158 decode JPEG XL. When the format pays off next to AVIF and WebP for shops, and how to repack JPEGs losslessly and serve them safely.
Domain sharding, bundles, sprites and data URIs date from the HTTP/1.1 era. How to spot them in the waterfall and roll them back safely under HTTP/2.
Why the image carousel at the top of the page is often the LCP element, how autoplay drives CLS and how a slider loads fast, stays stable and can be paused.
Why style calculation costs time at runtime, how Selector Stats and Long Animation Frames make its share visible, and which changes actually shrink the scope.
Why anti-flicker layers push out Largest Contentful Paint, how to measure their share of the first paint and which setups carry a test without hiding the page.
How much CSS a page really needs, how to measure the unused share reliably and in which order to remove ballast without breaking the rendering.
The interface starts fast and turns sluggish after twenty minutes: how front-end memory leaks arise, how to measure them over time and how to get rid of them.
Native, GPU-accelerated page changes in your shop without a JavaScript framework: how cross-document view transitions smooth the jump from category to product.
How a service worker with precaching keeps critical files local, serves repeat visits with almost no server round trip and when the effort truly pays off.
content-visibility and CSS containment limit the rendering work of long pages to the visible area - with placeholder heights that avoid new layout shifts.
Compression dictionary transport per RFC 9842: how browsers and servers ship bundles as deltas against the previous version - patterns, configuration, fallback.
How the back/forward cache keeps whole pages in memory and makes back navigation instant: blockers, Cache-Control: no-store and testing in DevTools.
How the Speculation Rules API prefetches or prerenders next pages, tunes eagerness correctly, and avoids wasted prerenders and analytics side effects.
How fetchpriority='high' loads the LCP image sooner: correct use, interplay with preload and srcset, the most common mistakes and the LCP quick win.
How preload, prefetch, preconnect, dns-prefetch and priority hints shorten connection setup, speed up the LCP image and fonts – and where over-loading hurts.
Lazy loading for images and components, route-based code splitting and dynamic imports cut initial JavaScript and improve Core Web Vitals on every page.
Web fonts cost load time and cause layout shifts. Learn how to optimize fonts with font-display, preload, subsetting and WOFF2 for fast pages.
Video as an underrated load-time driver: poster as LCP candidate, lean preload, modern codecs and facades for embedded players - so no video slows the page.
Smooth animations without jank: the 16.7 ms frame budget, why only transform and opacity stay cheap, and how to hunt down frontend jank in the DevTools.