JavaScript und Bilder werden oft für langsame Websites verantwortlich gemacht, aber Harry erklärt sehr deutlich, warum CSS gleichermaßen Schuld trägt und schwieriger zu handhaben ist.
- Ein Browser kann eine Seite erst rendern, wenn er den Render-Baum erstellt hat;
- der Render-Baum ist das kombinierte Ergebnis des DOM und des CSSOM;
- das DOM ist HTML plus jedes blockierende JavaScript, das darauf zugreifen muss;
- das CSSOM sind alle CSS-Regeln, die auf das DOM angewendet werden;
- es ist einfach, JavaScript mit
asyncunddefernicht-blockierend zu machen
Attribute;- CSS asynchron zu machen ist viel schwieriger;
- eine gute Faustregel zum Merken ist also: Ihre Seite wird nur so schnell gerendert, wie Ihr langsamstes Stylesheet es zulässt.
Es gibt viele Optionen, um dies zu verbessern, darunter einige interessante Dinge, die HTTP/2 ermöglicht.
Schauen Sie sich auch die Erkenntnisse von Šime Vidas an. Es ist alles faszinierend, aber die progressive Rendering-Sache ist besonders cool. Ich vermute, dass viele CSS-in-JS-Bibliotheken dabei helfen könnten/sollten.