Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS-JS-Booster: WordPress-Performance erhöhen und Ladezeiten reduzieren

    CSS-JS-Booster: WordPress-Performance erhöhen und Ladezeiten reduzieren

Ich habe in den vergangenen Tagen an verschiedenen Schrauben meines 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 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ötigen 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

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.

Dieser Artikel erschien ursprünglich auf blogrammierer.de

Bildnachweis für die Newsübersicht: Collage verwendet ein Bild von © Maxim_Kazmin - Fotolia.com

Finde einen Job, den du liebst zum Thema Social Media, Android

5 Reaktionen
Ralf Liebaug

Ich habe das Plugin gerade getestet und muss sagen ich bin sehr positiv überrascht. Mit WP-Minify hatte ich so meine Probleme, aber der CSS-JS-Booster funktioniert ohne Fehl und Tadel! Herzlichen Dank für den Hinweis und das Plugin.

Antworten
Schepp

So ähnlich, nur besser: Denn im Gegensatz zu den meisten anderen Tools löst der Booster auch @import-Regeln auf und steckt alle CSS-Bilder direkt in den Datenstrom, so dass das separate Nachladen dieser Ressourcen entfällt.

Antworten
WhyT
WhyT

Hallo,
habe mir das Plugin nicht angesehen, denke aber das es das selbe wie WP Minify ist?
http://wordpress.org/extend/plugins/wp-minify/
Das macht auch all diese Dinge, und optimiert auch noch den HTML Code der Seite.

Antworten
Schepp

Den CSS JS Booster gibt es übrigens auch als generische, also CMS-unabhängige Bibliothek zum Einhängen in beliebige PHP-Umfelder: https://github.com/Schepp/CSS-JS-Booster

Antworten
Timo

Gut geschrieben, werde mir das Plugin auch mal angucken.
Mit WP-Supercache habe ich keine guten Erfahrungen gemacht. Hat die Ladezeiten bei mir komischer Weise ehr verlangsamt.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen