Performance-Turbo einschalten: WordPress-Webseiten richtig schnell machen

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 befassen wir uns mit einigen On-Page Optimierungen. Das sind Optimierungen, die nicht direkt auf dem Serverbetriebssystem gemacht werden müssen.

WordPress-Webseiten richtig schnell machen

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

Starte den Performance Test mit YSlow

Sollten Sie Firefox mit diesen zwei Add-ons nicht nutzen wollen, so können sie auch online über Googles PageSpeedInsights den Performance-Test machen.

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.

Per @import CSS-Dateien zu einer einzigen bündeln

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.

Der CSS / JavaScript 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. Weiter unten zeige ich eine Lösung auf.

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 <head> und </head> 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.

   ...
    &lt;script type='text/javascript' src='jquery.js'&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src='general.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

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.

Das WordPress Plugin W3 Total Cache

Webseite cachen – die Einstellungen

Wo: Performance => General Settings

Die Page Cache Einstellungen des W3 Total Cache Plugins

Cache Einstellungen des W3 Total Cache Plugins

CSS bündeln und komprimieren, HTML komprimieren

Wo: Performance => General Settings

Die Minify Einstellungen des W3 Total Cache Plugins

Wo: Performance => Minify

Die erweiterten Einstellungen des W3 Total Cache Plugins

Diese Einstellungen haben folgendes Ergebnis gebracht:

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)
&lt;FilesMatch "\\.(js|css|html|htm|php|xml)$"&gt;
SetOutputFilter DEFLATE
&lt;/FilesMatch&gt;

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.

So zeigt man die Grafik-Info unter Firefox an

Schon sehen Sie an der markierten Stelle wie breit Ihre Bilder sein dürfen.

Hier können Sie die korrekte Bildbreite ersehen

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.

Das WordPress Plugin Toolbox

Sergej Müller beschreibt seine Toolbox und das darin enthaltene Ysmush.it Simple einmal genauer.

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:

&lt;? echo dirname(__FILE__); ?&gt;

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.

Die zu ändernden Einstellungen der Mediathek

Im oberen Feld tragen Sie den mit der dir.php ermittelten Serverpfad ein, in das untere Feld den kompletten Pfad zu den Dateien. Nach dem Abspeichern sollten Sie ein Bild in die neue Mediathek hochladen, um zu prüfen, dass auch alles richtig funktioniert.

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.

Links zum Beitrag

(dpe)

ist freier Journalist, WordPress-Entwickler und Spezialist für WordPress-Sicherheit. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog TechBrain.de schreibt er über das Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
webSimon
Gast

Hallo Andreas,

@import statt link zu nutzen um die Ladegeschwindigkeit zu steigern ist gelinde gesagt grober Unfug. Wenn da kein Preprozessor davorsteht, löst @import genauso einen Request aus, wie link. In eurem Beispiel werden nicht weniger Http-Requests erzeugt, sondern sie werden auf später verschoben.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Andreas Hecht
Gast

Hallo,

ich kenne den Artikel selbstverständlich auch und diese Problematik ist lediglich gegeben, wenn @import direkt im HTML Head (wie Dein Link – Artikel zeigt) statt eines Link-Elementes genutzt wird. Bei der Nutzung in einem CSS Dokument ist es so nicht gegeben.

webSimon
Gast

Die Problematik, die ich in meinem ersten Kommentar beschreibe ist sehr wohl gegeben. Das @import kann logischerweise erst ausgeführt werden, wenn der Browser es gelesen hat, also nach dem Request des ersten CSS-Dokuments. Danach führt er die anderen Requests aus.

Oder verstehe ich hier irgendwas grundlegend falsch?

Andreas Hecht
Gast

Nach meinen Messungen ist meine Variante schneller, jedoch wäre die beste Lösung sicherlich das komplette Zusammenfassen in ein einziges CSS-Dokument.

trackback

[…] Tweet Ein neuer Artikel von mir auf drWeb.de beschäftigt sich mit der Frage, wie man bei WordPress Webseiten den Performance Turbo einschaltet und sie richtig schnell macht. Wer sich an diese Anleitung hält, wird mit einem […]

