Ihr Partner für Grafik, Webdesign & PC-Support!
Mobile: +41 (0)79 69 30 007

WordPress Performance Turbo einschalten

WordPress Performance Turbo einschalten

WordPress Performance Turbo einschalten

WordPress kann von Haus aus nicht gerade als schnell bezeichnet werden. Andere Content Management Systeme, wie zum Beispiel Textpattern, sind dagegen bereits unoptimiert richtig schnell. Seit 2010 ist die Ladegeschwindigkeit einer Webseite ein offizieller Rankingfaktor. User erwarten schon immer schnelle Webseiten. Daher lohnt es sich, hier kräftig zu optimieren.
Bereits wenige Änderungen bringen einen gewaltigen Performanceschub. In diesem Artikel geht es darum, wie sie sich mit einigen On-Page Optimierungen. Das sind Optimierungen, die nicht direkt auf dem Serverbetriebssystem gemacht werden müssen.

Der Ausgangszustand

Um den Ausgangszustand zuverlässig zu testen, bieten sich mehrere Möglichkeiten an: Arbeitet man mit Firefox, kann man die Add-ons Firebug und YSlow installieren. Nach der Installation dieser beiden Add-ons klickt man einmal rechts auf die zu untersuchende Webseite, dann auf “Element mit Firebug untersuchen”. Anschließend klickt man im sich öffnenden Fenster oben auf “YSlow” und im Anschluss auf “Run Test”.

Die Basics

Optimieren wir zuerst die “kleinen Dinge”, die jedoch einen großen Performanceschub bringen.

CSS Dateien zusammenfassen

Jede geladene Datei erzeugt eine Server-Anfrage (HTTP-Request) und ein Browser kann im Schnitt zwischen zwei bis vier Anfragen pro Domain gleichzeitig bearbeiten. Wenn jedoch zu viele Dateien gleichzeitig geladen werden müssen, verlangsamt das den Seitenaufbau. Fassen wir also zuerst einmal alle CSS-Dateien zu einer einzigen zusammen.
Wir können dies zum Beispiel mittels @import lösen, indem wir alle CSS-Dateien in eine einzige importieren.

Die zweite Möglichkeit ist das automatische Zusammenfassen der Dateien mittels eines Plugins, worauf ich etwas später noch zurückkommen werde. Nachdem wir nun die CSS-Dateien zusammengefasst haben, geht es an die Komprimierung der Datei. Eine Komprimierung des CSS hat den Vorteil, dass sich die Dateigröße wesentlich verringert und die Datei daher schneller geladen werden kann. Ich bevorzuge für das manuelle Komprimieren den CSS-Kompressor von Sergej Müller.
Ich würde immer die Einstellung “powerful compress” wählen, weil man mit dieser Einstellung bis zu 80% und mehr an Dateigröße einsparen kann. Zuvor erstellen Sie bitte immer ein Backup der Datei, da man im Anschluss das CSS sehr schlecht lesen kann.
Die CSS-Dateien findet man übrigens entweder in der header.php des Themes (wp-content => themes => Dein Theme) oder in der functions.php des Themes (selber Pfad). Hat man Plugins aktiviert, die eigene CSS-Dateien benötigen und referenzieren, so ist die hier beschriebene Vorgehensweise nicht zu empfehlen! Man würde schlichtweg nicht alle Dateien erwischen oder hätte ein Problem beim nächsten Plugin-Update.

JavaScript Dateien zusammenfassen und in den Footer bringen

Der nächste Schritt ist das Zusammenfassen aller JavaScript-Dateien zu einer einzigen. Auch hier erstellen Sie bitte zuvor wieder ein Backup. Beim Komprimieren des JavaScriptes sollte man Vorsicht walten lassen. Manchmal funktioniert das Script nach der Komprimierung nicht mehr.

JavaScript gehört in den Footer

Es scheint populär zu sein, das Javascript in den Head-Bereich zwischen und zu platzieren. Klar kann man das machen, und funktionieren tut es auch. Trotzdem ist es suboptimal, denn das sorgt für ein langsameres Laden der Webseite. Das Problem ist, dass das Javascript vor dem Inhalt geladen wird, weil Javascript Priorität geniesst. Platziert man das Javascript hingegen in den Seitenfuß, wird der Inhalt zuerst geladen und dann das Javascript im Hintergrund. Der große Vorteil für den Besucher der Webseite ist, dass sich die Webseite wesentlich schneller aufbaut.

   ...
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='general.js'></script>
  </body>
