Ich glaube so ziemlich jeder, der seinen PrestaShop Online Shop oder auch seine WordPress Website bei Pagespeed durchlaufen lassen hat ist über das Problem „content above the fold“ gestoßen. Bei JavaScript Dateien hat man den Fehler dank async loading binnen 2 Minuten behoben. Doch wie bekomme ich das jetzt bei CSS Dateien hin?
Variante 1. – „Prefetch“
<link rel="prefetch"> sagt dem Browser, dass diese Ressource für die nächste Navigation benötigt wird. Entsprechend niedrig wird diese vom Browser priorisiert. Das bedeutet, dass Prefetch wichtiger für die nächste Navigation ist, als die bisherige. Gerade bei großen Seiten kann dies zu Problemen führen, da oft nur schwer vorauszusagen ist, was der User als nächstes macht. Bei Tests mit Google Chrome konnten wir hier gute Ergebnisse erzielen. Das Problem ist wieder einmal der gute alte Internet Explorer / Edge. Die Stylesheets werden hier gar nicht geladen.
FAZIT: Absolut Ungeeignet!
Variante 2. – Markup Based Async Loader mit „Preload“
<link rel="preload" type="text/css" onload="this.rel='stylesheet'" href="your-style.css"> Ein ziemlich netter Hack ist die Benutzung des onload handlers um eine Art Markup basierten Async Loader mit Preload zu erhalten. Preload selbst ist ein neuer Webstandard, der den Browsern sagt, was wichtig für die aktuelle Navigation ist. Entsprechend ist es besser dafür geeignet als prefetch. Auch bei dieser Variante hatten wir immer wieder Probleme mit dem Internet Explorer / Edge, Safari und generell allen älteren Browsern.
FAZIT: Preload ist wesentlich besser geeignet um CSS später zu laden. Leider ist dies noch ein sehr neuer Standard, der nicht überall funktioniert. Daher aktuell ungeeignet.
Variante 3. – loadCSS
loadCSS ist eine kleine Javascript Bibliothek um CSS Asyncron nachladen zu können. Anstatt der üblichen Methode wird die Datei über die JavaScript Funktion loadCSS( "your-style.css" ); verwendet um die CSS Dateien am Schluss zu laden. Damit die Seite dann noch auf Geräten ohne oder bei deaktiviertem Javascript richtig geladen wird empfiehlt es sich die Datei klassisch mit noscript noch einmal einzubinden. <noscript><link rel="stylesheet" href="your-style.css" ></noscript>
Bei dieser Version muss ich zusätzlich ein kleines Javascript zusätzlich in den Quellcode einbinden. Zudem kann es passieren, dass CSS Dateien doppelt geladen werden (Beispiel wenn ein CSS File bei Klick auf einen Link geladen werden soll. Auch der Quellcode wird durch zusätztliche <noscript> Elemente unnötig aufgeblasen und damit etwas größer. Trotzdem überwiegen die Vorteile die Nachteile.
FAZIT: LoadCSS ist unsere aktuelle Empfehlung um den lästigen Content above the fold los zu werden.
