# Critical rendering path minimized - **Pattern:** `ab-001997` (`performance-core.loading-resource-priority.critical-path`) - **Severity:** critical - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-001997 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001997) ## 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 ``, 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: 1. Inline critical above-fold CSS (under 14 KB) and defer everything else: ```html ``` 2. Mark non-critical scripts as `defer` or `async`: ```html ``` 3. 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 ` ``` 3. Inlining critical CSS for above-fold content: ```html ``` 4. Using Web Fonts with font-display strategies (see font loading checks). ## External references - iso-25010 performance-efficiency.time-behaviour Taxons: performance HTML version: https://auditbuffet.com/patterns/ab-001997