Critical request chain

A download waiting on another download that was waiting on another, turning the route to the first useful screen into a slow staircase.

why does one download wait for anotherwhy does my font show up so latecss loads a font which loads something elserequests loading one after anotherthe long staircase in devtoolsnothing downloads in parallelone file has to finish before the next one even startscritial request chain

See it

Live demo coming soon

What it is

A critical request chain is a line of important downloads that the browser can only discover one at a time. The HTML points to a stylesheet, the stylesheet points to a font, and only after that font is found can its download begin. Each link adds its own connection, wait, and transfer time to the path before useful pixels appear.

Look for the staircase in a Chrome DevTools Network waterfall and follow the Initiator column backward; Lighthouse flags the same thing under its 'Avoid chaining critical requests' audit. Shorten the chain by putting critical resources in the initial HTML, inlining small critical CSS, or preloading a genuinely late-discovered font or hero image.

Gotcha: more preloads do not mean a faster page. Every <link rel='preload'> competes for bandwidth, and a wrong 'as' value can prevent reuse of the response. Preload only resources on the measured critical chain, and confirm in the waterfall that discovery moved earlier without delaying something more important.

Ask AI for it

Shorten this page's critical request chains. Record a cold-load Chrome DevTools Network waterfall, enable the Initiator column, and trace every render-critical request back to the HTML document. Put critical CSS in the initial response, move required stylesheet links into the document head, and add <link rel='preload'> only for a late-discovered font or LCP image that the waterfall proves is on the chain. Set the correct 'as' value and 'crossorigin' on cross-origin font preloads. Remove unused preloads, repeat the cold load, and report the longest chain and its total duration before and after.

You might have meant

critical rendering pathwaterfall chartrender blocking resourceresource hintscritical css