Ladezeit deines WordPress-Blog optimieren

Die Lade­zeit einer Webseite wird für das Ranking bei Google immer wich­tiger. Daher soll­test du dich besser früher als später damit beschäf­tigen. Leider ist das Thema immer noch sehr tech­nisch und es gibt nur wenig, was für Word­Press-Selbst­ad­mi­ni­stra­toren leicht verständ­lich aufbe­reitet ist. In diesem Post stelle ich mein Vorgehen vor, wie ich für den Blog geekyorganizer.com die Lade­zeit opti­miert habe.

Warum solltest du dich mit der Ladezeit deines Blogs beschäftigen?

Im März habe ich an der Rock the Blog 2016 teil­ge­nommen. Dort hat Rohit Dhawan von Google über „Impro­ving User Enga­ge­ment in Today’s Mobile and Social World“ gespro­chen. Er stellte vor, dass mobile Zugriffe immer mehr werden und dass gerade bei mobilen Geräten aber die Lade­zeit beson­ders rele­vant sei. Nach den Unter­su­chungen von Google gibt der mobile Nutzer einer Webseite maximal 5 Sekunden zum Laden, bevor er den Besuch abbricht.

Rohit forderte dann alle Zuhörer auf, ihre Seiten mit einem mobilen Gerät aufzu­rufen und einfach durch Zählen abzu­schätzen, ob die eigene Seite unter 5 Sekunden kommt. Was soll ich sagen. Meine Lade­zeit lag eher bei 7 Sekunden. Wieder zu hause habe ich mich daran gemacht, das zu verbes­sern. Schon nach kurzer Zeit war ich hinrei­chend einge­schüch­tert, weil man mit allem, was Lade­zeit opti­miert, einiges auf der Webseite kaputt machen kann. Um ein biss­chen Einlesen und Recher­chieren kommst Du also nicht herum.

Einen guten Einstieg bietet die Doku­men­ta­tion des Premium-Plugins „WP Rocket“. Hier gibt es gute Erklä­rungen, wie die Dinge funk­tio­nieren, was sie tun und wofür sie gut sind. Leider alles auf Englisch. Wenn es etwas tiefer gehen soll, finde ich die Arti­kel­reihe „High Speed: Was Word­Press-Websites wirk­lich schnell macht“ von Dr. Web sehr gut.

Damit kannst du die Ladezeit messen

Am besten schaust du als erstes, wie die Geschwin­dig­keit deiner Webseite aktuell ist. Wie gesagt — deut­lich unter 5 Sekunden, da soll sie hin. Es gibt zwei Tools, die du für eine Messung verwenden kannst den Speed Test von Pingdom und Google PageS­peed Insights.

Für den Speed Test von Pingdom folgst du dem Link oben. Hier gibst du die URL deiner Webseite ein und wählst unter „Test from“ Stock­holm aus, wenn du vorwie­gend Leser aus Europa hast. Du bekommst nicht nur die Lade­zeit deiner Seite in Sekunden, sondern auch noch diverse Infos, was wie lang lädt. So kannst du ggf. analy­sieren, wo es hakt. Inzwi­schen zeigt die Seite auch einen Teil der Ergeb­nisse von Google PageS­peed Insights mit an.

Bei Goole PageS­peed Insights gibt es zwei Aspekte, die du kennen soll­test:

  • Google misst nicht wirk­lich die Lade­zeit, sondern vergibt einen Score aufgrund verschie­dener Para­meter.
  • Du musst zwischen zwei Messungen 30 Sekunden warten.

Bei Google PageS­peed bekommst du eine quali­ta­tive Bewer­tung der Lade­zeit. Zu den einzelnen Einträgen gibt Google immer auch Infos, wie du das ggf. verbes­sern kannst. Außerdem bekommst du eine Empfeh­lung, ob eine Verbes­se­rung unbe­dingt gemacht werden sollte oder eher ein Nice-To-Have ist. Was die drin­gend empfoh­lenen Verbes­se­rungen angeht, ist das so eine Sache. Ich bin hier auf Einträge gesto­ssen, die ich einfach mit Bord­mit­teln und meinen beschränkten Entwick­ler­kennt­nissen schlicht nicht umsetzen kann. Das muss also erstmal so bleiben.

Welche Caching-Methoden gibt es?

Sobald du dich mit der Opti­mie­rung der Lade­zeit deiner Webseite beschäf­tigst, stol­perst du über das Wort „Caching“. Das ist der Haupt­an­satz­punkt, wie du deine Lade­zeiten verbes­sern kannst. Dabei gibt es verschie­dene Methoden.

