Engrain by ByteRush

WEB.01.05 Mid-level· 11 minCore — asked often

The critical rendering path: getting to the first paint sooner

What the browser needs before it can paint, how critical CSS and resource hints (preload, preconnect, dns-prefetch, modulepreload, fetchpriority) shorten the wait, font-display, and 103 Early Hints.

Comes up in: Web fundamentals, Frontend system design

Learn#

Shreya’s news site takes 2.8 seconds to show any text on a slow phone, though the HTML is only 20 KB. The CSS loads a second CSS file, which loads the web font.

The critical rendering path is everything the browser must download and process before the first paint: the HTML, then every render-blocking resource it finds, such as stylesheets and plain scripts in the head (WEB.01.02). Each resource discovered only after another one arrives adds a round trip.

Shorten the path three ways: fewer blocking resources, smaller ones, and starting them earlier. Inline the small “critical CSS” for the top of the page, and load the rest without blocking.

A resource hint tells the browser about work it cannot see yet:

<link rel="preconnect" href="https://images.example-cdn.com">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image" fetchpriority="high">
<link rel="modulepreload" href="/app.js">
Removing round trips before the first paintStep 1 of 4

Network

  • HTML ✓ 300 ms
  • app.css …

Page

    empty

    Before: the HTML arrives at 300 ms. It links app.css, which imports fonts.css. Nothing can paint yet.

    Read the steps as text
    1. Before: the HTML arrives at 300 ms. It links app.css, which imports fonts.css. Nothing can paint yet.
    2. app.css arrives at 700 ms and reveals fonts.css and the font files. Another round trip each.
    3. After: critical CSS is inlined, the font is preloaded, and the hero image has fetchpriority=high. All start with the HTML.
    4. The first paint happens right after the HTML, and the hero image, the LCP element, arrives sooner.

    Predict#

    Predict first

    You preload a font but forget crossorigin. What happens?

    Interview angle#

    Say it like this — about 30 seconds

    “The critical rendering path is the work before the first paint: HTML, then the CSS and blocking scripts it references, then the CSSOM, render tree, layout and paint. To speed it up I reduce blocking resources, inline critical CSS, defer scripts, and start late-discovered resources earlier with hints: preconnect for third-party origins, preload for fonts and the LCP image, fetchpriority high on the hero image. Fonts get font-display swap or optional. 103 Early Hints can send preloads before the HTML is ready.”

    Stays on your device. Nothing is uploaded.
    Follow-up preload vs preconnect?
    preconnect opens a connection (DNS, TCP, TLS) to an origin; preload downloads a specific file you will need soon.
    Follow-up What does font-display: swap do?
    It shows fallback text at once and swaps in the web font when it arrives, instead of hiding text.
    Follow-up What are 103 Early Hints?
    An early response from the server with Link headers, sent while it is still building the HTML, so preloads and preconnects start sooner.

    Practice#

    Guided

    Generate a fast <head> from a page description: connections first, then preloads, then CSS and deferred scripts.

    Done when

    • Each third-party origin gets a preconnect, and each font a crossorigin preload.
    • The LCP image is preloaded with fetchpriority="high".
    • Scripts are deferred, and the order matches the five groups.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    What is the critical rendering path?

    Everything the browser must fetch and process before the first paint.

    Why must a font preload have crossorigin?

    Fonts load in CORS mode; without it the preload is not reused.

    preconnect vs preload?

    preconnect opens a connection to an origin; preload fetches a specific file.

    Which attribute raises the priority of the LCP image?

    fetchpriority="high"

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round

    Measure first: in Lighthouse, “Render-blocking resources” and “Network dependency tree” show the chain. Then remove, shrink or start earlier, in that order.

    Check yourself: Name three ways to shorten the critical path.

    Fewer blocking resources, smaller ones, and starting them earlier.

    How it works underneathSenior rounds

    dns-prefetch resolves only DNS; preconnect also opens TCP and TLS, so limit it to a few origins. modulepreload fetches and parses an ES module and its graph early. fetchpriority raises or lowers one request: Chrome 102, Firefox 132, Safari 17.2 .

    Check yourself: What does dns-prefetch do that preconnect does not?

    Only the DNS lookup; it is cheaper and a fallback for many origins.

    Edge cases and trapsWhere people slip

    By default, browsers hide text that uses a web font for up to about 3 seconds while the font loads. font-display changes that. swap shows fallback text first but can shift layout when the font arrives; optional uses the font only if it is ready almost at once.
    Match fallback metrics with size-adjust to reduce shifts.

    Check yourself: Which font-display value avoids layout shift best?

    optional: it uses the web font only if it arrives very early.

    In productionStaff-level answers
    A server can send 103 Early Hints with Link: <…>; rel=preload headers while it is still building the page, so the browser starts fetching during server time. CDNs such as Cloudflare support it .
    Check yourself: Why are 103 Early Hints useful for server-rendered pages?

    The server can start preloads during the time it spends building the HTML.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • What is the critical rendering path and how do you optimise it?