Critical Request Chains

Name: Critical Request Chains
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Identifies long chains of dependent requests that block rendering and flattens them by inlining critical CSS or adding preload hints.

About

A frontend-checklist performance rule for minimizing critical request chains. A developer uses it when dependent resource requests delay first render.

Inline critical CSS to avoid extra roundtrips
Preload essential assets found deep in the chain

Critical Request Chains by the numbers

1 all-time installs (skills.sh)
Ranked #1,912 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill critical-request-chains

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/critical-request-chains.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/critical-request-chains)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Identifies long chains of dependent requests that block rendering and flattens them by inlining critical CSS or adding preload hints.

Files

SKILL.mdMarkdownGitHub ↗

Minimize critical request chains

Long chains of dependent requests delay the initial rendering of the page, as each resource must wait for its parent to be fetched and processed.

Quick Reference

Reduce the depth of dependent resource requests
Inline critical CSS to avoid extra network roundtrips
Use preload hints for essential assets found deep in the chain

Check

Identify long chains of dependent requests that block the critical rendering path using Lighthouse or WebPageTest.

Fix

Flatten the request chain by inlining critical resources or using preload hints for essential assets.

Explain

Explain how critical request chains impact the Time to First Paint and how to optimize the rendering path.

Code Review

Review the routes, assets, and loading behavior that affect Minimize critical request chains. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/performance/critical-request-chains

Minimize critical request chains

Reduce the number and depth of dependent resource requests that block the initial rendering of the page.

Priority: high · Difficulty: advanced · Time: 20 min

--- A critical request chain is a series of dependent network requests that are required for the browser to start rendering the page. For example, an HTML file loads a CSS file, which in turn loads a web font.

Code Examples

The Problem: A Long Chain

1. index.html 2. └── styles.css (discovered in HTML) 3. └── font.woff2 (discovered in CSS via @font-face)

The Solution: Preloading and Inlining

1. Preload Deep Resources

Tell the browser about the font early in the index.html.

<head>
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
</head>

2. Inline Critical CSS

Avoid the first network request for CSS by inlining the styles needed for the above-the-fold content.

<head>
  <style>
    /* Critical CSS here */
    body { font-family: 'Inter', sans-serif; }
    .hero { height: 100vh; background: #000; }
  </style>
</head>

3. Avoid CSS `@import`

Never use @import inside CSS files, as it creates another level of dependency. Use <link> tags in HTML instead.

/* Bad: styles.css */
@import url("reset.css"); /* This creates a chain */

Why It Matters

Rendering Delay: Each "link" in the chain adds a network roundtrip, delaying the First Contentful Paint.
Network Bottlenecks: Multiple dependent requests can saturate the browser's request limit for a single domain.
Increased Latency: On mobile networks with high latency, each additional request in a chain significantly compounds the delay.
Resource Priority: Deeply nested resources are often discovered late by the browser, missing out on early download opportunities.

Best Practices

Use a real request waterfall in Lighthouse or WebPageTest to verify that critical assets are discovered earlier after the change, because this rule is about dependency order, not just total byte count.

✅ Limit Chain Depth: Aim for a maximum depth of 2 or 3 for critical resources. ✅ Inline Small Assets: If a script or stylesheet is very small (e.g., < 2KB), consider inlining it directly in the HTML. ✅ Use HTTP/2 or HTTP/3: These protocols allow for better multiplexing, but minimizing dependencies is still crucial. ✅ Audit Third-Party Scripts: Third-party libraries often introduce long, hidden request chains.

❌ Don't Use `@import`: It's one of the most common causes of deep request chains. ❌ Avoid Chained Redirects: Ensure that critical resources don't involve multiple server-side redirects.

Tools & Validation

Lighthouse: Specifically lists "Critical Request Chains" in the Performance report.
WebPageTest: Use the "Request Waterfall" to visually identify chains.
Chrome DevTools: The "Network" tab shows the initiator for each request, helping you trace the chain.

Support Notes

Network waterfalls differ by browser and connection profile, so evaluate critical request chains on throttled target browsers, not only on local desktop.
Framework preloading and CDN behavior can reduce or hide chains in some environments; verify the live path before treating a static dependency graph as final.

Verification

Automated Checks

Measure the affected page or flow in Lighthouse, PageSpeed Insights, or DevTools and confirm the targeted metric improves.
Inspect the network waterfall or performance timeline to confirm the intended resource or execution change actually took effect.

Manual Checks

Verify the change on a throttled mobile profile, not just local desktop.
If this rule maps to a budget or Web Vital, confirm the page now stays within that threshold.