gzip-Komprimierung

gzip-Kompri­mie­rung muss Server-seitig akti­viert sein, damit du es nutzen kannst. Hier lohnt sich eine Suche in den Foren deines Hosters. Wenn du es akti­vieren kannst, dann bringt das alleine schon ziem­lich viel.

Browser-Caching

Mit Browser-Caching forderst du die Browser deiner Besu­cher auf eine Version deiner Seite im Browser-Cache zu spei­chern. Damit verkürzt sich die Lade­zeit deiner wieder­keh­renden Besu­cher. Google belohnt allein schon das Akti­vieren dieser Funk­tion spürbar.

Minifizierung

Unter Mini­fi­zie­rung versteht man das Zusam­men­fassen von HTML/CSS-Dateien oder auch Skripten, die auf deiner Seite geladen werden. Das bringt auch schon einiges, da es aber je nach Theme und Plugins immer wieder Dateien gibt, die sich nicht ohne weiteres mini­fi­zieren lassen, wenn du kein Entwickler bist, bleibt hier immer etwas übrig, worüber Google meckert.

Page-Caching

Beim Page-Caching werden stati­sche HTML-Versionen deiner Seiten auf deinem Server vorge­halten und bei Anfrage ausge­geben. Das beschleu­nigt die Anzeige von Inhalten für deine Nutzer, da keine Daten­bank­ab­frage gemacht werden muss.

Datenbank-Caching

Daten­bank-Caching ist besser als gar kein Caching, aber so richtig viel bringt das nicht. Hier werden anders als beim Page-Caching keine stati­schen HTML-Seiten gespei­chert, sondern die Daten­bank-Abfragen. Bei mir brachte die Akti­vie­rung keinerlei Effekt.

Objekt-Caching

Und mit dem Objekt-Caching geht es noch eine Stufe weiter in die Daten­bank und es werden nur noch Objekte der Daten­bank gespei­chert, um schneller abge­fragt zu werden. Das bringt noch weniger, als das Daten­bank-Caching.

Content Delivery Network (CDN)

Mit CDNs werden Media-Dateien auf zentrale Server (nicht deinen) hoch­ge­laden und von dort opti­miert ausge­geben. Die Photon-Option von Jetpack ist so ein CDN. Es streiten sich die Geister im Netz, ob das für Seiten mit einer euro­päi­schen Ziel­gruppe über­haupt was bringt oder die Lade­zeiten durch den Standort des CDN (meist USA) nicht sogar länger werden. Ich habe bisher aber niemanden gefunden, der das mal richtig gemessen hat.

WordPress-Plugins für Caching

Wenn du dich ein biss­chen einliest, merkst du schnell, dass das ein sehr tech­ni­sches Thema ist. Oft wird auf die Gefahr hinge­wiesen, dass du dir mit irgend­einer Einstel­lung die ganze Seite lahm legen kannst. Von daher an dieser Stelle der Disc­laimer:

Egal was du tust, um deine Lade­zeiten zu verbes­sern, mache immer, immer, immer VORHER Backups von deiner Seite.

Obwohl die wohl effek­tiv­sten Methoden — gzip-Kompri­mie­rung und Browser-Caching — theo­re­tisch direkt über die htac­cess einge­stellt werden können, habe ich mich dafür entschieden, ein Plugin einzu­setzen, da ich mir das schlicht nicht zuge­traut habe. Bei der Suche nach Caching-Plugins stösst du schnell auf die übli­chen verdäch­tigen wie W3 Total Cache, Cachify, WP Super Cache und WP Rocket (es gibt noch viele mehr…).

Cachify

Cachify hat viele begei­sterte Anhänger, da es wirk­lich einfach zu bedienen ist. Mich hat es nicht über­zeugt, da die einfache Bedie­nung bei mir auf Kosten der Lade­zeit-Opti­mie­rung ging. Ja, es gab einen Effekt, aber der war sehr klein, daher habe ich es wieder deinstal­liert und mich weiter umge­schaut.

WP Rocket

