Ladezeitenoptimierung für Wordpress

Pha­sen­wei­se befas­se ich mich mit der Per­for­mance mei­nes Blogs. Schließ­lich weiß ich ja, dass die­se für Goog­le ein Ran­king­fak­tor ist. Die vie­len Arti­kel, die es dazu im Netz gibt, sind ein Beleg dafür, dass sich vie­le Blog­ge­rIn­nen für die­se Fra­gen inter­es­sie­ren. Viel­leicht sogar dann, wenn sie offi­zi­ell das Gegen­teil behaupten.?‍? 

Mein Inter­es­se an sol­chen Mes­sun­gen hat­te zuletzt etwas nach­ge­las­sen, weil mir die AMP – Warn­hin­wei­se, die Goog­le (Web­mas­ter­tools) mir net­ter­wei­se manch­mal schick­te, nicht ver­stan­den habe. Es gibt min­des­tens zwei gute Plug­ins, die ich aus­pro­biert habe, Feh­ler­mel­dun­gen gab es trotz­dem. Mein momen­ta­nes Word­press-The­me bringt eine AMP – Unter­stüt­zung mit. Lei­der jedoch in Form eines der bei­den Plug­ins, die mich nicht über­zeugt haben. Ich mag Feh­ler­mel­dun­gen nicht. 

Ich ver­mu­te, dass die Pro­ble­me damit zu tun haben, dass die Instal­la­ti­on in älte­ren Blogs mit rela­tiv vie­len Arti­keln halt Pro­ble­me ver­ur­sa­chen, wäh­rend bei einem Neu­an­fang alles glatt lau­fen wird. Seit fast einem Jahr arbei­te ich hier mit dem Guten­berg-Edi­tor und mit eini­gen Block-Plug­ins. Die Mischung aus Bei­trä­gen, die mit dem alten Edi­tor erstellt wur­den und die unter Mit­hil­fe des Guten­berg-Edi­tors ent­stan­den sind, könn­te viel­leicht auch ein Pro­blem für die AMP-Plug­ins dar­stel­len? Das ist natür­lich nur die Ahnung eines Laien. 

1. Wichtige Faktoren für die Performance

Seit der Umstel­lung auf PHP7 ist mei­nes Erach­tens die Per­for­mance von Word­press-Blogs erheb­lich bes­sert gewor­den. Ich fin­de, dies hat mehr gebracht, als man­che Cache-Plug­ins oder das Tuning von .htac­cess – Dateien. 

Apro­pos .htac­cess. Ich nut­ze schon seit einer Wei­le die von Andre­as Hecht erstell­te gro­ße .htac­cess. Aller­dings habe ich die ent­hal­te­ne Fire­wall gegen die vor­he­ri­ge Ver­si­on aus­ge­tauscht, da „mein“ Ser­ver die neue Ver­si­on nicht moch­te. Die Kom­bi­na­ti­on mit mei­nem Cache-Plug­in (WP-Rocket) funk­tio­niert ausgezeichnet.

Ich bin vor einer Wei­le auf HTTP2 umge­stie­gen. Ich weiß nicht, wie das bei ande­ren Pro­vi­dern aus­sieht. All​inkl​.com hat den dafür nöti­gen Ser­ver­wech­sel kos­ten­los und über Nacht durch­ge­führt. Inter­es­sant dabei waren die Tipps, die Per­for­man­ce­gu­rus dazu bereit­hal­ten. Auf die bewähr­te Kom­bi­na­ti­on von CSS- und Java­script-Datei­en soll­te dem­nach näm­lich künf­tig ver­zich­tet wer­den (Link).

Natür­lich habe ich zuerst ein­mal die­se Emp­feh­lun­gen berück­sich­tigt. Mei­ner Mei­nung nach wirkt sich der Ver­zicht aller­dings nicht aus. Die Mes­sun­gen zei­gen übri­gens – was die Ange­le­gen­heit etwas ver­wir­rend bzw. tückisch macht – nor­ma­ler­wei­se schlech­te­re Ergeb­nis­se unter HTTP2, wenn man die Ein­stel­lun­gen unver­än­dert lässt, die Kom­bi­na­tio­nen also beibehält.

2. Messungen