Marcel
Gast

Google rät ebenfalls davon ab @import zu verwenden.

https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport

Nikolas
Gast

Danke für den ausführlichen Artikel!

Für die Bilder-Redirects genügt übrigens eine einzige Anweisung in der .htaccess (mit mod_rewrite):

RewriteCond %{HTTP_HOST} !^subdomain\.deine-domain\.de
RewriteRule ^/wp-content/uploads/(.*)$ http://subdomain.deine-domain.de/uploads/$1 [l,nc,r=301]

Die erste Zeile sorgt dafür, dass der Rewrite nur für URLs greifen, die nicht über den neuen Host aufgerufen werden. Die zweite Zeile schreibt alle Anfragen für den Upload-Ordner um. Damit kannst du es dir sparen, für jede einzelne Datei einen eigenen Redirect einzurichten.

Andreas Hecht
Gast

Danke für die nützliche Ergänzung, Nikolas!

trackback

[…] Performance-Turbo einschalten: WordPress-Webseiten richtig schnell machen […]

Bernhard
Gast

Ich nutze das WP Plugin WP Super Cache und bin eigentlich ganz zufrieden damit. Es hat bei mir die Ladegeschwindigkeit auf jeden Fall deutlich verringert.

Flo
Gast

Hallo,
Super Übersicht, danke…

Bringt auf alle Fälle etwas in der Zeit, ich hätt aber gehofft, dass noch mehr in die hooks von wp eingegriffen wird und zb. dann wirklich alle .js im Footer erst geladen werden…

Und ein Teil von meinem .css hat nicht überlebt;(

Anna
Gast

Ich habe eine Homepage für einen Rad Club gemacht (www.rc-gugge.at/wordpress ) Jedoch die Bilder Seite ladet sehr lange und daher habe ich Ihren Rat befolgt und habe auch das Plug in (W3 Total Cache) heruntergeladet. Nachdem ich diese Einstellungen gemacht habe, sind die restlichen Seiten nicht mehr gegangen und haben auch nicht mehr geladen.
Ich bräuchte dringend Hilfe, da es meine Diplomarbeit ist und die Abgabe leider gleich bevorsteht.

Bitte um Hilfe. DANKE im voraus!!!!

Anna Gailberger

Maria
Gast

Aus SEO technischer Sicht wird von Google in USA die Page speed der Homepage als Rankingkriterium miteinbezogen. In Deutschland haben Suchmaschinenroboter wie der Googelbot noch nicht damit begonnen das kann aber noch kommen. Der Artikel zeigt eine sehr schöne Möglichkeit in Google Page speed einen besseren Score zu bekommen und die Homepage wird dann wohl 200-300 Millisekunden schneller aufgehen.
Nicholas hat eine schöne Idee gehabt über die htacess Datei die 301 der Bilder vorzunehmen. Mit einem ähnliche Code kann man auch Duplicate Content vermeiden indem mann von www. auf die nicht www. Version seiner Webseiten umleitet.

rilc0n
Gast

Hallo, guter Artikel, allerdings muss du mal deine Codes bearbeiten, dort werden anstatt < und > angezeigt. Gruß

Jan
Gast

Schöner Artikel. Ich hab mich damit vor Jahren auch mal befasst und das auch von wirtschaftlicher Seite her beleuchtet: http://www.kammerath.net/website-schneller-machen.html Das Thema Ladezeit ist für mich mittlerweile ein Dauerbrenner geworden. Meine Website läuft mittlerweile, was die Bilder angeht, sogar über Akamai CDN.

Stefan
Gast

Hallo,

ich habe gerade eine ganze Woche mit der Beschleunigung meiner Website verbracht – und sie von über 4 Sekunden auf unter 1,5 Sekunden beschleunigt. Ich bin wirklich dankbar für die vielen Tipps hier.
Eine Frage allerdings habe ich: Einige – nicht alle – Bilder habe ich zum parallelen Download auf einer Subdomain zur Verfügung gestellt. Nun habe ich den Browser-Cache über die .htaccess eingestellt – allerdings zeigt Googles Pagespeed Insights mir nun an, dass die Bilder in der neuen Subdomain nicht geached werden! Hast du eine Idee, wie sich das bewerkstelligen lässt?
Viele Grüße

Ulrike Leugering
Gast

Hallo, brauche dringend Hilfe für meine Seite! Freue mich auf eine Antwort. Lieben Gruss aus Kapstadt Ulrike

KARL
Gast
Huhuh,.. ich habe mir das die beiden Plugin Programme in WordPress installiert. Anfangs tat sich ncihts dahingehend dachte ich wieder nur „HEISSE LUFT “ aber dann plötzlich stieg ich permanent im Ranking bei Google. Ich habe das dann auf meinen anderen Domains auch probiert, und es katapultierte mich in NRW auf Platz 1. Also echt,. Du hast nen Orden verdient ! Ich habe keine richtige Ahnung von SEO und so n Kram,. aber das was da oben steht war so einfach erkl, das ich es als Laie problemlos umsetzen konnte. Tausend Dank ! Karl PS.: Sogar im Google Bilder Katalog,..… Read more »
Reto
Gast

Danke für die Anleitung. Ich bin dank dieser Anleitung auf die Toolbox von Sergej aufmerksam geworden und habe dazu einen Code Schnippsel bei hechtmediaarts.com gefunden. Einfach runterladen, in die Toolbox uploaden und schon wandern javascripts vom Header in den Footer.

Mit dem Compressor komme ich noch nicht ganz klar. Kopiere ich dort den gesammten Inhalt meiner CSS um dieses zu komprimieren? Und wäre es nicht besser eine einzige CSS Datei zu erstellen die sämtliche CSS Dateien zusammenfasst?

Denis
Gast

Hi,

sehr gutes Tutorial, vielen Dank :)

