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.
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.
Shorten the critical path by eliminating render-blocking resources. Apply these three changes in src/app/layout.tsx or your root HTML:
<style>{criticalCSS}</style>
<link rel="preload" as="style" href="/styles/main.css" onload="this.onload=null;this.rel='stylesheet'">
defer or async:<script defer src="/js/app.js"></script>
<script async src="/js/analytics.js"></script>
ID: performance-core.loading-resource-priority.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:
Moving non-critical CSS to media queries or async loading:
<link rel="stylesheet" href="print.css" media="print">
Making scripts non-blocking with async or defer:
<script defer src="app.js"></script>
<script async src="analytics.js"></script>
Inlining critical CSS for above-fold content:
<style>{criticalCSS}</style>
Using Web Fonts with font-display strategies (see font loading checks).