Open top menu

WordPress Ausgabe Optimieren

Für Seiten wie Seitwert.de, spielt unter anderem auch die Qualität des Quelltextes eine Rolle. Der W3C-Validator ermittelt für diese Seite fast über 60 XHTML-Fehler. Diese beruhen nicht nur auf Fehler im Theme, sondern auch daran, dass Plugins Texte nicht XHTML-konform ausgeben. Die Möglichkeiten dies zu ändern sind sehr gering, in der Regel hilft nur eine Änderung des Quelltextes des Plugins.

Insbesondere habe ich hier Probleme mit der fehlerhaften Einbindung von zusätzlichem JavaScript oder CSS. Es gibt jedoch eine Möglichkeit, dies mit einem sehr nützlichen Seiteneffekt zu umschiffen: die generelle Optimierung des Quelltextes. Schaut man sich eine WordPress-Seite nämlich einmal mit dem Firefox-Plugin YSlow an, das prinzipiell ein Monitor für Yahoo’s Regeln für hochperformante Webseiten darstellt, stellt man sehr schnell viele Probleme fest.

Statt EINES JavaScript’s, und EINER CSS-Datei, enthält WordPress (vor allem wenn man viele Plugins verwendet) unzählige von JavaScript’s und CSS. Dies geht sogar so weit, das CSS direkt in den Head eingebunden wird. Aber genau dies ist ein 1a KO-Kriterium für YSlow. Eine Prämisse für hochperformante Webseiten ist es nämlich, das so wenige HTML-Abfragen wie möglich, aber soviel wie nötig ausgelöst werden.

Dies ist allerdings leichter gesagt als getan, da die einzelnen WordPress-Plugins sich untereinander nicht kennen. Es wäre also eigentlich eine Aufgabe des WordPress-Kerns, die Ausgabe zu optimieren. Drupal macht dies zum Beispiel ganz ordentlich. Da WordPress dies allerdings nicht kennt, gibt es (logischerweise) Plugins, die die Ausgabe von WordPress optimieren.

Diese Plugins machen prinzipiell eins: Sie sammeln alle CSS-Dateien und Javascript-Dateien, erstellen in einem Cache-Verzeichnis eine einzelne Datei daraus und optimieren diese ggf. noch. Die Anzahl der http-Anfragen wird somit drastisch reduziert, und die Seite schneller ausgeliefert. Ein eleganter Nebeneffekt ist es noch, das diese neue Einbindung in der Regel XHTML-konform ist, ich also eine Menge Probleme beim W3C-Validator weniger habe!

Aktuell habe ich drei dieser Plugins im Visier:

PHP Speedy WP

PHP Speedy WP greift auf PHP Speedy zurück, bei dem es sich um ein Programmpaket für PHP handelt, das oben genannte Optimierungen durchführt. Darüber hinaus ist es dazu in der Lage, die resultierende Javascript-Datei zu komprimieren (Minify).

WP Minify
Auch bei WP Minify handelt es sich letztendlich „nur“ um ein Frontend zu einer PHP-Bibliothek mit dem Namen Minify. Im Endeffekt macht es das gleiche wie PHP Speedy WP.

WP CSS & WP JS

WP CSS und WP JS optimieren CSS und JS separat. Allerdings mit 2 Einschränkungen: a) es funktioniert nicht automatisch und man muss die Plugins manuell im Theme oder beim Post Einbinden und b) es scheint nicht in der Version 2.7 von WordPress zu funktionieren.

Fazit:

Aufgrund der nicht automatischen Einbindung und Mangels einer Unterstützung für WordPress 2.7 stellen WP CSS und WP JS keine Alternativen dar. WP Minify und PHP Speedy WP tun sich nicht viel. Allerdings muss ich auch sagen, dass ich vom Programmierer von WP Minify auch die WP Greet Box verwende. Ich rege mich jedes Mal darüber auf das die Plugins des Programmierers das Dashboard des Admins um eine prächtig getarnte Werbung „erweitern“. Insofern ist meine erste Wahl PHP Speedy WP. Nicht nur weil es die Ausgabe optimiert, sondern weil die Seite wieder etwas XHTML-konformer ist.

Das Ergebnis in YSlow ohne PHP Speedy WP sah wie folgt aus:

YSlow-Ergebnis vor Optimierung

YSlow-Ergebnis vor Optimierung

Das Ergebnis mit PHP Speedy WP wie folgt:

YSlow-Ergebnis nach der Optimierung

YSlow-Ergebnis nach der Optimierung

Der Unterschied ist extrem! Allerdings sollte man solche Optimierungs-Skripts auch mit Vorsicht genießen und nach Inbetriebnahme exakt testen, ob die Seite noch funktioniert, oder ob JavaScript-Fehler auftreten. In diesem Blog hier ist es zum Beispiel so, dass die Lightbox zusammen mit PHP Speedy WP nicht mehr funktioniert. Ich werde das Problem umgehen, indem ich demnächst schlicht und ergreifend ein anderes Lightbox-Skript einsetzen werde, da ich auf eine solche Optimierung nicht verzichten möchte.

Guido
Geschrieben von Guido

Guido Mühlwitz ist Freiberufler mit Schwerpunkt HTML5, Zend Framework 2 / Node.js und individueller WordPress Plugin Entwicklung. Wenn er sich nicht gerade bei Twitter über PHP aufregt, bloggt er über aktuelle Themen aus dem Bereich der Anwendungsentwicklung.

7 Antworten auf Kommentar

  1. Avatar
    November 07, 2009

    Hi,
    danke für diesen informativen Beitrag und die Plugin-Erwähnung PHP-Speedy. Ich habe soeben die letzte Version also 0.5.2 eingesetzt und mein Problem ist, dass die Blogkommentare nach dem Aktivieren des Plugins und der JS-Komprimierung in komische Zeichen verwandelt werden. Also im Prinzip werden alle Kommentare unbrauchbar gemacht.

    Anstatt WP Lightbox setze ich Slimbox ein und da gibt es in Kombi mit PHP Speedy 0.5.2 keinerlei Probleme. Das mit den Kommentaren ist nicht gut und ich muss das Plugin leider wieder löschen. Das alleinige Deaktivieren des Plugins stellt die Kommentare nicht wieder her, ich habe es mehrmals probiert.

    Leider weiss ich nun auch nicht, warum die Blog-Comments durch den Plugin-Einsatz in allerhand unlesbarer Zeichen verwandelt werden.

    Antwort

  2. Avatar
    April 29, 2009

    Ausführliche Zusammenfassung, merci.

    Stellt man in YSlow das Ruleset auf „… Blog“, dann erreiche ich „Overall performance score 100“ – ohne jegliche Komprimierungstools, nur mein GZIP-Plugin ist im Einsatz. Ein Traum ;)

    Antwort

Leave a comment