Die Mes­sun­gen mit Page­Speed von Goog­le las­sen im Ver­gleich (bei mei­nem Blog) zu wün­schen übrig. Das ist nichts Neu­es für mich. Goog­le stellt Ansprü­che an die Tech­nik, an denen ich mir frü­her schon die Zäh­ne aus­ge­bis­sen habe. So viel Zeit, fand ich, soll­te ich für die­ses The­ma nicht „ver­schwen­den“. Also habe ich mich auf Ping­dom oder GTme­trix kon­zen­triert. Die noch rela­tiv neue Web­site von Goog­le ist wohl auch nicht weni­ger anspruchs­voll als die alte Version. 

Vor allem die Ergeb­nis­se für die mobi­le Dar­stel­lung sind ohne ein ent­spre­chen­des Plug­in sehr unbe­frie­di­gend. Wenn ich mei­ne Sei­te tes­te, auch außer­halb mei­nes W‑Lans kann ich an der Geschwin­dig­keit nichts aus­set­zen. Ich fin­de sie ok.

Nach mei­nen Erfah­run­gen machen bei all den Opti­mie­rungs­ver­su­chen, mit denen man sei­ne Zeit ver­trö­deln kann, vor allem die ver­wen­de­ten Fotos viel Arbeit. Gera­de dann, wenn man vie­le Bil­der benutzt und das aktu­el­le The­me sie auch in etli­chen Grö­ßen anzeigt, spielt die Kom­pri­mie­rung (im Blog selbst) eine über­ra­gen­de Rolle. 

3. Bilder

Ich habe seit einer Wei­le das Plug­in „Opti­mo­le Image“ im Ein­satz. Lei­der sind der Kapa­zi­tät kos­ten­lo­sen Ver­si­on Gren­zen gesetzt, so dass schnell das bestehen­de Limit aus­ge­reizt hat­te. So muss­te ich mich ent­schei­den, ob ich ver­zich­te oder Geld aus­ge­be. Da ich mit der Leis­tung die­ses Plug­ins hoch­zu­frie­den war, habe ich mich ent­schie­den, das kleins­te Paket im Ange­bot zu neh­men. Ich zah­le jetzt 9 Euro im Monat für Bild­kom­pri­mie­rung. Das ist (auch im Ver­gleich mit ande­ren Pre­mi­um-Lösun­gen) schon hap­pig. Aber ich hab es mir gut über­legt. Übri­gens ist die ent­hal­te­ne Lazy Load – Funk­ti­on viel bes­ser als die aller spe­zia­li­sier­ten Plug­ins, die ich im Lauf der Zeit aus­pro­biert hatte.

Was bei den ver­schie­de­nen Mes­sun­gen unter­schied­lich gewich­tet zu wer­den scheint, sind die hier zahl­reich ein­ge­setz­ten Plug­ins (hier z.Zt. 28). Ich weiß, dass vie­le (vor allem die „Puris­ten“ unter uns) so etwas nie täten. Sie hät­ten damit Pro­ble­me und wür­den ja nie und nim­mer so vie­le Plug­ins ein­set­zen. Zwar schon. Aber wenn es (allein schon das Aus­pro­bie­ren) so viel Spaß macht?!

4. Themes mit viel „Beiwerk“

Moder­ne Word­press – The­mes brin­gen nicht nur ein gan­zes Paket von inklu­si­ven Plug­ins mit, die Gott sei Dank wenigs­tens teil­wei­se optio­nal ver­wen­det wer­den kön­nen. Es befin­den sich dar­un­ter häu­fig für den Betrieb des The­mes erfor­der­li­che Plug­ins wie Frame­works oder Biblio­the­ken für alle mög­li­chen Design­de­tails. Das ist viel­leicht für die Ent­wick­ler prak­tisch, für uns Anwen­der bedeu­tet es: mehr Plug­ins.

Hin­zu kommt ja, dass der „Guten­berg“ – Edi­tor den Ein­satz von einen oder meh­re­ren Block – Plug­ins qua­si erzwingt. Oder arbei­ten Sie nur mit den Stan­dards? Strei­chen Sie die­se Fra­ge, wenn Sie zu den schon erwähn­ten Puris­ten zäh­len. Die­se Block-Plug­ins wie­der­um brin­gen Men­gen an CSS – Files mit, die auch erst ein­mal „ver­daut“ wer­den müssen. 

