Wann das Vorladen von Stylesheets (k)einen Sinn macht

Wann das Vorladen von Stylesheets (k)einen Sinn macht

Ich begegne regelmäßig vorgeladenen Stylesheets und vielen Fehlinformationen darüber. Das Vorladen einer Ressource ändert (meistens) ihre Priorität und die Zeit, zu der sie für den Download geplant ist. Wie viele Optimierungsstrategien, denen ich täglich begegne, macht das Vorladen von Stylesheets jedoch meistens keinen Sinn. In diesem Artikel werde ich untersuchen, wann das Vorladen von Stylesheets Sinn macht und wann es vielleicht nicht die beste Wahl ist.

Die Idee des Vorladens von Stylesheets:

Bevor wir in die Überlegungen eintauchen, lassen Sie uns kurz das Konzept des Vorladens von Stylesheets wiederholen. Stylesheets sind render blocking. Das bedeutet, dass, während Stylesheets heruntergeladen werden, die Seite nicht vom Browser gerendert wird und alles, was der Besucher sieht, ein leerer Bildschirm ist. 

Um die Zeit zu minimieren, die zum Herunterladen von Stylesheets benötigt wird, greifen Entwickler manchmal auf das Vorladen von Stylesheets zurück. Preloading beinhaltet das Vorabrufen kritischer Ressourcen, wodurch die Latenz minimiert wird, die mit dem Laden verbunden ist, wenn sie tatsächlich benötigt werden. Dies wird typischerweise mit dem <link>-Tag mit dem rel="preload"-Attribut erreicht.

Fall 1: das Vorladen des Stylesheets kurz vor dessen Deklaration.

Manchmal versuchen Entwickler in all ihrem Enthusiasmus, die CSS-Auswirkungen zu minimieren, indem sie es im HTML kurz vor der eigentlichen CSS-Deklaration neu laden. Das sieht ungefähr so aus:

<link rel="preload" as="style" href="style.css">
<link rel="stylesheet" href="style.css">

Das macht überhaupt keinen Sinn und im besten Fall verlangsamen Sie die Seite nicht! Ein Browser liest das HTML und beginnt, alle kritischen Ressourcen auf der Seite zu laden, meistens in der Reihenfolge, in der er sie findet. Das bedeutet, dass, wenn Sie die Preload-Zeile entfernt hätten, der Browser das Stylesheet trotzdem gefunden hätte und so oder so angefangen hätte, das Stylesheet herunterzuladen. Sie haben gerade eine zusätzliche Zeile hinzugefügt, das ist alles! Aber es wird noch schlimmer. Vorgeladene Stylesheets erhalten eine niedrigere Priorität als normale Stylesheets. Unter den schlechtesten Umständen würden Sie Ihre Seite also tatsächlich verlangsamen!

3 vorgeladene Stylesheets

3 normale Stylesheets

Fall 2: das Vorladen des Stylesheets mit einem Link-Header.

Diese Idee ist interessant. Wir können den Server Link Server Header verwenden, um ein Stylesheet vorzuladen. Das würde ungefähr so aussehen:

Die Idee dabei ist, den Browser dazu zu bringen, das Stylesheet in die Warteschlange zu stellen, bevor er mit dem Parsen des HTML beginnt. Das ist eine ziemlich gute Idee und ich mag, wie der Geist eines Entwicklers, der sich das ausgedacht hat, funktioniert! Aber leider werden Sie im echten Leben sehr wenig Nutzen daraus ziehen. Wir sprechen von ein paar Mikrosekunden. Das sind ziemlich enttäuschende Ergebnisse, aber keine Sorge. Wir können diesen Schritt nutzen, um einige echte Verbesserungen vorzunehmen!

Fall 3: 103 Early Hints für Stylesheets

Dies ist die einzige Idee, die Ihnen tatsächlich einige Core Web Vitals Ergebnisse liefern wird! Das Senden von Early Hints für Stylesheets wird Metriken wie den First Contentful Paint und den Largest Contentful Paint verbessern.

103 Early Hint Header werden vor der eigentlichen HTML-Antwort gesendet. Das bedeutet, dass, während Sie das HTML herunterladen, der Browser auch parallel anfangen kann, Stylesheets herunterzuladen.  Das beste Szenario ist, dass zu dem Zeitpunkt, zu dem das HTML fertig heruntergeladen ist, die Stylesheets möglicherweise auch heruntergeladen sind. Das bedeutet, dass es null Render Blocking Zeit von diesen Stylesheets gibt. Und das kann und passiert in langsameren Netzwerken! In schnelleren Netzwerken ist der Effekt weniger offensichtlich, aber die Verwendung von 103 Early Resource Hints ist in fast allen Fällen immer noch schneller!

Eine 103 Early Hint Antwort sieht fast genauso 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 lassen Sie einen 103 Early Hint auslösen, indem Sie einfach einen Link Preload Header setzen (wie in Idee 2 beschrieben)

Fall 4: Stylesheets vorladen, um asynchrones CSS zu erreichen

Ein bekannter Trick, um CSS nicht render-blocking zu machen, besteht darin, das Stylesheet vorzuladen und es, sobald es geladen ist, zur Seite hinzuzufügen. Die Idee ist einfach und sieht so aus:

<link 
   rel="preload" 
   href="style.css" 
   as="style"

Es basiert auf dem normalen Preload-Code <link rel="preload" as="style" href="style.css"> und fügt einen onload Event Listener hinzu onload="this.onload=null;this.rel='stylesheet'" 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 render-blocking ist, kann der Browser mit dem Parsen und Rendern der Seite fortfahren, ohne anzuhalten und auf das Stylesheet zu warten. Seien Sie jedoch vorsichtig!

• Machen Sie kein Async CSS im sichtbaren Viewport. Dies wird wahrscheinlich einen Cumulative Layout Shift verursachen und das wird zu einer schlechten User Experience führen
• Betrachten 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. 

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 applaudiere, mit dem diese Lösungen gemacht werden. Bitte tun Sie das NICHT!

Die Idee ist einfach: Auf der Homepage könnten Sie, wenn Sie wollten, bereits die Stile für eine andere Seite vorab cachen. Sagen wir die Produktseite. Irgendwann nach dem Laden der Seite würden Sie Stylesheets vorladen, 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 jetzt verfügbar und blockieren das Rendern nicht mehr. Es gibt ein paar Gründe, dies nicht zu tun!

1.  Es gibt bessere Wege, zum Beispiel spekulatives Prerendering oder durch die Verwendung eines Service Workers.
2. Sie werden wahrscheinlich Ressourcen verschwenden und der Kompromiss wird es nicht wert sein! Seien wir ehrlich: Wenn das Vorladen von Ressourcen einfach wäre, wären Browser besser darin gewesen. 
3. Lösungen wie diese sind schwer zu warten und werden wahrscheinlich irgendwann in der Zukunft Probleme verursachen
4. Sie müssen alle Stylesheets vorladen, nicht nur ein paar. Da alle Stylesheets render-blocking sind und parallel heruntergeladen werden, kann nur 1 Stylesheet denselben Effekt haben wie mehrere Stylesheets.