Scott Jehl
Eines der wirkungsvollsten Dinge, die wir tun können, um die Seitenleistung und -resilienz zu verbessern, ist das Laden von CSS auf eine Weise, die das Rendern der Seite nicht verzögert. Standardmäßig laden Browser externes CSS synchron, wobei das Rendern der Seite angehalten wird, während das CSS heruntergeladen und geparst wird – beides birgt potenzielle Verzögerungen.
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Sie sollten dies jedoch nicht einfach mit all Ihren Stylesheets machen, da Sie sonst einen ziemlich hässlichen "Flash of Unstyled Content" (FOUC) erhalten, während die Seite geladen wird. Sie müssen die Technik mit einer Methode kombinieren, um kritische CSS-Inhalte bereitzustellen. Wenn Sie das tun, ist es, wie Scotts Eröffnungssatz sagte, ziemlich wirkungsvoll.
Interessante Nebenbemerkung... auf unserer Pen Editor-Seite bei CodePen hatten wir ein FOUC-Problem (Warnung, in diesem Video gibt es einen sehr kurzen Weißblitz)
Das geschieht schon seit (Jahren?) bei CodePen in @firefox.
Wir haben ein ganz normales <link rel=“stylesheet”> oben auf der Seite, das das Rendern blockieren soll, oder?
Würde ich gerne verstehen. pic.twitter.com/HGTHwpemiy
— Chris Coyier (@chriscoyier) 20. Juni 2019
Das Merkwürdige daran ist, dass wir unser CSS ganz normal in <link>-Tags im <head> laden, was das Rendern blockieren und FOUC verhindern sollte. Aber es gibt einen schwer reproduzierbaren Fehler. Glücklicherweise haben wir eine seltsame Lösung gefunden, so dass wir jetzt ein leeres <script>-Tag im <head> haben, das es irgendwie löst.
Es sollte angemerkt werden, dass Sie wahrscheinlich einen Fallback für Browser/Benutzer mit deaktiviertem JavaScript wünschen
Kann man nicht dasselbe mit
rel="alternate stylesheet"erreichen?Dieses Feature gibt es schon seit HTML 4 und es deckt verschiedene Anwendungsfälle ab, einschließlich Ihres.
MDN hat einen großartigen Artikel dazu: https://mdn.io/docs/Web/CSS/Alternative_style_sheets