</html>
JavaScript und CSS zusammenfassen, komprimieren und platzieren mittels Plugin

Die komfortabelste und beste Art, einzelne Dateien zusammenzufassen und zu komprimieren besteht in der Nutzung eines Plugin. Ich nutze hierfür auf allen meinen WordPress-Webseiten das Plugin W3 Total Cache. Dieses kann nicht nur Dateien zusammenfassen und komprimieren, sondern auch noch die gesamte Webseite zwischenspeichern (cachen), damit sie schneller ausgegeben werden kann.
Die gesamte Webseite wird gecached (zwischengespeichert). Das HTML wird minimiert ausgegeben. Das CSS wird zu einer Datei gebündelt und minimiert. Das JavaScript wird zu einer Datei gebündelt und in den Fußbereich der Seite integriert. Des Weiteren wird die Webseite serverseitig komprimiert (gzip), was W3 Total Cache standardmäßig aktiviert hat. Wer das Plugin nicht nutzen möchte, sollte gzip per .htaccess Datei aktivieren (befindet sich im Hauptverzeichnis der Webseite):

# Wir aktivieren die komprimierte Augabe mod_deflate (gzip)
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

Jetzt wäre auch der richtige Zeitpunkt um die Ladegeschwindigkeit der Webseite erneut zu messen. Zu diesem Zeitpunkt sollte man bereits ein bedeutend besseres Ergebnis erzielen.

Bilder im Inhalt optimiert ausgeben

Bereits im Vorhinein sollten Sie das richtige Grafikformat wählen. PNG (8-bit) und JPG sind immer richtig, testen Sie vorher einmal, welches Format die kleinere Dateigröße ergibt. JPG eignet sich zum Beispiel hervorragend für Fotos, PNG für den Rest (Screenshots).

Schritt 1: Die richtige Bildbreite herausfinden
Blogartikel ohne ergänzende oder erklärende Bilder sind heute nicht mehr vorstellbar. Dennoch gehören Bilder im Inhalt zu den größten Performance-Bremsen überhaupt, sofern sie nicht optimiert sind. Die Bilder sollten immer auf die Breite der Inhaltsspalte zugeschnitten sein. Keinesfalls sollten hier Megapixel große Bilddateien hochgeladen und verwendet werden, nur weil das Theme sie per CSS an die richtigen Abmessungen anpasst. Wie man die richtige Bildbreite herausfindet? Falls Sie Firefox nutzen, klicken Sie einfach rechts auf die Grafik und dann auf Grafik-Info anzeigen.
Schritt 2: Die optimale Komprimierung der Bilder
Der nächste und sehr wichtige Schritt ist die optimierte Ausgabe der verwendeten Bilder. Die Dateigröße der Bilder sollte so gering wie möglich ohne Qualitätsverlust sein. Um das zu tun, gibt es verschiedene Möglichkeiten. Ich bevorzuge das Plugin Toolbox. Die Toolbox ist ein Code-Snippets Manager für WordPress und bringt bereits einige nützliche Snippets mit, zum Beispiel das wirklich gute Snippet Ysmush.it Simple. Dieses geniale kleine Snippet sorgt für die Komprimierung der Dateigröße, ohne die sichtbare Qualität der Bilder zu beeinflussen. Gerade derjenige, der mit vielen Grafiken in den Blogbeiträgen arbeitet, wird von diesem Plugin sehr profitieren.

Plugins ausmisten

Nutzen Sie so wenig Plugins wie nötig, denn jedes noch so kleine Plugin ist hungrig nach Ausführungszeit und Speicher. Überlegen Sie daher genau, welche Plugins Sie wirklich brauchen. Den Rest deaktivieren und löschen Sie!

Fortgeschrittene Techniken

Im Bereich CSS Dateien zusammenfassen haben wir gelernt, dass jede geladene Datei einen HTTP-Request (Serveranfrage) erzeugt. Ein Browser kann pro Domain zwischen zwei und vier Anfragen gleichzeitig verarbeiten. Daraus folgt: Der Seitenaufbau einer Webseite müsste wesentlich schneller erfolgen, wenn Dateien von unterschiedlichen Domains geladen werden. Da Grafiken und Bilder eine der größten Performancebremsen sind, lagern wir sie nun auf eine Subdomain für noch mehr Performance aus.

