217 cards
Frontend performance describes how quickly and smoothly a web application loads, renders, and responds to a user's actions. It is not just about raw speed measured in the lab; it shapes user satisfaction, accessibility, search ranking, conversion rates, and the overall perception of product quality. Because users typic...
To act on performance you have to understand the path the browser walks from bytes to pixels. The critical rendering path is the sequence in which the browser parses HTML, builds the CSSOM, combines it with the DOM into a render tree, lays the tree out, paints pixels, and finally composites layers onto the screen. Anyt...
The transport layer shapes perceived performance as much as anything in your application code. HTTP/2 introduced multiplexing so many requests share a single connection without head-of-line blocking at the HTTP layer, along with header compression via HPACK that meaningfully shrinks cookie-heavy traffic. HTTP/3 goes fu...
Images are usually the heaviest assets on a page, and they are also the assets most directly tied to perceived speed and layout stability. Three choices matter: format, size, and loading timing. AVIF now offers the best compression for most photographic content, with WebP as the broadly compatible fallback and JPEG or...
The fastest JavaScript is the JavaScript you never ship, and the rest of the bundle should still be smaller than you think. A practical strategy splits code into three categories: a vendor bundle that changes rarely and benefits from long cache lifetimes, an application bundle that changes more often, and route-level c...
CSS affects performance in two distinct ways: bytes over the wire and work on the main thread. The bytes come from unused rules shipped because removing them by hand is tedious. Tools such as PurgeCSS and the Tailwind JIT engine analyze actual usage in markup files and strip selectors that never match, often cutting st...
Once the page is loaded, the metric that matters is INP, which captures how long users wait between an interaction and the visible response. INP is bottlenecked by main-thread work, because the same thread parses HTML, runs JavaScript, computes style and layout, paints pixels, and dispatches events. A long task is any...
Where you render matters as much as how you render. Server-side rendering produces meaningful HTML before client-side JavaScript finishes, which improves LCP and SEO at the cost of hydration work on the client. Static-site generation pushes that further by precomputing pages at build time, so the server only needs to s...