CSS-Dateien bestimmen das Aussehen einer Webseite. Sie steuern zum Beispiel Layout, Schriftarten, Farben und Abstände. Probleme entstehen, wenn eine CSS-Datei nicht erreichbar ist, über eine Weiterleitung geladen wird oder unnötig groß ist.
Solche Fehler können die Darstellung und Ladezeit einer Webseite beeinträchtigen. Wie wichtig ein Fehler ist, hängt vor allem davon ab, welche CSS-Datei betroffen ist und auf wie vielen Seiten sie verwendet wird.
Nicht gefundene CSS-Dateien und 404-Fehler
Antwortet eine eingebundene CSS-Datei mit dem HTTP-Status 404, ist sie unter der angegebenen URL nicht verfügbar. Häufig liegt das an veralteten Pfaden nach einem Relaunch, einem Theme-Wechsel oder Änderungen an der Verzeichnisstruktur.
<link rel="stylesheet" href="/css/style.css">Existiert /css/style.css nicht mehr, versucht der Browser trotzdem, die Datei bei jedem Seitenaufruf zu laden.
Wie stark sich das auswirkt, hängt von der Datei ab. Fehlen wichtige CSS-Regeln, können zum Beispiel Navigation, Schriftarten, Abstände oder die mobile Darstellung fehlerhaft sein. Ist nur eine kleine zusätzliche CSS-Datei betroffen, fällt der Fehler möglicherweise kaum auf.
Finde deshalb zuerst die fehlerhafte URL und korrigiere sie an ihrer Quelle. Stammt sie beispielsweise aus einem zentralen Template, kann eine einzige falsche Einbindung sehr viele Seiten betreffen.
Weiterleitungen bei CSS-Dateien vermeiden
Eine CSS-Datei kann erreichbar sein und trotzdem unnötig langsam geladen werden. Das passiert zum Beispiel, wenn im HTML noch eine alte URL steht:
<link rel="stylesheet" href="/css/old-style.css">Leitet diese URL auf /assets/style.css weiter, muss der Browser zuerst der Weiterleitung folgen und danach die eigentliche CSS-Datei laden.
Binde stattdessen direkt die aktuelle URL ein:
<link rel="stylesheet" href="/assets/style.css">Besonders ungünstig sind mehrere aufeinanderfolgende Weiterleitungen: Sie verlängern den Weg bis zur eigentlichen CSS-Datei. Vermeide sie deshalb, wo es geht.
Fehler bei externen Stylesheets
CSS-Dateien können auch von einer anderen Domain geladen werden, zum Beispiel über ein CDN:
<link rel="stylesheet" href="https://cdn.example.com/css/style.css">Damit ist die eigene Webseite von einem weiteren Server abhängig. Ist dieser langsam, nicht erreichbar oder wurde die Datei dort verschoben, kann das auch die eigene Seite beeinträchtigen.
Ein CDN macht eine CSS-Datei deshalb nicht automatisch schneller. Entscheidend ist, wie zuverlässig und schnell die Datei ausgeliefert wird.
Bei wichtigen externen Ressourcen kannst du den Verbindungsaufbau mit preconnect beschleunigen:
<link rel="preconnect" href="https://cdn.example.com">Das hilft jedoch nicht, wenn die CSS-Datei selbst unter der angegebenen URL nicht erreichbar ist.
Große und ungenutzte CSS-Dateien optimieren
Eine große CSS-Datei ist nicht automatisch ein Fehler. Sie kann die Ladezeit aber unnötig erhöhen, besonders dann, wenn viele enthaltene Styles auf der jeweiligen Seite gar nicht benötigt werden.
Eine einfache Optimierung ist die Minifizierung: Entferne dabei zum Beispiel unnötige Leerzeichen und Kommentare. Zusätzlich kannst du CSS-Dateien mit Brotli oder gzip komprimiert übertragen.
Oft steckt noch mehr Potenzial in ungenutztem CSS. Themes und Frameworks enthalten häufig Styles für Elemente, die auf einer bestimmten Seite gar nicht vorkommen.
Im Bereich „Coverage“ zeigen dir die Chrome DevTools, welcher Teil einer CSS-Datei während des Tests verwendet wird. Teste dabei auch typische Funktionen wie Menüs oder Dialogfenster, damit deren Styles berücksichtigt werden.
Wenn große CSS-Dateien das erste Laden einer Seite deutlich verzögern, kann außerdem Critical CSS sinnvoll sein. Dabei werden besonders wichtige Styles für den direkt sichtbaren Seitenbereich zuerst bereitgestellt.
CSS-Fehler mit SISTRIX erkennen
Der SISTRIX Onpage-Crawler prüft dein gesamtes Projekt automatisch auf typische CSS-Probleme: nicht gefundene Dateien, Weiterleitungen auf CSS-Ressourcen und Fälle, in denen sich mehrere einzelne CSS-Dateien sinnvoll kombinieren ließen. So findest du Fehler, bevor sie sich auf viele Seiten auswirken.
Der SISTRIX Onpage-Crawler erkennt für dein gesamtes Projekt automatisch, wenn CSS-Dateien nicht gefunden werden, über eine Weiterleitung laufen oder sich zu viele einzelne CSS-Dateien kombinieren ließen. Teste SISTRIX 14 Tage kostenlos
CSS-Fehler sinnvoll priorisieren
Prüfe zuerst nicht erreichbare CSS-Dateien mit einem 404- oder 5xx-Status, vor allem wenn wichtige Styles und viele Seiten betroffen sind.
Behebe danach unnötige Weiterleitungen und Redirect-Ketten. Anschließend lohnt es sich, die CSS-Dateien selbst zu optimieren, zum Beispiel durch Minifizierung, Komprimierung oder das Entfernen ungenutzter Styles.
Nicht allein die Anzahl der Fehler entscheidet also über die Priorität. Wichtiger ist, welche Datei betroffen ist und auf wie vielen Seiten sie verwendet wird.
Häufige Fragen zu CSS-Dateien
In Chrome DevTools zeigt der Network-Tab alle geladenen Dateien und ihren HTTP-Status. Mit dem Filter „CSS“ lassen sich Stylesheets gezielt anzeigen. Fehlgeschlagene Ladevorgänge werden außerdem häufig in der Console angezeigt.
Browser können mit vielen CSS-Fehlern umgehen. Eine fehlerhafte Anweisung führt deshalb normalerweise nicht dazu, dass die gesamte Datei ignoriert wird. Einzelne Styles oder Regelblöcke können aber ausfallen.
CSS-Dateien sollten vom Server mit dem MIME-Type text/css ausgeliefert werden. Ist der Content-Type falsch eingestellt, lehnen moderne Browser das Stylesheet in der Regel ab.
Häufig liegt das am Cache. Browser oder CDNs können noch eine ältere Version der Datei gespeichert haben. Versionierte Dateinamen wie style.a84f21.css helfen dabei, nach Änderungen zuverlässig die neue Datei auszuliefern.