Ich habe dennoch eine Frage. Ich habe ca. 500 Bilder und möchte nicht jedes einzeln per 301 weiterleiten, extrem aufwändig. Kann ich das ganze zusammenfassen in der htaccess?

Vielen Dank

LG, Denis

Mario
Gast

Habe die Mediathek jetzt auch mal ausgelagert und auch eine positive Änderung der Geschwindigkeit erreicht. Würde die Auslagerung der Plugins auch eine Verbesserung der Ladezeiten bewirken?

Noch eine kleine Anmerkung. Den Artikel mal einem Update unterziehen, da man nicht direkt im Backend die Pfade zur Mediathek ändern kann.

Trotzdem vielen Dank dafür.

trackback

[…] unter OS Windows XP die Ladezeit beschleunigen lässt, sich Icons verkleinern lassen oder eigene CSS-Dateien für den RSS Fead Reader Sage das Nachrichtenlayout verändern. Da man nie alles wissen kann, lohnt […]

Volmar
Gast

Vielen Dank für den ausführlichen Bericht! – Meine Hochzeitswebsite (www.ch-hochzeitsfotograf.ch) habe ich mit diversen von Dir genannten Tools auch optimiert. Ich verwende dabei auch das Plugin Autoptimize was mir ebenfalls nach vorne gebracht hat. (Google Punkte von ca. 47% auf ca. 56% verbessert). Allerdings meint Google die Bilder können weiter optimiert werden. Nun wüsste ich nicht wie ich das noch weiter optimieren kann. Ein paralleles PlugIn zur Optimierung der Bilder dürfte doch eher kontraproduktiv sein, oder?

Eugen
Gast

Selektives Laden von (Plugin-) Scripten hat mir bei der Optimierung meiner Webseiten sehr geholfen. Ich schlage vor liest euch diesen Beitrag http://www.webtimiser.de/wordpress-schneller-machen/. Dort findet man noch ein Paar Zusätzlichen Tipps.

Christian
Gast

Der SQL Befehl funktioniert nicht so wie er da steht, kann mir jemand den richtigen geben?

Romy Brunner
Gast

Vielen Dank für die Erklärung, die eine Anfängerin wie ich auch versteht!
Danke und bitte weiter schreiben ;-)

wpDiscuz