Critical rendering path minimized

ab-001997 · performance-core.loading-resource-priority.critical-path

Severity: criticalactive

Why it matters

The critical rendering path (ISO-25010 time-behaviour) is the chain of resources the browser must fetch and process before it can paint the first pixel. Each extra hop — a synchronous script in <head>, a monolithic render-blocking stylesheet, a sequential font request — adds a full network round-trip of latency. On mobile networks with 100–200ms RTT, three sequential blocking resources add 300–600ms of blank-screen time regardless of how fast your server is. This directly worsens FCP, LCP, and the user's first impression.

Severity rationale

Critical because every render-blocking resource in the critical path is a mandatory delay before any visual content appears, compounding latency on every page load.

Remediation

Shorten the critical path by eliminating render-blocking resources. Apply these three changes in src/app/layout.tsx or your root HTML:

Inline critical above-fold CSS (under 14 KB) and defer everything else:

<style>{criticalCSS}</style>
<link rel="preload" as="style" href="/styles/main.css" onload="this.onload=null;this.rel='stylesheet'">

Mark non-critical scripts as defer or async:

<script defer src="/js/app.js"></script>
<script async src="/js/analytics.js"></script>

Verify the fix in DevTools Network: the critical path waterfall should show parallel fetches with at most 2 sequential hops before first paint.

Detection

ID: critical-path
Severity: critical
What to look for: Count all relevant instances and enumerate each. Analyze the resource waterfall (via DevTools Network tab or build output). Identify resources that block rendering: CSS files without media, synchronous <script> tags in <head>, or JavaScript that runs before the page is interactive. Check for parallelized requests and minimal hops in the critical path.
Pass criteria: Resources in the critical path are minimal: no unused CSS in the initial bundle, scripts are async/defer or loaded after the page interactive, and fonts are loaded with font-display strategies. The waterfall shows parallelized requests with short critical paths (under 3 hops). A partial or placeholder implementation does not count as pass.
Fail criteria: Large CSS files block rendering, scripts run synchronously in <head>, or multiple sequential requests delay first paint. Waterfall shows multiple sequential hops or render-blocking resources.
Skip (N/A) when: The project is static HTML with no build process or dynamic rendering.
Detail on fail: Describe the blocking resources. Example: "90KB vendor.css blocks rendering; no media attribute. app.js and analytics.js both synchronous in <head> — 3-hop critical path" or "Three sequential font requests before any content renders".
Remediation: The critical rendering path is the sequence of resources required to render the first pixel. Minimize it by:
1. Moving non-critical CSS to media queries or async loading:
```
<link rel="stylesheet" href="print.css" media="print">
```
2. Making scripts non-blocking with async or defer:
```
<script defer src="app.js"></script>
<script async src="analytics.js"></script>
```
3. Inlining critical CSS for above-fold content:
```
<style>{criticalCSS}</style>
```
4. Using Web Fonts with font-display strategies (see font loading checks).

External references

iso-25010:2011 · performance-efficiency.time-behaviour — Time Behaviour

Taxons

performance

History

2026-04-18·v1.0.0·Initial import from performance-core·automated

Why it matters

Remediation

Shorten the critical path by eliminating render-blocking resources. Apply these three changes in src/app/layout.tsx or your root HTML:

Inline critical above-fold CSS (under 14 KB) and defer everything else:

<style>{criticalCSS}</style>
<link rel="preload" as="style" href="/styles/main.css" onload="this.onload=null;this.rel='stylesheet'">

Mark non-critical scripts as defer or async:

<script defer src="/js/app.js"></script>
<script async src="/js/analytics.js"></script>

Verify the fix in DevTools Network: the critical path waterfall should show parallel fetches with at most 2 sequential hops before first paint.

Detection

ID: critical-path
Severity: critical
What to look for: Count all relevant instances and enumerate each. Analyze the resource waterfall (via DevTools Network tab or build output). Identify resources that block rendering: CSS files without media, synchronous <script> tags in <head>, or JavaScript that runs before the page is interactive. Check for parallelized requests and minimal hops in the critical path.
Pass criteria: Resources in the critical path are minimal: no unused CSS in the initial bundle, scripts are async/defer or loaded after the page interactive, and fonts are loaded with font-display strategies. The waterfall shows parallelized requests with short critical paths (under 3 hops). A partial or placeholder implementation does not count as pass.
Fail criteria: Large CSS files block rendering, scripts run synchronously in <head>, or multiple sequential requests delay first paint. Waterfall shows multiple sequential hops or render-blocking resources.
Skip (N/A) when: The project is static HTML with no build process or dynamic rendering.
Detail on fail: Describe the blocking resources. Example: "90KB vendor.css blocks rendering; no media attribute. app.js and analytics.js both synchronous in <head> — 3-hop critical path" or "Three sequential font requests before any content renders".
Remediation: The critical rendering path is the sequence of resources required to render the first pixel. Minimize it by:
1. Moving non-critical CSS to media queries or async loading:
```
<link rel="stylesheet" href="print.css" media="print">
```
2. Making scripts non-blocking with async or defer:
```
<script defer src="app.js"></script>
<script async src="analytics.js"></script>
```
3. Inlining critical CSS for above-fold content:
```
<style>{criticalCSS}</style>
```
4. Using Web Fonts with font-display strategies (see font loading checks).