Render-blockierendes CSS in Next.js entfernen für bessere Core Web Vitals
Render-blockierendes CSS in Next.js entfernen für schnellere Core Web Vitals
Render-blockierendes CSS in Next.js entfernen
CSS ist render-blockierend. Der Browser rendert keinen einzigen Pixel, bis er jedes Stylesheet im <head> heruntergeladen und geparst hat. In einer Next.js-App bedeutet das standardmäßig zwei externe CSS-Dateien: ein globales Stylesheet und ein seitenspezifisches Stylesheet. Bei einer schnellen 3G-Verbindung kostet das Herunterladen dieser beiden Dateien 600ms, bevor der Browser überhaupt mit dem Rendern beginnt. Das sind 600ms, die direkt zu Ihrem First Contentful Paint und Largest Contentful Paint hinzugefügt werden.
Zuletzt überprüft von Arjen Karel im März 2026
Table of Contents!
- Render-blockierendes CSS in Next.js entfernen
- App Router vs Pages Router
- Option 1: Critical CSS generieren (Pages Router)
- Option 2: Sämtliches CSS im Head inlinen (Pages Router)
- Option 3: Styled Components (Pages Router)
- Option 4: Inline-CSS mit inlineCss (App Router, Next.js 15+)
- Eine Anmerkung zu CSS Modules und Tailwind CSS
- Welche Option sollte ich verwenden?
Im Durchschnitt messe ich über alle meine Kunden und alle Geräte hinweg eine Verzögerung von etwa 200ms durch render-blockierendes CSS. Laut dem 2025 Web Almanac bestehen 85% der mobilen Seiten immer noch nicht das Audit für render-blockierende Ressourcen. Die durchschnittliche Seite lädt 8 CSS-Dateien mit insgesamt 79 KB. Bei langsamen mobilen Verbindungen kann die Renderverzögerung 69% der gesamten LCP-Zeit ausmachen. Es ist an der Zeit, das zu beheben.
App Router vs Pages Router
Die Lösung hängt davon ab, welchen Next.js-Router Sie verwenden. Der Pages Router (unter Verwendung von _document.tsx) und der App Router (unter Verwendung von app/layout.tsx) handhaben die CSS-Bereitstellung unterschiedlich. Das Inlining von Critical CSS über Critters funktioniert mit dem App Router nicht, da Streaming inkompatibel damit ist, wie Critters HTML verarbeitet. Wenn Sie den App Router nutzen, springen Sie zu Option 4.
Der App Router ist der Standard seit Next.js 13.4. Aber viele Produktions-Apps verwenden immer noch den Pages Router, und die ersten drei Optionen unten bleiben für diese gültig.
Option 1: Critical CSS generieren (Pages Router)
Die schnellste Option ist die Generierung von Critical CSS. Critical CSS ist eine Sammlung von CSS-Regeln, die benötigt werden, um den sichtbaren Teil der Seite zu rendern. Diese Regeln werden inline im <head> platziert. Parallel dazu werden die ursprünglichen CSS-Dateien heruntergeladen, während der Browser weiter rendert. Sobald die ursprünglichen CSS-Dateien heruntergeladen sind, werden sie in die Seite injiziert.
Critical CSS ist in Next.js als experimentelles Feature verfügbar. Fügen Sie experimental: { optimizeCss: true } zu Ihrer next.config.js hinzu. Next.js bündelt die Critters-Bibliothek intern, sodass Sie diese nicht separat installieren müssen. Beachten Sie, dass das ursprüngliche Critters-Paket veraltet ist (ersetzt durch den Beasties-Fork), Next.js den Wechsel jedoch noch nicht vollzogen hat.
const nextConfig = {
reactStrictMode: true,
experimental: { optimizeCss: true }
}
Diese Option funktioniert nur mit dem Pages Router. Sie unterstützt den App Router nicht, da Critters das vollständig gerenderte HTML benötigt, was mit Streaming inkompatibel ist.
Option 2: Sämtliches CSS im Head inlinen (Pages Router)
Wenn Sie keine experimentellen Features in Ihrer Next.js-App aktivieren möchten, könnten Sie in Erwägung ziehen, Ihr CSS manuell zu inlinen. Erstellen Sie eine benutzerdefinierte Head-Sektion und referenzieren Sie diese in Ihrer _document.tsx.
Der Nachteil ist, dass das Inline-CSS größer sein wird als bei der ersten Methode, da Sie alles inlinen und nicht nur die kritischen Regeln. Wenn Sie Ihre Stylesheets jedoch sauber und schlank halten, wird dies die Core Web Vitals für Ihre Next.js-App erheblich verbessern.
import { Html, Head, Main, NextScript } from "next/document";
import { readFileSync } from "fs";
import { join } from "path";
class InlineStylesHead extends Head {
getCssLinks: Head["getCssLinks"] = ({ allFiles }) => {
const { assetPrefix } = this.context;
if (!allFiles || allFiles.length === 0) return null;
return allFiles
.filter((file: any) => /\.css$/.test(file))
.map((file: any) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: readFileSync(join(process.cwd(), ".next", file), "utf-8"),
}}
/>
));
};
}
export default function Document() {
return (
<Html>
<InlineStylesHead />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Option 3: Styled Components (Pages Router)
Styled Components ist ein CSS-in-JS-Tool, mit dem Sie CSS in JavaScript-Dateien schreiben können. Sie können Klassennamen isolieren, ungenutztes CSS automatisch entfernen und Styles direkt neben Ihren Komponenten verwalten. Für die Core Web Vitals bedeutet das, dass nur die Styles injiziert werden, die auf dieser Seite auch benötigt werden.
Fügen Sie compiler: { styledComponents: true } zu Ihrer next.config.js hinzu, installieren Sie styled-components (yarn add styled-components und yarn add -D @types/styled-components) und aktualisieren Sie dann die _document.js, um Server Side Rendering für Styled Components zu unterstützen.
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
}
}
import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}
Wenn Sie den App Router mit styled-components verwenden, benötigen Sie ein anderes Setup. Erstellen Sie eine Style-Registry-Client-Komponente mithilfe von useServerInsertedHTML und umhüllen Sie Ihr Root-Layout damit. Styled Components funktionieren im App Router nur in Client-Komponenten. Sehen Sie sich den Next.js CSS-in-JS-Guide für das vollständige Muster an.
Option 4: Inline-CSS mit inlineCss (App Router, Next.js 15+)
Für den App Router hat Next.js 15 experimental.inlineCss eingeführt. Dies ersetzt alle <link>-Stylesheet-Tags durch Inline-<style>-Tags und eliminiert den render-blockierenden Wasserfall vollständig.
const nextConfig = {
experimental: {
inlineCss: true,
}
}
Dies ist noch experimentell und das Next.js-Team empfiehlt es bisher nicht für den produktiven Einsatz. Es inlined sämtliches CSS (nicht nur Critical CSS), was die HTML-Größe erhöht. Für Websites, die Tailwind CSS verwenden, funktioniert dieser Kompromiss gut, da Tailwind kleine, atomare CSS-Bundles generiert. Bei Websites mit großen Stylesheets kann der HTML-Bloat der Time to First Byte schaden.
Eine Anmerkung zu CSS Modules und Tailwind CSS
CSS Modules und Tailwind CSS sind heutzutage die beiden beliebtesten Styling-Ansätze in Next.js. Beide kompilieren zur Build-Zeit zu Standard-CSS-Dateien und werden als <link>-Tags ausgeliefert. Das bedeutet, dass sie standardmäßig render-blockierend sind.
Tailwind hat einen Vorteil: Da es ungenutzte Klassen bereinigt, ist die Ausgabe in der Regel sehr klein (oft unter 10 KB gezippt). Die render-blockierende Auswirkung einer 10 KB großen Datei ist minimal. CSS Modules können größer werden, wenn Sie bei ungenutzten Styles nicht aufpassen.
So oder so gelten alle oben genannten Optionen. Wenn Sie render-blockierendes CSS vollständig eliminieren möchten, kombinieren Sie Ihren bevorzugten Styling-Ansatz mit optimizeCss (Pages Router) oder inlineCss (App Router).
Welche Option sollte ich verwenden?
Es hängt von Ihrem Router und Ihrer CSS-Strategie ab:
- App Router + Tailwind: Verwenden Sie
inlineCss. Kleine CSS-Bundles machen Inlining praktikabel. - App Router + großes CSS: Warten Sie, bis sich
inlineCssstabilisiert hat, oder verwenden Sie ein benutzerdefiniertes Beasties-Setup. - Pages Router: Verwenden Sie
optimizeCss(Option 1). Es ist die einfachste Lösung und inlined nur das, was kritisch ist. - Pages Router + CSS-in-JS: Verwenden Sie styled-components oder Emotion mit den oben gezeigten SSR-Mustern.
Über Next.js-Websites hinweg, die von CoreDash überwacht werden, zeigen diejenigen, die inlined Critical CSS verwenden, eine mediane FCP-Verbesserung von 400ms im Vergleich zur Standard-CSS-Bereitstellung. Das ist der Unterschied zwischen einem guten und einem mittelmäßigen FCP-Score.
Für welche Option Sie sich auch entscheiden, verifizieren Sie die Ergebnisse mit Real User Monitoring. Labordaten sagen Ihnen, was passieren könnte. Felddaten sagen Ihnen, was tatsächlich passiert ist.
Weitere Informationen darüber, wie CSS und JavaScript mit der Rendering-Pipeline interagieren, finden Sie im vollständigen Leitfaden zur Behebung von render-blockierenden Ressourcen. Wenn Sie eine Next.js-App optimieren, sehen Sie sich auch die Leitfäden zum Reparieren von Drittanbieter-Skripten und zum Messen der Core Web Vitals in Next.js an. Für einen breiteren Blick auf die Ladestrategie behandelt der Leitfaden zur Ressourcenpriorisierung, wie Browser entscheiden, was zuerst abgerufen wird.
Performance degrades unless you guard it.
I do not just fix the metrics. I set up the monitoring, the budgets, and the processes so your team keeps them green after I leave.
Start the Engagement
