In vielen CSS-Strukturen findet sich der @import-Befehl, um weitere Stylesheets in eine Hauptdatei zu laden. Dies wird oft genutzt, um den HTML-Quellcode „sauber“ zu halten, indem man nur eine einzige CSS-Datei einbindet.

Das Problem

@import erzeugt eine serielle Abhängigkeit: Der Browser muss erst die Haupt-CSS-Datei herunterladen, diese parsen, den @import-Befehl finden und erst dann die zusätzliche Datei anfordern. Dies blockiert den Render-Prozess und verzögert den Aufbau der Seite (sog. „CSS-Chain-Loading“). Während frühere Protokolle bei vielen einzelnen Dateien zu Problemen führten, ist @import durch die kaskadierende Wartezeit heute der Hauptgrund für langsame Stylesheet-Initialisierungen.

Lösungsansätze:

  1. Dateien zusammenführen (Bundle): Die performanteste Methode ist es, alle benötigten CSS-Dateien bereits auf dem Server zu einer einzigen Datei zusammenzufassen. Dies reduziert die Anzahl der HTTP-Anfragen auf ein Minimum.
  2. Einzelne Einbindung: Alternativ können Sie alle CSS-Dateien direkt im HTML-head via <link rel="stylesheet"> einbinden. Dank moderner Protokolle wie HTTP/2 oder HTTP/3 können Browser viele kleine Dateien mittlerweile parallel und sehr effizient laden, ohne dass dies die Performance so stark beeinträchtigt wie ein @import.

    3. Wichtiger Hinweis:
    Das Entfernen von @import ist besonders für öffentlich zugängliche Bereiche wichtig, da diese Performance-Einbußen direkt die Core Web Vitals (z. B. den Largest Contentful Paint) negativ beeinflussen. Für interne Administrationsbereiche, bei denen die Ladezeit eine untergeordnete Rolle spielt, ist @import aus Gründen der Übersichtlichkeit weiterhin technisch möglich, aber auch dort meist nicht Best Practice.