Welches CSS ist schneller?
Eigentlich haben Web Designer immer gelernt, dass Inline CSS so weit wie nur möglich vermieden werden sollte. Dann kommt aber Google Pagespeed daher und meckert über die CSS-Datei. Bei mir führte das zu einem kleinen Experiment, denn ich wollte wissen ob Inline CSS inzwischen nicht vielleicht doch schneller ist als der übliche Weg über die CSS-Datei.
Also habe ich einfach mal den kompletten Stylesheet in den Header kopiert, um genau das herauszufinden und mit kleineren Tests die Ergebnisse nachzuprüfen. Also, was ist schneller? Die komplette CSS als Stylesheet im Header, oder eine separate CSS-Datei, die ganz normal via Link im Head der Seite eingebunden wird? Die folgenden Zeilen verraten es euch.
Ist Inline CSS schneller?
Das Ergebnis ist in meinem Fall überraschend, denn nicht nur Google Pagespeed fand Inline CSS im Header deutlich besser, auch ich bin nun dabei geblieben. Warum? Weil ich genau das auf mehreren Websites getestet habe und weil Inline CSS am Ende deutlich und vor allem spürbar schneller war.
Die CSS-Datei dagegen ist langsam. 50 bis 175 Millisekunden weniger Ladezeit war das Resultat, was für eine so kleine Änderung dann doch schon enorm ist. Ich war jedenfalls sehr überrascht und zwar positiv, habe das Ganze inzwischen auch hier auf FastWP so umgesetzt. Damit lädt auch diese Website noch einmal deutlich schneller, was erstaunlich ist. Das ganze hat aber eine Kehrseite, denn wenn die CSS-Datei gecached wird, ist diese am Ende dann doch wieder flotter.
CSS-Datei vs. Inline CSS
So ist Inline CSS per se nicht schneller als eine CSS-Datei. Das macht zwar zunächst den Eindruck, immerhin muss die Datei normalerweise erst geladen und entsprechend verarbeitet werden, doch dieser Eindruck täuscht. Was oft vergessen wird: In der Regel ist der Browser Cache aktiviert und der sichert die CSS-Datei oft für einen ganzen Monat, wenn nicht sogar länger.
Ergo muss dieser die CSS-Datei zwar erst einmal laden, danach aber für Wochen oder Monate nicht mehr (weil beim Besucher im Cache), was den Aufbau der Seite rasend schnell werden lässt. Bei Inline CSS dagegen ist der Code direkt in der HTML-Datei, was wiederum bedeutet, dass er auch jedes mal geladen und interpretiert werden muss. Bei jedem Aufruf und jeder einzelnen Seite.
Klar, auch die Website selbst wird gecached, doch eben nicht für lange Zeit und vor allem nicht übergreifend. Jede Seite wird aufgerufen und jedesmal muss der Style-Abschnitt zu Beginn wieder abgearbeitet werden. Die CSS-Datei würde aber einfach im Cache liegen und wäre deshalb sofort vorhanden. Somit wäre die HTML-Seite kürzer und allgemein schneller vom Browser interpretierbar.
Keine CSS-Attribute im HTML
Der nächste Punkt beim Thema Inline CSS, ist die Sache mit den direkten Attributen. Inline CSS ist schnell, empfohlen und sowieso super dupa megatoll, wie es in letzter Zeit immer wieder heißt, doch eben auch nur als abgetrennter Bereich im Head der Website. Ihr dürft die CSS-Attribute also nicht direkt in den HTML Code integrieren (also kein <div style=”margin:0″>). Solch eine Integration von Style-Attributen verlangsamt die Darstellung nämlich wieder und verstößt auch gleich noch gegen die Content Security Police vom W3. Das alles erscheint dabei ein wenig paradox. Eigentlich ist die CSS-Datei bei genutztem Cache deutlich schneller geladen, doch inline CSS wird von Google positiv bewertet, was wiederum wichtig ist. Inline CSS durchweg, also auch im HTML selbst zu nutzen, verstößt dagegen gegen Regeln und verlangsamt die Darstellung wieder, was ist also zu tun? Alles ziemlich verrückt und verwoben für den Anfänger.
CSS richtig integrieren
Eigentlich ist es aber ganz einfach. Das Grunddesign, also das was beim Aufruf einer Seite sofort sichtbar ist, kann und sollte heutzutage per Inline CSS in den Head integriert werden. Große Mengen an CSS hingegen (zum Beispiel Style-Dateien von Plugins), verbleiben in einer externen Datei. Gibt es davon mehrere, müssen diese selbstverständlich zu einer einzigen kombiniert werden. Eventuell geschieht dies automatisch mit Plugins wie WP Minify oder Autoptimize, wobei solche Erweiterungen wieder einiges an Ressourcen fressen und aus meiner Sicht wenig performant arbeiten.
Vor allem auf günstigen Webspace-Angeboten kann es da schon einmal Probleme geben. Bei kleinen Blogs mit simplen Design, empfiehlt es sich den kompletten CSS Code in den Head zu integrieren und diesen dann auch noch aufzusplitten. Sofort sichtbare Bereiche (bzw. das entsprechende CSS dafür) kommen in den Head. Der andere Teil, also alles unwichtige, kommt in den Footer.
Alles natürlich als Inline CSS. So blockiert Am Anfang nicht zu viel Code den Seitenaufbau und das “Unwichtige” kann später nachgeladen werden. So sollte CSS heutzutage gehandhabt werden.
Wie kann Inline CSS genutzt werden?
Entfernt zunächst den Link im Header, welcher auf die bereits integrierte CSS-Datei verweist. Nun minimiert ihr die CSS, indem ihr den Inhalt der CSS-Datei durch den Compressor schickt. Dann kopiert ihr den gesamten Inhalt der komprimierten CSS in den Head euer Website und setzt davor den Tag <style type=“text/css“> und dahinter ein abschließendes </style>. Fertig.
Natürlich solltet ihr für eine perfekte Performance, auch noch das HTML Minify Snippet nutzen, welches weitaus performanter als ein Plugin ist und all euren Code automatisch minimiert. Jetzt heißt es das Ergebnis zu überprüfen und in meinem Fall war das deutlich besser als zuvor mit einer CSS-Datei. Letzere könnt ihr nun also einfach entfernen.
Google gegen den gesunden Menschenverstand
Das Paradoxe ist und bleibt aber, dass eine CSS-Datei in meinen Tests letztendlich immer schneller war, was wie gesagt am korrekt eingesetzten Browser Cache liegt. Aus der Theorie, des schnelleren Inline CSS, wird so demnach nichts.
Inline CSS bläht die HTML-Größe auf, muss auf jeder Seite neu abgerufen und verarbeitet werden, wohingegen die CSS-Datei nach dem ersten Laden im Cache des Besuchers liegt und somit deutlich performanter in Erscheinung tritt. Das Problem ist aber eben, dass Google externe CSS-Dateien negativ bewertet, weil sie angeblich den schnellen Seitenaufbau blockieren.
In meinem Fall bedeutet das: Würde ich eine CSS-Datei nutzen, würde die Seite zwar nach dem ersten Laden der Datei deutlich schneller abgerufen werden können, doch dann hätte ich auch keine 100 Punkte in Google Pagespeed. Zwar sind die Punkte in Google Pagespeed sowieso eine Sache für sich (nicht jede Empfehlung mach im Einzelfall Sinn), doch gerade Anfänger schauen eben dorthin und weil ich mit Fokus auf Performance berichte, ist so eine Zahl für natürlich immer sehr wichtig, ganz egal wie viel sie am Ende wirklich aussagt.
Also nutze ich Inline CSS, wie es empfohlen wird. Google siegt halt leider immer. Meiner Meinung nach sind klein gehaltene CSS-Dateien trotzdem performanter.
