Mit einfachen Schritten die WordPress Geschwindigkeit verbessern!

Das Thema Ladezeiten wird immer wichtiger für Webseite- und Blogbetreiber. Eine langsame Website sorgt schnell für Frust beim Nutzer und im schlimmsten Fall sogar zum kompletten Seitenabbruch. Eine schnelle Website kann aber auch weitere Vorteile haben, ein gutes Beispiel stammt von Google. Nachdem bei Google Maps die Seitengröße von 100kb auf 70-80kb reduziert wurde, nahm der Traffic in der ersten Woche um 10% zu. Ein Weiteres Beispiel kommt von Amazon, wo durch eine Reduzierung der Ladezeiten um durchschnittlich 100 Millisekunden der Umsatz um 1% gesteigert werden konnte (Quelle).

Ist mein Blog überhaupt zu langsam?

Bevor es an die Optimierung der Ladezeiten geht, muss zunächst festgestellt werden, ob die Seite überhaupt zu langsam ist? Hierfür empfiehlt sich ein Blick in die Google Webmaster Tools:

  • Google Webmaster Tools (Google Labs >> Webseite Leistung)

Meine Testseite ist in der Tat zu langsam. Im Durchschnitt benötigen die Seiten 4,4 Sekunden zum Laden. Damit ist die Testseite langsamer als 69 % der Websites.

Die Auswertung von den Webmaster Tools ist allerdings nur von geringer Genauigkeit (weniger als 100 Messungen), daher ist es an der Zeit für eine Detailanalyse. Hierfür nutze ich Google Analytics.

  • Google Analytics (Content >> Website Geschwindigkeit >> Seiten Timings)

In der Ansicht Seiten Timings wird die durchschnittliche Ladezeit der Einzelseiten angezeigt. Zusätzlich findet sich in der Spalte „Seitenladebeispiel“ ein Hinweis, wie oft die Messung durchgeführt wurde, schließlich kann es in Einzelfällen immer mal vorkommen, dass die Seite hängt.

Da einzelne Seiten bedeutend langsamer laden als der Durchschnitt, ist es an der Zeit sich das Ladeverhalten dieser Seiten mal genauer anzuschauen. Hierfür eignet sich am besten ein Wasserfalldiagramm, das die einzelnen Elemente der Seite in ihrer Ladereihenfolge anzeigt.

  • Google Page Speed oder Pingdom

Mit Google Page Speed oder auch Pingdom bieten sich gleich 2 kostenlose Tools an. Ich empfehle die beiden Tools parallel zu nutzen, da beide interessante Tipps zur Optimierung liefern.

Schritt 1: Grafiken optimieren

Anhand des Wasserfallsdiagramms ist erkennbar, dass die Bilder für über 60% der Ladezeiten verantwortlich sind. Daher setzt meine erste Optimierung hier an.

Für Fotos ist das JPG-Format ideal. JPGs lassen sich fürs Web sehr stark komprimieren, Komprimierungsstufen zwischen 50 – 80 % sind meist noch akzeptabel. Wer mit Photoshop oder GIMP arbeitet, sollte vor dem speichern am besten ein wenig mit den Kompressionsraten spielen.

PNGs und GIFs sind ideal für Grafiken mit nur geringer Farbflächen/Transparenz wie beispielsweise Buttons und Logos. Wenn man PNGs vor dem speichern indiziert (GIMP: Bild / Modus / Indiziert) und die „Internet-optimierte Palette verwendet“, erhält man in der Regel geringere Dateigrößen als bei GiFs.

Auf eine Bildskalierung mittels HTML/CSS sollte man komplett verzichten, da das Bild vom Browser in der vollen Größe herunter geladen wird und entsprechend keine Ladezeit einspart.

Schritt 2: CSS/JavaScript komprimieren mit minify

Sehr viel Optimierungspotential bieten auch die CSS- und Javascript-Dateien. Bei Web-Projekten kommt es häufig vor, dass zahlreiche externe CSS- und JS-Dateien eingebunden sind, was eine Vielzahl von HTTP-Requests benötigt. Gleichzeitig liegen die Dateigrößen insbesondere bei den JavaSript Files schnell über 100 kB.
Die Lösung heißt minify, d.h. alle externen JS- und CSS-Dateien werden in jeweils eine Datei zusammengefasst. Ein sehr schönes Tool dafür ist Refresh SF. Meine CSS Dateien konnte ich um 29% verkleinern. Weiteres Optimierungspotential besteht durch die weitere Komprimierung als GZIP (85 %), was von den meisten Browsern unterstützt wird.

Ein Nachteil von ist minify jedoch: die optimierten Dateien sind nicht gerade übersichtlich, was das Debugging der zusammengefassten Dateien deutlich erschwert.

Schritt 3: Caching Plugin

Zusätzlich sollte man ein Caching-Plugin wie W3 Total Cache oder WP-Super-Cache installieren, wobei ich ersteres nutze. Dadurch wird die WordPress Installation bedeutend schneller. Das Plugin ist zwar direkt nach der Installation einsatzbereit, bietet aber darüber hinaus noch überwältigend viele Einstellungs- möglichkeiten.

Tags: , , ,