Ladezeit deines WordPress-Blog optimieren

Die Lade­zeit einer Web­sei­te wird für das Ran­king bei Goog­le immer wich­ti­ger. Daher soll­test du dich bes­ser frü­her als spä­ter damit beschäf­ti­gen. Lei­der ist das The­ma immer noch sehr tech­nisch und es gibt nur wenig, was für Wor­d­Press-Selbst­ad­mi­nis­tra­to­ren leicht ver­ständ­lich auf­be­rei­tet ist. In die­sem Post stel­le ich mein Vor­ge­hen 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­nom­men. Dort hat Rohit Dha­wan von Goog­le über „Impro­ving User Enga­ge­ment in Today’s Mobi­le and Soci­al World“ gespro­chen. Er stell­te vor, dass mobi­le Zugrif­fe immer mehr wer­den und dass gera­de bei mobi­len Gerä­ten aber die Lade­zeit beson­ders rele­vant sei. Nach den Unter­su­chun­gen von Goog­le gibt der mobi­le Nut­zer einer Web­sei­te maxi­mal 5 Sekun­den zum Laden, bevor er den Besuch abbricht.

Rohit for­der­te dann alle Zuhö­rer auf, ihre Sei­ten mit einem mobi­len Gerät auf­zu­ru­fen und ein­fach durch Zäh­len abzu­schät­zen, ob die eige­ne Sei­te unter 5 Sekun­den kommt. Was soll ich sagen. Mei­ne Lade­zeit lag eher bei 7 Sekun­den. Wie­der zu hau­se habe ich mich dar­an gemacht, das zu ver­bes­sern. Schon nach kur­zer Zeit war ich hin­rei­chend ein­ge­schüch­tert, weil man mit allem, was Lade­zeit opti­miert, eini­ges auf der Web­sei­te kaputt machen kann. Um ein biss­chen Ein­le­sen und Recher­chie­ren kommst Du also nicht her­um.

Einen guten Ein­stieg bie­tet die Doku­men­ta­ti­on des Pre­mi­um-Plug­ins „WP Rocket“. Hier gibt es gute Erklä­run­gen, wie die Din­ge funk­tio­nie­ren, was sie tun und wofür sie gut sind. Lei­der alles auf Eng­lisch. Wenn es etwas tie­fer gehen soll, fin­de ich die Arti­kel­rei­he „High Speed: Was Wor­d­Press-Web­sites wirk­lich schnell macht“ von Dr. Web sehr gut.

Damit kannst du die Ladezeit messen

Am bes­ten schaust du als ers­tes, wie die Geschwin­dig­keit dei­ner Web­sei­te aktu­ell ist. Wie gesagt – deut­lich unter 5 Sekun­den, da soll sie hin. Es gibt zwei Tools, die du für eine Mes­sung ver­wen­den kannst den Speed Test von Ping­dom und Goog­le PageS­peed Insights.

Für den Speed Test von Ping­dom folgst du dem Link oben. Hier gibst du die URL dei­ner Web­sei­te ein und wählst unter „Test from“ Stock­holm aus, wenn du vor­wie­gend Leser aus Euro­pa hast. Du bekommst nicht nur die Lade­zeit dei­ner Sei­te in Sekun­den, son­dern auch noch diver­se Infos, was wie lang lädt. So kannst du ggf. ana­ly­sie­ren, wo es hakt. Inzwi­schen zeigt die Sei­te auch einen Teil der Ergeb­nis­se von Goog­le PageS­peed Insights mit an.

Bei Goole PageS­peed Insights gibt es zwei Aspek­te, die du ken­nen soll­test:

  • Goog­le misst nicht wirk­lich die Lade­zeit, son­dern ver­gibt einen Score auf­grund ver­schie­de­ner Para­me­ter.
  • Du musst zwi­schen zwei Mes­sun­gen 30 Sekun­den war­ten.

Bei Goog­le PageS­peed bekommst du eine qua­li­ta­ti­ve Bewer­tung der Lade­zeit. Zu den ein­zel­nen Ein­trä­gen gibt Goog­le immer auch Infos, wie du das ggf. ver­bes­sern kannst. Außer­dem bekommst du eine Emp­feh­lung, ob eine Ver­bes­se­rung unbe­dingt gemacht wer­den soll­te oder eher ein Nice-To-Have ist. Was die drin­gend emp­foh­le­nen Ver­bes­se­run­gen angeht, ist das so eine Sache. Ich bin hier auf Ein­trä­ge gestos­sen, die ich ein­fach mit Bord­mit­teln und mei­nen beschränk­ten Ent­wick­ler­kennt­nis­sen schlicht nicht umset­zen kann. Das muss also erst­mal so blei­ben.

Welche Caching-Methoden gibt es?

Sobald du dich mit der Opti­mie­rung der Lade­zeit dei­ner Web­sei­te beschäf­tigst, stol­perst du über das Wort „Caching“. Das ist der Haupt­an­satz­punkt, wie du dei­ne Lade­zei­ten ver­bes­sern kannst. Dabei gibt es ver­schie­de­ne Metho­den.

gzip-Komprimierung

gzip-Kom­pri­mie­rung muss Ser­ver-sei­tig akti­viert sein, damit du es nut­zen kannst. Hier lohnt sich eine Suche in den Foren dei­nes Hos­ters. Wenn du es akti­vie­ren kannst, dann bringt das allei­ne schon ziem­lich viel.

Browser-Caching

Mit Brow­ser-Caching for­derst du die Brow­ser dei­ner Besu­cher auf eine Ver­si­on dei­ner Sei­te im Brow­ser-Cache zu spei­chern. Damit ver­kürzt sich die Lade­zeit dei­ner wie­der­keh­ren­den Besu­cher. Goog­le belohnt allein schon das Akti­vie­ren die­ser Funk­ti­on spür­bar.

Minifizierung

Unter Mini­fi­zie­rung ver­steht man das Zusam­men­fas­sen von HTML/CSS-Datei­en oder auch Skrip­ten, die auf dei­ner Sei­te gela­den wer­den. Das bringt auch schon eini­ges, da es aber je nach The­me und Plug­ins immer wie­der Datei­en gibt, die sich nicht ohne wei­te­res mini­fi­zie­ren las­sen, wenn du kein Ent­wick­ler bist, bleibt hier immer etwas übrig, wor­über Goog­le meckert.

Page-Caching

Beim Page-Caching wer­den sta­ti­sche HTML-Ver­sio­nen dei­ner Sei­ten auf dei­nem Ser­ver vor­ge­hal­ten und bei Anfra­ge aus­ge­ge­ben. Das beschleu­nigt die Anzei­ge von Inhal­ten für dei­ne Nut­zer, da kei­ne Daten­bank­ab­fra­ge gemacht wer­den muss.

Datenbank-Caching

Daten­bank-Caching ist bes­ser als gar kein Caching, aber so rich­tig viel bringt das nicht. Hier wer­den anders als beim Page-Caching kei­ne sta­ti­schen HTML-Sei­ten gespei­chert, son­dern die Daten­bank-Abfra­gen. Bei mir brach­te die Akti­vie­rung kei­ner­lei Effekt.

Objekt-Caching

Und mit dem Objekt-Caching geht es noch eine Stu­fe wei­ter in die Daten­bank und es wer­den nur noch Objek­te der Daten­bank gespei­chert, um schnel­ler abge­fragt zu wer­den. Das bringt noch weni­ger, als das Daten­bank-Caching.

Content Delivery Network (CDN)

Mit CDNs wer­den Media-Datei­en auf zen­tra­le Ser­ver (nicht dei­nen) hoch­ge­la­den und von dort opti­miert aus­ge­ge­ben. Die Pho­ton-Opti­on von Jet­pack ist so ein CDN. Es strei­ten sich die Geis­ter im Netz, ob das für Sei­ten mit einer euro­päi­schen Ziel­grup­pe über­haupt was bringt oder die Lade­zei­ten durch den Stand­ort des CDN (meist USA) nicht sogar län­ger wer­den. Ich habe bis­her aber nie­man­den gefun­den, der das mal rich­tig gemes­sen hat.

WordPress-Plugins für Caching

Wenn du dich ein biss­chen ein­liest, merkst du schnell, dass das ein sehr tech­ni­sches The­ma ist. Oft wird auf die Gefahr hin­ge­wie­sen, dass du dir mit irgend­ei­ner Ein­stel­lung die gan­ze Sei­te lahm legen kannst. Von daher an die­ser Stel­le der Dis­c­lai­mer:

Egal was du tust, um dei­ne Lade­zei­ten zu ver­bes­sern, mache immer, immer, immer VORHER Back­ups von dei­ner Sei­te.

Obwohl die wohl effek­tivs­ten Metho­den – gzip-Kom­pri­mie­rung und Brow­ser-Caching – theo­re­tisch direkt über die htac­cess ein­ge­stellt wer­den kön­nen, habe ich mich dafür ent­schie­den, ein Plug­in ein­zu­set­zen, da ich mir das schlicht nicht zuge­traut habe. Bei der Suche nach Caching-Plug­ins stösst du schnell auf die übli­chen ver­däch­ti­gen wie W3 Total Cache, Cachi­fy, WP Super Cache und WP Rocket (es gibt noch vie­le mehr…).

Cachify

Cachi­fy hat vie­le begeis­ter­te Anhän­ger, da es wirk­lich ein­fach zu bedie­nen ist. Mich hat es nicht über­zeugt, da die ein­fa­che Bedie­nung bei mir auf Kos­ten der Lade­zeit-Opti­mie­rung ging. Ja, es gab einen Effekt, aber der war sehr klein, daher habe ich es wie­der deinstal­liert und mich wei­ter umge­schaut.

WP Rocket

