Beim laden von großen CSS Dateien kann es sein, dass das Rendern der Webseite unnötig verzögert wird. Abhilfe schafft das asynchrone Laden von unkritischen Dateien.
Mit folgendem HTML-Tag können Dateien asynchron geladen und anschließend als CSS eingebunden werden.
<link rel="preload" href="datei.css" as="style" onload="this.rel='stylesheet'">
Da dieser Schritt JavaScript benötigt, empfiehlt es sich die CSS-Dateien zusätzlich in einem noscript-Tag zuladen.
<link rel="preload" href="datei.css" as="style" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="datei.css">
</noscript>
Momentan wird diese Funktionalität jedoch nur von Google Chrome und Opera unterstützt. Jedoch gibt es ein Polyfill, welches diese Funktion auch bei anderen Browser nachrüstet. Das Polyfill besteht aus zwei kleinen JavaScript Dateien, die im Rahmen der loadCSS Bibliothek bereitgestellt werden. Die Einbidnung lässt sich wie im folgenden Beispiel umsetzen.
<script src="loadCSS.min.js"></script>
<script src="cssrelpreload.min.js"></script>
Links
- Webseite: loadCSS Bibliothek