Das HTTP Archive hat mehr als 7 Millionen Websites untersucht und seinen Jahresbericht zusammengestellt, der detailliert beschreibt, wie die Websites erstellt wurden. Und es gibt eine enorme Fülle von Informationen darüber, wie sich das Web im Jahr 2020 verändert hat. Tatsächlich ist dieser Bericht eher wie ein riesiges Buch und er ist absolut fabelhaft. Die Daten stammen aus Abfragen an das HTTP Archive und sind in verschiedene Abschnitte unterteilt, wie z. B. Leistung, Sicherheit und die Sprachen selbst, einschließlich der Art und Weise, wie Leute HTML oder CSS geschrieben haben.
Hier ist, was der Bericht über das von ihnen gescannte CSS zu sagen hat
Während JavaScript CSS in Bezug auf das Seiten-Gewicht weit übertrifft, ist CSS im Laufe der Jahre definitiv gewachsen. Die mittlere Desktop-Seite lädt 62 KB CSS-Code, und 1 von 10 Seiten lädt mehr als 240 KB CSS-Code. Mobile Seiten verwenden über alle Perzentile hinweg etwas weniger CSS-Code, aber nur um 4 bis 7 KB. Während dies definitiv mehr ist als in den Vorjahren, kommt es nicht annähernd an die beeindruckenden 444 KB im Median und die 1,2 MB im obersten 10%-Bereich von JavaScript heran.
Ach du Schreck! Und hier ist eine schockierende Information, die kurz darauf folgt
[…] nur etwa 7 % der Seiten konzentrieren ihren gesamten CSS-Code in einem einzigen Remote-Stylesheet, wie wir es oft lernen. Tatsächlich enthält die mittlere Seite 3
<style>-Elemente und 6 (!) Remote-Stylesheets, wobei 10 % davon über 14<style>-Elemente und über 20 Remote-CSS-Dateien enthalten! Während dies auf dem Desktop suboptimal ist, beeinträchtigt es die Leistung auf Mobilgeräten erheblich, wo die Round-Trip-Latenz wichtiger ist als die reine Download-Geschwindigkeit.
Ich möchte irgendwie den gesamten Abschnitt über CSS speziell zitieren, da es viele interessante Fakten gibt, die zeigen, wie wir als Gemeinschaft noch viel zu tun haben, um die Leistung zu verbessern und das gute Wort über CSS-Optimierung zu verbreiten.