inlineCss

Verwendung

Experimentelle Unterstützung für das Einbetten von CSS in den <head>-Bereich. Wenn diese Funktion aktiviert ist, werden an allen Stellen, wo normalerweise ein <link>-Tag generiert wird, stattdessen generierte <style>-Tags eingefügt.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig

Abwägungen

Wann Inline-CSS sinnvoll ist

Das Einbetten von CSS kann in mehreren Szenarien vorteilhaft sein:

Erstbesucher: Da CSS-Dateien render-blockende Ressourcen sind, eliminiert das Einbetten die anfängliche Download-Verzögerung, die Erstbesucher erfahren, und verbessert so die Ladeleistung der Seite.
Performance-Metriken: Durch das Entfernen zusätzlicher Netzwerkanfragen für CSS-Dateien kann das Einbetten wichtige Metriken wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) signifikant verbessern.
Langsame Verbindungen: Für Nutzer mit langsamen Netzwerken, wo jede Anfrage erhebliche Latenz verursacht, kann das Einbetten von CSS durch die Reduzierung von Netzwerk-Roundtrips eine spürbare Leistungssteigerung bringen.
Atomic CSS Bundles (z.B. Tailwind): Bei Utility-first-Frameworks wie Tailwind CSS ist die Größe der für eine Seite benötigten Styles oft O(1) in Relation zur Komplexität des Designs. Dies macht das Einbetten zu einer attraktiven Option, da der gesamte Stilumfang für die aktuelle Seite leichtgewichtig ist und nicht mit der Seitengröße wächst. Das Einbetten von Tailwind-Styles gewährleistet eine minimale Nutzlast und eliminiert die Notwendigkeit zusätzlicher Netzwerkanfragen, was die Performance weiter verbessern kann.

Wann Inline-CSS nicht sinnvoll ist

Während das Einbetten von CSS erhebliche Leistungsvorteile bietet, gibt es Szenarien, in denen es nicht die beste Wahl ist:

Große CSS-Bundles: Wenn Ihr CSS-Bundle zu groß ist, kann das Einbetten die HTML-Größe signifikant erhöhen, was zu einer langsameren Time to First Byte (TTFB) und potenziell schlechterer Performance für Nutzer mit langsamen Verbindungen führt.
Dynamisches oder seiten-spezifisches CSS: Für Anwendungen mit hochdynamischen Styles oder Seiten, die unterschiedliche CSS-Sets verwenden, kann das Einbetten zu Redundanz und Aufblähung führen, da das vollständige CSS für alle Seiten möglicherweise wiederholt eingebettet werden muss.
Browser-Caching: In Fällen, in denen Besucher häufig auf Ihre Seite zurückkehren, ermöglichen externe CSS-Dateien Browsern ein effizientes Zwischenspeichern von Styles, was den Datenverkehr für nachfolgende Besuche reduziert. Das Einbetten von CSS eliminiert diesen Vorteil.

Wägen Sie diese Vor- und Nachteile sorgfältig ab und erwägen Sie eine Kombination aus Einbetten mit anderen Strategien, wie z.B. der Extraktion von kritischem CSS oder einem hybriden Ansatz, für optimale Ergebnisse, die auf die Bedürfnisse Ihrer Seite zugeschnitten sind.

Wissenswert:

Diese Funktion ist derzeit experimentell und hat einige bekannte Einschränkungen:

Das Einbetten von CSS wird global angewendet und kann nicht seitenweise konfiguriert werden

Styles werden während des initialen Seitenladens dupliziert - einmal innerhalb von <style>-Tags für SSR und einmal im RSC-Payload

Bei der Navigation zu statisch gerenderten Seiten werden <link>-Tags anstelle von Inline-CSS verwendet, um Duplizierung zu vermeiden

Diese Funktion ist im Entwicklungsmodus nicht verfügbar und funktioniert nur in Produktions-Builds

Verwendung

Abwägungen

Wann Inline-CSS sinnvoll ist

Wann Inline-CSS nicht sinnvoll ist

On this page