WP Rocket ist ein Premium-Plugin, zu dem es keine freie Version im Word­Press-Repo­si­tory gibt. Es scheint aber nach allem, was man hört und liest, sehr gut zu sein. Mich haben aber drei Dinge abge­halten:

  • Es gibt nirgendwo auf der Webseite Screen­shots oder ähnli­ches, die einem die Ober­fläche des Plugins nach der Instal­la­tion zeigen. Es gibt zwar eine sehr schöne Doku, aber ich hatte trotzdem das Gefühl die Katze im Sack zu kaufen.
  • Es gibt keine Test­ver­sion. Du musst das Plugin kaufen und hast eine 30-Tage-Geld-Zurück-Garantie. WP Rocket behält sich aber vor, deine Unzu­frie­den­heit zu analy­sieren und dir bei der Problem­lö­sung zu helfen. Sprich, einfach mal auspro­bieren, wenn du es nicht wirk­lich verwenden willst, geht nicht.
  • Was mich letzt­end­lich abge­halten hat, war das Lizenz­mo­dell. Du kannst eine Lizenz für eine Webseite kaufen und diese entweder auf 3 Webseiten oder beliebig viele Webseiten erwei­tern. Letz­teres lohnt sich erst ab der 6. Webseite. Wenn du nun zwei oder vier Webseiten hast, zahlst du immer Lizenz­ko­sten, die du nicht brauchst. Es gibt nicht die Möglich­keit zwei einzelne Lizenzen zu kaufen und diese später zu einer Dreier-Lizenz zu kombi­nieren, wenn die dritte Webseite dazu­kommt.

Abge­sehen davon ist WP Rocket nicht billig. Mit einer einzelnen Seite bist du mit 49$ Erst­in­vest und jähr­lich 25$ Update/Pflege dabei. Wenn das Lizenz­mo­dell und der Preis für dich okay sind, soll­test du einen genaueren Blick darauf werfen. Man liest im Netz nur gutes über WP Rocket.

W3 Total Cache

Da mich bei WP Rocket das Lizenz­mo­dell abge­schreckt hat, habe ich mich bei der kosten­losen Konkur­renz umge­sehen und bin bei W3 Total Cache fündig und bisher glück­lich geworden.

Das Plugin hat (sehr) viele aktive Instal­la­tionen. Das es gratis ist, erkaufst du dir durch Werbung für die Premium-Version, deren Nutzen sich mir aber noch nicht erschlossen hat. Die freie Version kann alles, was ich brauche.

Es gibt sehr viele Einstel­lungs-Optionen. Ich finde aber wirk­lich schön, dass du auf einer Seite in den Einstel­lungen alle verfüg­baren Caching-Mech­nismen in der empfoh­lenen Stan­dard­kon­fi­gu­ra­tion akti­veren kann. Das ist für Dummies. Erst, wenn du einen Mecha­nismus speziell tweaken möch­test, musst du in die Detail­ein­stel­lungen — und dann soll­test du wissen, was du tust (und ein Backup vorher machen). Out of the box funk­tio­niert das Plugin aber bereits super und hat meine Lade­zeit runter auf ca. 2 Sekunden gebracht.

Gegen­über WP Rocket fehlt W3 Total Cache eine Funk­tion, für die du ein sepa­rates Plugin benö­tigst: Lazy­load für Bilder.

Was hat noch Einfluss auf die Ladezeit?

Neben dem Caching bin ich noch über drei weitere Aspekte gesto­ssen, die meine Lade­zeit beein­flussen.

Serverantwortzeiten

Bei meinem Hoster für geekyorganizer.com mäkelt Google PageS­peed Insights immer die Server­ant­wort­zeiten als zu langsam an. Ich habe nicht das kleinste Webho­sting-Paket, aber könnte auch bezahlbar noch ausbauen. Parallel bin ich aber mit einer anderen Seite zu dem Schweizer Hoster cyon* gewech­selt. Hier gibt es kein Gemäkel von Google. Ich kann cyon gene­rell empfehlen (Stich­wort: Let’s encrypt und http/2) und werde auch mit geekyorganizer.com in abseh­barer Zeit dorthin umziehen.

Das verwendete WordPress-Theme

Einen weiteren Effekt, den ich zwischen den beiden Seiten deut­lich sehe, geht auf das verwen­detet Theme zurück. Auf geekyorganizer.com ist Twenty Sixteen im Einsatz, auf der anderen Seite Gene­rate­Press*. Beide haben unter­schied­liche Vor- und Nach­teile, was die Lade­zeit angeht.

Optimierte Bildgrößen

Und das dritte sind die opti­mierten Bild­größen. Hier wird Word­Press mit jeder Version besser und ich bin derzeit auch ohne Lazy­load-Plugin schon ganz zufrieden.

Weitere Quellen rund um das Thema Ladezeit

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.