Ein besonderes Muster [zum Laden von nicht-kritischem CSS], das ich gesehen habe, ist das Preload/Polyfill-Muster. Bei diesem Ansatz laden Sie alle Stylesheets stattdessen als Preloads und verwenden dann deren
onload-Ereignisse, um sie wieder in ein Stylesheet zu ändern, sobald der Browser sie bereit hat.
Sie versuchen also, Ihr Stylesheet asynchroner zu gestalten, aber das verursacht zwei große Probleme
- Sie haben die Priorität des Herunterladens höher als die jedes anderen Assets gesetzt.
- Sie haben auch den HTML-Parser blockiert (wegen des Polyfills als Inline-Skript).
Firefox macht etwas Besonderes, um Problem #2 in diesem speziellen Fall zu vermeiden, aber es betrifft jeden anderen Browser.
Ich hatte nie Glück mit ausgefallenen Techniken, um den Browser zu tricksen, um theoretisch bessere Download-/Rendering-Muster zu erzielen. Ich bin eher ein Typ, der Stylesheets im Head, Skripte am Ende des Body bevorzugt, aber ich weiß, dass das Web ein komplizierter Ort ist. Tatsächlich sehe ich bei einem kurzen Blick, dass Jetpack ein Inline-Skript in meinen <head> einfügt, was auch mein Laden beeinflussen würde, außer dass sie es mit einem verschleierten type laden, bis spätere Skripte ausgeführt werden und es ändern, wahrscheinlich um genau dieses Problem zu vermeiden.
Jedenfalls, Tim's Rat
• Wenn Sie loadCSS mit dem Preload/Polyfill-Muster verwenden, wechseln Sie stattdessen zum
• Wenn Sie externe Stylesheets haben, die Sie normal laden (d.h. als regulären Stylesheet-Link), verschieben Sie alle inline Skripte, die Sie können, darüber im Markup.
• Inline Ihr kritisches CSS für die schnellstmöglichen Start-Renderzeiten.
Das Print-Muster ist
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">