Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Inline CSS vs. CSS-Datei

Das Paradoxe an Inline CSS

Inline CSS als klare Empfehlung

Seit einiger Zeit empfehlen alle Experten und vor allem auch Google, CSS Code nicht mehr in eine externe Datei auszulagern, sondern direkt inline zu platzieren. Statt also die CSS-Datei immer mehr zu füllen, wird ein Bereich in den Head eurer Website integriert. Bei großen CSS-Abschnitten macht das natürlich wenig Sinn, doch wichtiger Code, der für das rendern der Seite von großer Bedeutung ist, sollte laut Empfehlungen immer direkt als Inline CSS vorhanden sein. Soweit so gut, doch es gibt da einige Beschränkungen und Merkwürdigkeiten. Auf mich wirkt die Sache mit dem Inline CSS jedenfalls zum Teil recht paradox und so lasse ich meinen Gedanken dazu hier mal freien Lauf.

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.

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.



Wordpress Performance eBook