Wann das Preloading von Stylesheets (keinen) Sinn macht
Warum das Preloading Ihres CSS normalerweise nicht hilft, und der eine Fall, in dem es das tut
Wann das Preloading von Stylesheets (keinen) Sinn macht
Ich stoße regelmäßig auf preloaded Stylesheets und viele Fehlinformationen, die sie umgeben. Das Preloading einer Ressource ändert, wann ihr Download geplant wird. Aber in den meisten Fällen hilft das Preloading von Stylesheets nicht. Anhand von fünf Fällen zeige ich Ihnen, wann es funktioniert und wann nicht.
Zuletzt überprüft von Arjen Karel im März 2026
Table of Contents!
- Wann das Preloading von Stylesheets (keinen) Sinn macht
- Die Idee hinter dem Preloading von Stylesheets
- Fall 1: Das Stylesheet kurz vor der Deklaration preloaden
- Fall 2: Das Stylesheet mit einem Link-Header preloaden
- Fall 3: 103 Early Hints für Stylesheets
- Fall 4: Stylesheets preloaden, um asynchrones CSS zu erreichen
- Fall 5: Stylesheets vorab cachen
- Was bei der CSS-Performance tatsächlich funktioniert
Die Idee hinter dem Preloading von Stylesheets
Stylesheets sind renderblockierend. Während Stylesheets heruntergeladen werden, wird die Seite vom Browser nicht gerendert und der Besucher sieht nur einen weißen Bildschirm.
Um die Zeit für den Download von Stylesheets zu minimieren, greifen Entwickler manchmal auf Preloading zurück. Preloading teilt dem Browser mit, eine Ressource abzurufen, bevor er sie im HTML entdeckt, damit sie schneller bereitsteht. Dies geschieht mithilfe des <link>-Tags mit dem Attribut rel="preload".
Laut dem 2025 Web Almanac bestehen nur 13 % der Desktop-Seiten das Audit für renderblockierende Ressourcen. Preloading ist nicht die Lösung. Die Beseitigung unnötiger renderblockierender Ressourcen und das Zurückstellen unkritischer Stylesheets sind es.
Fall 1: Das Stylesheet kurz vor der Deklaration preloaden
Manchmal versuchen Entwickler in all ihrem Enthusiasmus, die Auswirkungen von CSS zu minimieren, indem sie es im HTML kurz vor der eigentlichen CSS-Deklaration preloaden. Das sieht dann ungefähr so aus:
<link rel="preload" as="style" href="style.css"> <link rel="stylesheet" href="style.css">
Das ergibt überhaupt keinen Sinn und verlangsamt die Seite im besten Fall nicht. Browser verfügen über einen integrierten Preload-Scanner, der das HTML nach herunterzuladenden Ressourcen durchsucht, bevor der Hauptparser sie erreicht. Wenn sich Ihr Stylesheet-<link> bereits im <head> befindet, findet ihn der Preload-Scanner sofort. Das Hinzufügen eines rel="preload"-Hinweises für dieselbe URL liefert dem Browser Informationen, die er bereits hat. Sie haben lediglich eine zusätzliche Zeile hinzugefügt, das ist alles.
3 preloaded Stylesheets
3 normale Stylesheets
Fall 2: Das Stylesheet mit einem Link-Header preloaden
Diese Idee ist interessant. Wir können den Link-Server-Header verwenden, um ein Stylesheet zu preloaden. Das würde ungefähr so aussehen:
Link: <style.css>; rel=preload; as=style
Die Idee ist, den Browser dazu zu bringen, das Stylesheet in die Warteschlange einzureihen, bevor er mit dem Parsen des HTML beginnt. Mir gefällt, wie der Kopf des Entwicklers funktioniert, der sich das ausgedacht hat! Aber im echten Leben bringt das nur sehr wenig Nutzen. Wir sprechen hier von ein paar Mikrosekunden. Ziemlich enttäuschende Ergebnisse, aber diese Idee führt uns zu etwas, das tatsächlich funktioniert.
Fall 3: 103 Early Hints für Stylesheets
Dies ist die einzige Idee, die Ihnen tatsächlich Ergebnisse bei den Core Web Vitals bringt. Das Senden von Early Hints für Stylesheets verbessert Metriken wie den First Contentful Paint und den Largest Contentful Paint.
103 Early Hint-Header werden vor der eigentlichen HTML-Antwort gesendet. Das bedeutet, dass der Browser während des Herunterladens des HTML auch parallel mit dem Herunterladen von Stylesheets beginnen kann. Im Idealfall sind die Stylesheets ebenfalls heruntergeladen, wenn das HTML vollständig heruntergeladen ist. Null renderblockierende Zeit durch diese Stylesheets. Dies kann in langsameren Netzwerken passieren und passiert auch. In schnelleren Netzwerken ist der Effekt weniger offensichtlich, aber die Verwendung von 103 Early Hints ist in fast allen Fällen immer noch schneller.
Eine 103 Early Hint-Antwort sieht ähnlich aus wie ein Preload-Link-Header. Um 103 Early Hints zu verwenden, müssen Sie Ihren Webserver oder Ihr CDN konfigurieren.
HTTP/1.1 103 Early Hints Link: </style.css>; rel=preload; as=style
Einige CDNs wie Cloudflare ermöglichen es Ihnen, einen 103 Early Hint auszulösen, indem Sie einfach einen Link-Preload-Header setzen (wie in Fall 2 beschrieben). Für eine vollständige Anleitung zur Implementierung und Browserunterstützung siehe 103 Early Hints: Preload Critical Resources During Server Think Time.
Bei den von CoreDash überwachten Websites weisen Seiten, die 103 Early Hints für ihr Haupt-Stylesheet verwenden, beim 75. Perzentil eine um 120 ms schnellere FCP auf als Seiten ohne Early Hints. Die Verbesserung ist am deutlichsten bei mobilen Verbindungen sichtbar, wo sich Server-Bedenkzeit und Netzwerklatenz stärker überschneiden.
Fall 4: Stylesheets preloaden, um asynchrones CSS zu erreichen
Ein bekannter Trick, um CSS nicht renderblockierend zu machen, besteht darin, das Stylesheet zu preloaden und es der Seite hinzuzufügen, sobald es geladen ist. Die Idee ist einfach und sieht so aus:
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'" >
Es basiert auf dem normalen Preload-Code <link rel="preload" as="style" href="style.css"> und fügt einen onload-Event-Listener onload="this.onload=null;this.rel='stylesheet'" hinzu, der den Link in seine endgültige Form <link rel="stylesheet" href="style.css"> ändert.
Dies ist eine weitere Idee, die einfach Sinn macht. Wenn ein Stylesheet nicht renderblockierend ist, kann der Browser mit dem Parsen und Rendern der Seite fortfahren, ohne auf das Stylesheet warten zu müssen. Seien Sie jedoch vorsichtig!
- Verwenden Sie kein async CSS im sichtbaren Viewport. Dies wird wahrscheinlich einen Cumulative Layout Shift verursachen und zu einer schlechten user experience führen.
- Bedenken Sie den Kompromiss. Async CSS wird wahrscheinlich ein Re-Rendern verschiedener Teile der Seite verursachen. Dies wird Metriken wie den Interaction to Next Paint beeinflussen.
Eine einfachere moderne Alternative ist die Verwendung von fetchpriority="low" bei einem regulären Stylesheet-Link: <link rel="stylesheet" href="style.css" fetchpriority="low">. Dies weist den Browser an, den Download ohne den JavaScript-Hack zu depriorisieren. Ich empfehle dies gegenüber dem onload-Trick für die meisten Anwendungsfälle.
Fall 5: Stylesheets vorab cachen
In seltenen Fällen sehe ich raffinierte Lösungen, die versuchen, Cache-Dateien für nachfolgende Seitenaufrufe vorzuwärmen. Und während ich den Enthusiasmus begrüße, mit dem diese Lösungen erstellt werden: Bitte tun Sie dies NICHT.
Die Idee ist einfach: Auf der Startseite könnten Sie, wenn Sie wollten, bereits die Styles für eine andere Seite vorab cachen. Nehmen wir an, die Produktseite. Irgendwann nach dem Laden der Seite würden Sie Stylesheets preloaden, um sie dem Browser-Cache hinzuzufügen.
function preloadStylesheet(url) {
var link = document.createElement('link');
link.rel = 'preload';
link.href = url;
link.as = 'style';
document.head.appendChild(link);
}
window.addEventListener('load', function () {
preloadStylesheet('cart.css');
preloadStylesheet('shop.css');
});
Auf den ersten Blick sieht das nicht schlecht aus. Auf jeder Produktseite sind cart.css und shop.css nun verfügbar und blockieren das Rendern nicht mehr. Es gibt einige Gründe, dies nicht zu tun:
- Es gibt bessere Wege, zum Beispiel das spekulative Prerendering mit Speculation Rules oder durch die Verwendung eines Service Workers.
- Sie werden wahrscheinlich Ressourcen verschwenden und der Kompromiss wird sich nicht lohnen. Wenn das Preloading von Ressourcen einfach wäre, wären die Browser besser darin.
- Solche Lösungen sind schwer zu warten und werden wahrscheinlich irgendwann in der Zukunft Probleme verursachen.
- Sie müssen alle Stylesheets preloaden, nicht nur einige wenige. Da alle Stylesheets renderblockierend sind und parallel heruntergeladen werden, kann ein einziges Stylesheet die gleiche Auswirkung haben wie mehrere Stylesheets.
Was bei der CSS-Performance tatsächlich funktioniert
Anstatt nach Preload-Hinweisen zu greifen, konzentrieren Sie sich auf diese Grundlagen der Ressourcenpriorisierung:
- Entfernen Sie ungenutztes und redundantes CSS. Kleinere Dateien werden schneller heruntergeladen. Dies ist der größte Gewinn für die meisten Websites.
- Verwenden Sie 103 Early Hints für Ihre kritischen Stylesheets, wenn Ihr Server oder CDN dies unterstützt.
In unseren Real User Monitoring-Daten bestehen Websites, die redundantes CSS entfernen und 103 Early Hints verwenden, den LCP beim 75. Perzentil durchgängig. Websites, die nur ihre Stylesheets preloaden, ohne die eigentliche Ursache (zu viel CSS, zu spät geladen) zu beheben, verzeichnen selten eine nennenswerte Verbesserung.
Your Lighthouse score is not the full picture.
Lab tests run on fast hardware with a stable connection. I analyze what your actual visitors experience on real devices and real networks.
Analyze Field Data
