t3n News Entwicklung

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 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 vorstellen.

CSS-JS-Booster: WordPress-Performance erhöhen und Ladezeiten reduzieren
Verwendet: © Maxim_Kazmin - Fotolia.com

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

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Timo am 18.07.2011 (09:58 Uhr)

    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 Teilen
  2. von Schepp am 18.07.2011 (12:34 Uhr)

    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 Teilen
  3. von WhyT am 18.07.2011 (12:53 Uhr)

    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 Teilen
  4. von Schepp am 18.07.2011 (15:16 Uhr)

    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 Teilen
  5. von Ralf Liebaug am 19.07.2011 (11:36 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Blog
Sicherheitslücken in Wordpress-Plugins: Admins müssen jetzt updaten
Sicherheitslücken in Wordpress-Plugins: Admins müssen jetzt updaten

Im Rahmen eines Hacking-Events wurden erneut Sicherheitslücken in vier beliebten Wordpress-Plugins aufgedeckt. Diesmal betroffen: Ninja-Forms, Icegram, Video-Player und Paid Membership Pro. » weiterlesen

Von der Blog-Plattform zum Domain-Anbieter: Warum Wordpress 19 Millionen Dollar für .blog gezahlt hat
Von der Blog-Plattform zum Domain-Anbieter: Warum Wordpress 19 Millionen Dollar für .blog gezahlt hat

Automattic, das Unternehmen hinter Wordpress, hat vergangenes Jahr die Top-Level-Domain .blog ersteigert. Die Domains will der Blog-Betreiber auch außerhalb von Wordpress verkaufen. » weiterlesen

Schicke WordPress-Seiten ohne Coding: Das kann das Open-Source-Plugin Elementor
Schicke WordPress-Seiten ohne Coding: Das kann das Open-Source-Plugin Elementor

Mit Elementor könnt ihr per Drag & Drop WordPress-basierte Websites zusammenklicken. Im Gegensatz zu vielen Konkurrenzprodukten steht das Tool unter einer Open-Source-Lizenz. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?