Critical request chains medium
Avoid chaining critical requests
Render-blocking resources that each depend on the previous one form a long serial chain, adding a round-trip per hop.
What you see
Avoid chaining critical requests — 5 chains found The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
What’s actually happening
First Contentful Paint and Largest Contentful Paint land later than the total download size would suggest. The diagnostic draws a tree: HTML loads CSS, that CSS @imports another stylesheet, which references a font — and nothing paints until the whole chain resolves. Each arrow in the tree is a serial round-trip the browser can't parallelize, so latency stacks up even on a fast connection.
Common causes
- CSS using @import to pull in more CSS — the browser can't even discover the second file until the first one downloads and parses.
- A render-blocking stylesheet that references a web font, so the font request only fires after the CSS arrives.
- JavaScript that fetches a config or another script, which then fetches the real payload — a dependency staircase.
- Critical assets discovered deep in the parse instead of being declared up front for the preloader.
- An over-deep module graph where the entry chunk imports a chunk that imports another before anything renders.
How to fix it
- Map the chain in the auditThe tree shows each chain with its longest path and total bytes. Find the deepest chain and the round-trips inside it — that's what's delaying paint. Shortening the longest path matters more than shrinking any single file.
- Kill CSS @importReplace @import statements with multiple <link rel="stylesheet"> tags in the HTML, or bundle the stylesheets into one at build time. Links can be fetched in parallel; @import forces sequential discovery.
- Inline critical CSSExtract the styles needed for above-the-fold content and inline them in a <style> block in the <head>, then load the full stylesheet asynchronously (rel="preload" ... onload, or media-swap). The first paint no longer waits on a network hop. Tools like Critical or Beasties (formerly Critters) automate the extraction.
- Preload assets buried in the chainFor a font or image the browser only discovers late, add <link rel="preload"> in the <head> so the request starts immediately instead of after its parent resolves. This flattens one hop out of the chain.
- Flatten the JS dependency graphAvoid scripts that fetch other scripts before rendering. Bundle the dependency, or use modulepreload to fetch the chained modules in parallel rather than one after another.
Stop it recurring
Watch the critical-request-chains diagnostic in Lighthouse CI and treat a growing chain depth as a regression to investigate.
Related errors