Ich habe in den vergangenen Tagen an verschiedenen Schrauben des Blogs gedreht, um die Performance des Blogs zu erhöhen und letztendlich die Ladezeiten zu verringern. Seit geraumer Zeit ist WP-SuperCache bereits aktiv, aber es war in Sachen Ladezeiten dennoch „Luft nach oben“. Heute möchte ich also ein weiteres Performance-Plugin für WordPress vorstellen.

Ich konnte mit Hilfe von CSS-JS-Booster die HTTP-Requests des Blogs um nahezu die Hälfte reduzieren und somit die Ladezeit des Blogs deutlich verkürzen.

Das eigentliche Problem

Ob Fluch oder Segen mag jeder selbst beurteilen, aber inzwischen ist es üblich, dass jedes WordPress Plugin seine eigenen Javascript- und CSS-Dateien mitliefert und in dem HEAD-Bereich der Webseite einbindet.

Doch warum ist das ein Problem für die Performance bzw. die Ladezeiten eines Blogs? Da jede Datei einzeln eingebunden wird, muss auch jede Datei vom Browser einzeln angefordert werden. D.h. es wird für jede CSS- oder JS-Datei ein eigener HTTP-Request gestartet. Das bedeutet unnötiger Overhead, denn letztendlich könnte man auch alle JS-Dateien in einer JS-Datei und alle CSS-Dateien in einer CSS-Datei zusammenfassen.

CSS-JS-Booster

CSS Optimierungen

Genau diese Idee wurde mit dem WordPress Plugin CSS-JS-Booster umgesetzt. Das Plugin fasst für euch die CSS-Dateien, die im HEAD-Bereich eures Blogs stehen, zusammen und kopiert sie in eine (!) Datei zusammen. Sollten in den CSS-Dateien @import-Regeln stehen, so werden auch diese Dateien ausgelesen und zusammengefasst.

Des Weiteren wird der so neu entstandene CSS-Quellcode mit CSSTidy optimiert und minimiert. Ein weiteres Feature ist, dass kleinere (, die innerhalb des CSS-Codes referenziert werden, als sogenannte data-URI in die CSS-Datei eingefügt werden. Das spart zusätzliche HTTP-Requets, da auch die Bilder nicht mehr einzeln nachgeladen werden müssen, da diese nun direkt als Byte-Code in der CSS-Datei vorhanden sind.

Um die Optimierungen abzurunden wird die CSS-Datei noch mit GZIP komprimiert, bevor diese an den Browser ausgeliefert wird.

Javascript Optimierungen

Wie beim Optimieren von CSS-Dateien so werden auch die Javascript-Dateien aus dem HEAD-Bereich des Webseite in einer Datei zusammengefasst. Somit werden die zahlreichen einzelnen JS-Dateien zu einer großen Javascript-Datei zusammengefasst und es muss nur noch eine JS-Datei vom Browser geladen werden.

Ebenfalls kümmert sich das Plugin um ein intelligentes Caching der JS- und CSS-Dateien.

HTTP-Requests für blogrammierer.de

HTTP-Requests für blogrammierer.de

Fazit und eigene Erfahrungen

Das Plugin verdient den Namen „Booster“. Wie eingangs bereits erwähnt, wurden die HTTP-Request nahezu halbiert. Vor Einbindung des CSS-JS-Booster-Plugins wurden beim erstmaligen Aufrufs des Blogs 111 HTTP-Requests (laut YSlow) getätigt. Nach der Aktivierung des Plugins waren es noch 56 HTTP-Requests. Eine beachtliche Reduzierung.

Probleme gibt es allerdings mit dem IE7. Im IE7 werden die Grafiken, die als data-URI bzw. mhtml in der CSS-Datei implementiert wurden, nicht korrekt verarbeitet und das Design ist nicht mehr zu erkennen. Eventuell kann es durch die Zusammenfassung der Dateien zu Problemen in der Darstellung des Blogs oder von Javascript-Effekten kommen. Das sollte euch vorher bewusst sein, falls nach der Installation fehlerhafte Darstellungen auftreten.

Wie ich am Anfang des Artikels erwähnt habe, läuft parallel das WP-SuperCache-Plugin. Solltet ihr ebenfalls beide Plugins parallel verwenden wollen, empfehle ich euch zunächst das WP SuperCache Plugin zu deaktivieren und erst danach das CSS-JS-Booster-Plugin zu installieren und aktivieren. Anschließend den Cache leeren und das SuperCache Plugin wieder aktivieren. Ansonsten kann es ebenfalls zu Problemen in der Ansicht der Webseite bzw. des Blogs kommen.

Welche Plugins verwendet ihr, um die Ladezeiten eures Blogs zu reduzieren bzw. optmieren? Ich freue mich auf eure Tipps.