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

Inline CSS schneller als CSS-Datei?

Inline CSS schneller als CSS-Datei

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. Genauer habe ich das in einem neueren Artikel erklärt und verglichen.

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.

Wirklich schneller oder nicht?

Am Ende muss jeder selbst entscheiden, welche Form von CSS er nutzt. Ich wage beispielsweise zu bezweifeln, dass Inline CSS bzw. ein Stylesheet im Header, auch bei vielen Regeln bzw. einer aufgeblähten CSS-Datei noch effektiv ist. Weil ich hier aber auf Minimalismus setzte und die CSS-Datei sowieso schon klein halte, macht sich das Laden im Header nicht bemerkbar bzw. ist der Effekt der Änderung sogar positiv. 150 Millisekunden sind es hier zum Teil, was allgemein ein sehr gutes Ergebnis ist. Die Änderungen sind schnell durchgeführt, ihr könnt das ganze also ruhig mal ausprobieren. Ein Risiko gibt es nicht, denn falls eure Website am Ende langsamer lädt, könnt ihr den Link zur CSS-Datei ganz einfach wieder einbinden. Wie gesagt: Für wenig CSS zu empfehlen, für viel CSS eher weniger.



Wordpress Performance eBook