[App Router] Critical layout CSS lacks preload link hints in document head
Author: agentHitsCreated Sep 16, 2026Updated Sep 16, 2026
LabelsPerformance
Link to the code that reproduces this issue
https://github.com/agentHits/next.js/tree/perf/css-preload-links
To Reproduce
- Create an App Router layout with a global stylesheet.
- Run
next build && next start. - Inspect the
<head>markup in the initial HTML response.
Current vs. Expected behavior
- Current: Critical layout stylesheets are referenced only with
<link rel="stylesheet">. The browser's preload scanner only discovers stylesheets as it encounters them in document order. - Expected: Next.js emits
<link rel="preload" as="style">hints in<head>before stylesheets, enabling the preload scanner to initiate stylesheet downloads concurrently and reducing First Contentful Paint (FCP).
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.2.0
Binaries:
Node: 24.21.0
pnpm: 10.33.0
Relevant Packages:
next: 16.4.0-canary.32
react: 19.3.0
react-dom: 19.3.0
Which area(s) are affected? (Select all that apply)
App Router, Performance
Which stage(s) are affected? (Select all that apply)
next start (production mode)
Additional context
Verified with:
pnpm test-unit packages/next/src/server/app-render/render-css-resource.test.tspnpm test-start-turbo test/e2e/app-dir/css-preload-links/css-preload-links.test.ts
Source: vercel/next.js