WP Rocket ist ein Pre­mi­um-Plug­in, zu dem es kei­ne freie Ver­si­on im Wor­d­Press-Repo­si­to­ry gibt. Es scheint aber nach allem, was man hört und liest, sehr gut zu sein. Mich haben aber drei Din­ge abge­hal­ten:

  • Es gibt nir­gend­wo auf der Web­sei­te Screen­shots oder ähn­li­ches, die einem die Ober­flä­che des Plug­ins nach der Instal­la­ti­on zei­gen. Es gibt zwar eine sehr schö­ne Doku, aber ich hat­te trotz­dem das Gefühl die Kat­ze im Sack zu kau­fen.
  • Es gibt kei­ne Test­ver­si­on. Du musst das Plug­in kau­fen und hast eine 30-Tage-Geld-Zurück-Garan­tie. WP Rocket behält sich aber vor, dei­ne Unzu­frie­den­heit zu ana­ly­sie­ren und dir bei der Pro­blem­lö­sung zu hel­fen. Sprich, ein­fach mal aus­pro­bie­ren, wenn du es nicht wirk­lich ver­wen­den willst, geht nicht.
  • Was mich letzt­end­lich abge­hal­ten hat, war das Lizenz­mo­dell. Du kannst eine Lizenz für eine Web­sei­te kau­fen und die­se ent­we­der auf 3 Web­sei­ten oder belie­big vie­le Web­sei­ten erwei­tern. Letz­te­res lohnt sich erst ab der 6. Web­sei­te. Wenn du nun zwei oder vier Web­sei­ten hast, zahlst du immer Lizenz­kos­ten, die du nicht brauchst. Es gibt nicht die Mög­lich­keit zwei ein­zel­ne Lizen­zen zu kau­fen und die­se spä­ter zu einer Drei­er-Lizenz zu kom­bi­nie­ren, wenn die drit­te Web­sei­te dazu­kommt.

Abge­se­hen davon ist WP Rocket nicht bil­lig. Mit einer ein­zel­nen Sei­te 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 genaue­ren Blick dar­auf wer­fen. 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 kos­ten­lo­sen Kon­kur­renz umge­se­hen und bin bei W3 Total Cache fün­dig und bis­her glück­lich gewor­den.

Das Plug­in hat (sehr) vie­le akti­ve Instal­la­tio­nen. Das es gra­tis ist, erkaufst du dir durch Wer­bung für die Pre­mi­um-Ver­si­on, deren Nut­zen sich mir aber noch nicht erschlos­sen hat. Die freie Ver­si­on kann alles, was ich brau­che.

Es gibt sehr vie­le Ein­stel­lungs-Optio­nen. Ich fin­de aber wirk­lich schön, dass du auf einer Sei­te in den Ein­stel­lun­gen alle ver­füg­ba­ren Caching-Mech­nis­men in der emp­foh­le­nen Stan­dard­kon­fi­gu­ra­ti­on akti­ve­ren kann. Das ist für Dum­mies. Erst, wenn du einen Mecha­nis­mus spe­zi­ell twea­ken möch­test, musst du in die Detail­ein­stel­lun­gen – und dann soll­test du wis­sen, was du tust (und ein Back­up vor­her machen). Out of the box funk­tio­niert das Plug­in aber bereits super und hat mei­ne Lade­zeit run­ter auf ca. 2 Sekun­den gebracht.

Gegen­über WP Rocket fehlt W3 Total Cache eine Funk­ti­on, für die du ein sepa­ra­tes Plug­in benö­tigst: Lazy­load für Bil­der.

Was hat noch Einfluss auf die Ladezeit?

Neben dem Caching bin ich noch über drei wei­te­re Aspek­te gestos­sen, die mei­ne Lade­zeit beein­flus­sen.

Serverantwortzeiten

Bei mei­nem Hos­ter für geekyorganizer.com mäkelt Goog­le PageS­peed Insights immer die Ser­ver­ant­wort­zei­ten als zu lang­sam an. Ich habe nicht das kleins­te Web­hos­ting-Paket, aber könn­te auch bezahl­bar noch aus­bau­en. Par­al­lel bin ich aber mit einer ande­ren Sei­te zu dem Schwei­zer Hos­ter cyon* gewech­selt. Hier gibt es kein Gemä­kel von Goog­le. Ich kann cyon gene­rell emp­feh­len (Stich­wort: Let’s encrypt und http/2) und wer­de auch mit geekyorganizer.com in abseh­ba­rer Zeit dort­hin umzie­hen.

Das verwendete WordPress-Theme

Einen wei­te­ren Effekt, den ich zwi­schen den bei­den Sei­ten deut­lich sehe, geht auf das ver­wen­de­tet The­me zurück. Auf geekyorganizer.com ist Twen­ty Six­te­en im Ein­satz, auf der ande­ren Sei­te Gene­rate­Press*. Bei­de haben unter­schied­li­che Vor- und Nach­tei­le, was die Lade­zeit angeht.

Optimierte Bildgrößen

Und das drit­te sind die opti­mier­ten Bild­grö­ßen. Hier wird Wor­d­Press mit jeder Ver­si­on bes­ser und ich bin der­zeit auch ohne Lazy­load-Plug­in schon ganz zufrie­den.

Weitere Quellen rund um das Thema Ladezeit

Schreibe einen Kommentar