Auslagern der WordPress-Mediathek auf eine Subdomain

Zunächst brauchen wir jetzt eine Subdomain. Passenderweise könnte sie wie folgt heissen: http://media.deine-domain.de. Mit dieser Namenskonvention weiß man sofort, dass sich diese Subdomain um die Medieninhalte kümmert.

Den Ordner der Mediathek umziehen

Nun erstellen Sie per FTP(es) einen neuen Ordner namens media auf dem Server und kopieren Sie den Ordner der Mediathek (Pfad: /wp-content/uploads) auf den Desktop (nur den Ordner uploads). Im Anschluss laden Sie den neu erstellten Ordner auf den Server hoch. Achten Sie unbedingt darauf, dass Sie den Original-Ordner uploads nicht löschen. Stellen Sie sicher, dass die erstellte Subdomain nun auf den korrekten Ordner des Server verweist. Jetzt benötigen wir noch den korrekten Serverpfad zur neuen Mediathek. Erstellen Sie hierzu eine PHP Datei names dir.php und kopieren Sie folgenden Inhalt hinein:

<? echo dirname(__FILE__); ?>

Die PHP-Datei kopieren Sie auf den Server in den Ordner media und rufen ihn mit dem Browser auf (http://media.deine-domain.de/dir.php). Den angezeigten Pfad notieren Sie und löschen die Datei sofort wieder vom Server.

Die Änderungen an der Datenbank

Ganz wichtig: Datenbank Backup anlegen!
Über die Datenbankverwaltungsoberfläche phpMyAdmin werden nun die Pfade zur Mediathek auf den neuen Ordner aktualisiert. Dazu wird im Tab SQL folgender Befehl abgesetzt:

UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://deine-domain.de/wp-content/uploads/', 'http://media.deine-domain.de/uploads');

Sollten Sie ein anderes Tabellenpräfix als wp_ verwenden, muss das natürlich im obigen Befehl angepasst werden.

Die Einstellungen im WordPress Backend

Damit WordPress die Bilder finden kann und diese auch an dem richtigen Ort gespeichert werden, müssen Sie noch ein paar Änderungen in der WordPress-Verwaltungsoberfläche vornehmen.
Unter Einstellungen => Mediathek => Fotos hochladen findet man die zu ändernden Angaben.

Funktioniert alles korrekt, sollte Ihre Webseite noch etwas schneller geworden sein. Da Google einige Zeit braucht, um zu merken, dass die Bilder umgezogen sind, sollte erst einige Wochen danach der alte uploads Ordner gelöscht werden.

Ranking in der Google Bildersuche

Wenn Sie mit Ihren Bildern in der Google Bildersuche bereits gut gerankt sind, sollten Sie nun weiterführende Maßnahmen treffen, um diese Positionen nicht zu verlieren. Findet Google ein bestimmtes Bild nicht mehr an der Originalposition, so wird dieses Bild aus dem Index gestrichen. Bis die neuabgelegten Bilder wieder an der alten Position im Ranking stehen, kann es unter Umständen Jahre dauern.

Abhilfe schafft hier ein Permanent Redirect 301 für jedes einzelne Bild. Man fügt in die .htaccess nach folgendem Muster die Redirects ein:

redirect 301 /wp-content/uploads/2012/04/wordpress-security1.png http://subdomain.deine-domain.de/uploads/2012/04/wordpress-security1.png

Ich gebe zu, dass es ziemlich lästig werden kann, einen solchen Redirect für jedes Bild zu schreiben. Doch um eine gute Position in der Google-Bildersuche zu erhalten, lohnt es sich, da Google so nach ca. einer Woche die Bilder im neuen Ordner auf der selben Position im Bildranking hat.

Zusammenfassung

Sicherlich könnte man noch mehr machen, um die Performance einer WordPress-Webseite zu erhöhen. Jedoch sollten diese recht einfachen Maßnahmen bereits für einen ordentlichen Geschwindigkeitsschub ausgereicht haben. Das Firefox Plugin YSlow sollte bereits einen Grad A und Google Page Speed einen Score deutlich über 80 festgestellt haben, womit man schon recht zufrieden sein kann.
 

Schreibe einen Kommentar

*