CSS laden, ohne das Rendern zu blockieren

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Typischerweise **möchten** Sie, dass CSS das Rendering blockiert. Seiten würden auf sehr unbeholfene Weise geladen werden, wenn Sie sehen, wie die Seite zuerst ohne CSS geladen wird und sich dann verschiebt, während das CSS analysiert und auf die Seite angewendet wird.

Es gibt jedoch Situationen, in denen Sie das Laden von CSS verzögern möchten – zum Beispiel ein Stylesheet mit benutzerdefinierten Schriftarten, das Sie gerne später herunterladen. Oder sogar Ihr Haupt-Stylesheet, wenn Sie Critical CSS erstellen.

Keith Clark präsentiert in diesem Artikel einen wirklich einfachen Weg, dies zu tun (ohne Abhängigkeiten). Scott Jehl warf ein und sagte, dass onload nur lückenhaften Support hat. Sein kleiner asynchroner CSS-Loader ist wahrscheinlich der beste Weg für die bestmögliche Browserunterstützung.

Eine andere Möglichkeit, das Laden von CSS zu verzögern, besteht darin, es einfach am Ende des Dokuments zu platzieren, wie wir es oft mit Skripten tun. Bedenken Sie jedoch den Vorteil, es im Head zu platzieren: Der Download wird sofort ausgelöst, was letztendlich etwas schneller ist. Wir platzieren Skripte im Footer, weil nicht nur der Download des Skripts blockieren kann, sondern auch die Ausführung (doppeltes Problem). Ich bin mir nicht sicher, ob CSS eine blockierende Ausführung hat (wenn man es so nennen kann), aber ich glaube nicht (?).

Direkter Link →