Critical Rendering Path
The sequence of steps between receiving HTML and painting pixels, and everything that blocks it.
The critical rendering path is the chain of work a browser must complete before it can paint: parse the HTML, fetch and parse the stylesheets, build the render tree, lay out, and paint. Anything that must finish before that chain can proceed is render-blocking, and the length of the chain is what a visitor experiences as load time.
Stylesheets are render-blocking by default — the browser will not paint content it might have to restyle. Synchronous scripts in the head block parsing. Fonts introduce their own delay, since text using an unavailable font is either invisible or shown in a fallback and then reflowed; see Web Font Loading.
The optimizations follow from the structure: inline the small amount of CSS needed for the first screen and load the rest asynchronously, defer scripts, preload resources that the browser could not otherwise discover until late, and avoid chained requests — a stylesheet that imports another stylesheet that references a font is three round trips deep before anything paints.
Preloading is worth a caution: it is a hint the framework must actually emit. Preload directives can silently stop being emitted across a framework upgrade, putting resources back into the chain with no error anywhere — a Silent Failure that only a look at the served HTML reveals.
See also5
Core Web Vitals
Google's small set of user-centered performance metrics: loading, interactivity, and visual stability.
Web Platform28 connections
Lazy Loading
Deferring the fetch of a resource until it is needed, or until the browser is idle.
Web Platform21 connections
Cascading Style Sheets
The language that describes how web pages look, proposed in 1994 to separate presentation from structure, nearly sunk by inconsistent browser support, and grown since into a layout and animation system that does work once reserved for scripts.
Web Platform11 connections
Server-Side Rendering
Producing a page's HTML on the server so the first response is already content.
Web Platform23 connections
Hydration
Attaching client-side behavior to server-rendered markup without rebuilding it.
Web Platform18 connections
Related6
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from13
- Above the FoldDesign & Interface
The part of a page visible without scrolling, a newspaper idea carried onto the web, where it still matters for first impressions and loading but no longer means people won't scroll.
- Box ModelDesign & Interface
The rule that every element on a web page is a rectangle of content wrapped in padding, border, and margin, and the two quirks, box sizing and collapsing margins, behind most surprises in CSS spacing.
- Cascading Style SheetsWeb Platform
The language that describes how web pages look, proposed in 1994 to separate presentation from structure, nearly sunk by inconsistent browser support, and grown since into a layout and animation system that does work once reserved for scripts.
- Core Web VitalsWeb Platform
Google's small set of user-centered performance metrics: loading, interactivity, and visual stability.
- Data CompressionComputation & Algorithms
Representing data in fewer bits by exploiting its patterns, either exactly (lossless) or by discarding what people won't notice (lossy), with limits set by information theory.
- Data URIWeb Platform
A URL that carries its content inside the address itself, used to embed small images in pages and stylesheets without a separate request, and abused for phishing until browsers restricted it.
- HTTP2 and HTTP3Web Platform
Two successive rewrites of HTTP's transport layer, each solving the previous version's head-of-line blocking at a different layer.
- HydrationWeb Platform
Attaching client-side behavior to server-rendered markup without rebuilding it.
- Lazy LoadingWeb Platform
Deferring the fetch of a resource until it is needed, or until the browser is idle.
- Preload and PrefetchWeb Platform
Two resource hints with opposite priorities — preload for what this page needs now, prefetch for what the next page might need.
- Streaming ResponseNetworks & Distribution
Delivering a response incrementally as it is produced rather than all at once when complete.
- Virtual ScrollingWeb Platform
Rendering only the rows of a long list that are on screen and recycling them as the user scrolls, so a list of a million items costs about as much to display as a list of thirty.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.