Break the render-blocking chain

React chapter 150 · Web Perf · FCP · render-blocking CSS, fonts, scripts, dependency chains · source: Todd H. Gardner, Fundamentals of Web Performance, Part 2 slides 45–57 and 65–83 (FCP, dependency chains, CSS, fonts, and deferred scripts)

The problem

The HTML finds one stylesheet, that stylesheet imports a theme, the theme discovers a font, and a synchronous script pauses the parser. The files are not individually huge, but the browser must discover and finish them in sequence before useful pixels can appear.

The pattern that fixes it

Flatten the critical chain: link or bundle critical CSS directly, defer non-critical scripts, use font-display: swap, and postpone resources that do not affect the first screen. Inline only small, measured critical CSS; keep the rest cacheable.

In plain words

A render-blocking resource makes the browser wait before it can draw the page. The worst delays often come from one required file revealing the next required file, so fix the chain as well as the file size.

A painter cannot start while the color instructions are locked inside three nested envelopes. Put the essential instructions on the clipboard and deliver the decorations later.

Terms

render blocking
A resource or task that must finish before the browser can produce the next paint.
CSSOM
The browser’s parsed model of active CSS. It combines with the DOM to build the render tree.
dependency chain
Resource A must download before the browser can discover resource B, which then reveals resource C.
parser blocking
A classic synchronous script pauses HTML parsing while it downloads and executes.

Going deeper

CSS and fonts block different things

An active stylesheet blocks rendering because the browser needs the CSSOM to know what the page looks like. A web font usually blocks the affected text for a limited period rather than every pixel on the page. font-display: swap lets fallback text paint while the font loads.

Remove discovery chains before shaving milliseconds

A CSS @import, another imported stylesheet, and a font URL create serial discovery. Link critical styles from the document or let Vite bundle the imports so requests can start earlier. In DevTools, follow the Initiator chain and look for stair-step requests before FCP.

Choose the script behavior deliberately

A classic script without defer or async blocks the parser. defer downloads in parallel, runs after parsing, and preserves document order. Module scripts are deferred by default. async runs whenever its download finishes, so use it only for independent code whose execution order does not matter.

Critical CSS is a measured exception

Inlining a small amount of above-the-fold CSS can remove a request, but too much inflates every HTML response and cannot be cached separately. Extract only what the first screen needs, load the remaining stylesheet normally, and check both FCP and visual correctness.

Keep learning

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.