Man­che grei­fen (der DSGVO zum Trotz) auf die Goog­le – Font­bi­blio­thek zu oder laden (zum ? Mal) Awe­so­me Font – Biblio­thek nach. Das tun übri­gens moder­ne Word­press – The­mes eben­falls, so dass man sich wie­der­um zusätz­li­cher Plug­ins bedie­nen muss, um den Zugriff etwa auf die Goog­le – Fonts zu unter­bin­den. Bei dem hier ver­wen­de­ten The­me ist dies zum Bei­spiel der Fall. Mit den übli­chen Ein­grif­fen (Snip­pets) in das Child-The­me (functions.php) ist es da lei­der nicht getan. Man­che wer­den die­se Mise­re ken­nen. Und ja, es gibt Aut­op­ti­mi­ze mit ein­ge­bau­ter Funk­ti­on. Das funk­tio­niert nur lei­der auch nicht überall.

5. Adobe Typekit – Fonts

Wenn Sie trotz anders­lau­ten­der Emp­feh­lun­gen (DSGVO!) Type­kit-Fonts von Ado­be gern nut­zen, müs­sen Sie nicht nur dar­an den­ken, dies in Ihrer Daten­schutz­er­klä­rung ent­spre­chend zu erwäh­nen, Sie müs­sen zwangs­läu­fig einen klei­nen Per­for­mance-Ver­lust hinnehmen. 

Übri­gens ist Type­kit für die Nut­zer einer akti­ven Crea­ti­ve-Cloud-Abon­ne­ment kostenlos! 

Obwohl ich mich wegen bezüg­lich der Per­for­mance von Type­kit gut umge­se­hen habe, habe ich nichts gefun­den, das hilft, den gemes­se­nen Ver­lust von Per­for­mance zu ver­mei­den. Die Ein­bin­dung von Type­kit-Fonts bremst – aller­dings „nur“ in den übli­chen (hier erwähn­ten) Mes­sun­gen. Dass man davon als Nut­zer (hof­fent­lich) nichts bzw. wenig spürt, steht aller­dings auf einem ande­ren Blatt. Ich ver­wen­de immer wie­der Ado­be Type­kit-Fonts und stel­le (gefühlt) kei­ne Per­for­mance-Ver­lus­te fest.

Es ist schwer, die Leis­tung nicht zu erwäh­nen, wenn es um Web-Schrif­ten geht. Jede Datei, die in Ihrem Code ent­hal­ten ist, muss her­un­ter­ge­la­den wer­den. Das bedeu­tet, dass es Ihre Web­site defi­ni­tiv ver­lang­samt. Ich ken­ne Exper­ten­mei­nun­gen, die sagen, dass auch selbst­ge­hos­te­te Schrift­ar­ten in die­ser Bezie­hung nichts brin­gen wür­den. Das fin­de ich wie­der­um komisch, weil schon der redu­zier­te Over­head doch eigent­lich genau dazu füh­ren sollte?!

6. Fontauswahl

An die­ser Stel­le sei­en noch ein­mal die übli­chen Tipps wie­der­holt, die die Ver­wen­dung von Schrif­ten im Blog betreffen:

1. Redu­zie­ren Sie die Anzahl der Schrif­ten in Ihrem Design
2. Schlie­ßen Sie nur die Sti­le ein, die Sie benö­ti­gen
   Jeder Stil erhöht (theo­re­tisch jeden­falls) die Lade­zeit bzw. die Grö­ße Ihrer Sei­te. Brau­chen Sie die Schrif­ten in 100, 200, 300 und 400 etc.? oder ist es nicht mit einer Schrift­brei­te (400) getan?
3. Wäh­len Sie den kleins­ten Zei­chen­satz aus

Inzwi­schen gibt es Reti­na-Bild­schir­me längst nicht mehr nur für mobi­le Gerä­te. Auch Mac­Books oder grö­ße­re Mac-PC’s sind mit hoch­auf­lö­sen­den Bild­schir­men erhält­lich. Tes­ten Sie des­halb bit­te, wie die von Ihnen favo­ri­sier­te Schrift auf Nicht-Reti­na-Bild­schir­men wir­ken. Auf Reti­na-Dis­plays wir­ken alle Schrif­ten irgend­wie toll, auf nor­ma­len Bild­schir­men aber durch­aus nicht immer. ?