Mein Blog war zu langsam. Er brauchte über eine Sekunde zum Laden. So viel Geduld hat so mancher Blogbesucher nicht. So richtig darauf aufmerksam gemacht hat mich Indro, der seinen Blog rubbelbatz.de zum schnellsten Elternblog ernannte (378 ms Ladezeit). Challenge accepted! Ich setzte mich also an die Optimierung meines PageSpeeds und möchte meine ersten Erfahrungen zeigen. Es sind nur Zwischenschritte – nach oben hin ist bestimmt noch etwas offen!

Was ist PageSpeed-Optimierung?

Im Grunde geht es darum, den Blog so zu gestalten, dass Bilder und Quellcode sehr schnell geladen werden können. Das klingt sehr einfach, erfordert jedoch teilweise sehr viel technisches Wissen und Zugriff auf die Dateien. Da ich keinen Entwickler auf die PageSpeed-Optimierung ansetzen wollte, arbeitete ich lediglich mit WordPress-Plugins, der Verkleinerung von Bildern sowie der Löschung von Dateien.

Wer sich selbst in das sehr umfangreiche Thema einlesen möchte, findet auf folgenden Seiten wertvolle Hinweise dazu:

Tools zur PageSpeed-Messung

Das Problem: Alle Tools messen unterschiedlich. Viele zählen die Ladezeit in Sekunden, andere geben sogar ein individuelles Ranking. Aber sind es nun 59, 62 oder 91 von 100 Punkten? Ich habe die Anfangswerte verschiedener Tools erfasst, um diese auch nachträglich nachvollziehen zu können. Vergleicht man Blogs untereinander, dann sollte man immer mit denselben Tools arbeiten! Noch ein Tipp, auf den Sebastian von iamyourfather.de hinwies: Immer einen Test-Standort in der Nähe auswählen. Z. B. bei pingdom.com wählte ich Amsterdam aus.

Ausgangslage von mamaskind.de

Es fällt auf, dass meine Ladezeit mit 1,72 sek deutlich über der empfohlenen Zeit von 1 sek liegt. mamaskind.de war mit 1,7 MB auch sehr groß. Die Seitenladezeit von Google Analytics hilft mir für die Analyse leider nicht weiter.

pagespeed-google-analytics-mamaskind

Google ist nicht sehr aussagekräftig – starke Schwankungen

Tool – vor Optimierung Messwert 1 Messwert 2
PageSpeed Insights 59/100 (mobil) 68/100 (desktop)
tools.pingdom.com 81/100 1,72 Sek & 1,7 MB Größe
pagespeed.de 62/100 1,224 Sek

Nach der ersten Optimierung

Tool – nach Optimierung Messwert 1 Messwert 2
PageSpeed Insights 66/100 (mobil) 67/100 (desktop)
tools.pingdom.com 84/100 370 ms & 720 kB Größe
pagespeed.de 76/100 322 ms

Was habe ich optimiert?

In vielen E-Mails mit Indro, der mich sehr anspornte, mich endlich mit dem Thema zu beschäftigen, wies er mich darauf hin, dass jedes zusätzliche Plugin ungünstig ist. Klar, jedes Teil, jeder Request, muss extra geladen werden und geht zu Lasten der Ladezeit. Ein gutes Tool zum Testen, welches Plugin die Seite lahmlegt ist P3 (Plugin Performance Profiler). Damit startete ich einen automatischen Scan meines Blogs und stellte fest, dass einige Plugins die Ladezeit in die Höhe treiben. Selbst nach dem starken Ausmisten meiner Plugins bleiben noch 15, die zusammen 58 % meiner Seitenladezeit ausmachen. Ganz schön viel. Das Plugin, welches am meisten Ressourcen frisst ist WordPress SEO (Yoast). Aber davon werde ich mich nicht trennen.

p3-plugin-performance-mamaskind

Performance Plugin: P3

Schließlich betrachtete ich alle installierten Plugins und löschte sehr viele:

  • Favicon-Plugin – das übernimmt mein Theme für mich
  • Jetpack – Google Analytics reicht mir
  • InLinkz
  • WP Gallery Custom Links
  • W3 Total Cache (Ersatz: WP Rocket)
  • FB-Plugin
  • Configurable Tag Cloud
  • WordPress Popular Posts
  • Instagram-Plugin

Zwischendurch checkte ich immer wieder die Ladezeit und die Website-Größe in allen Tools. Pagespeed.de gab mir so Grund zu Freude: Endlich lädt meine Seite unter einer Sekunde!

pagespeed-de-mamaskind

Anderes Tool, andere Messung: pagespeed.de

Bilder verkleinern & ändern

Dass meine Bilder zu groß waren und unkomprimiert sind, wusste ich bereits. Dabei achte ich bereits darauf, dass ich diese mit einer Breite von max. 800 px hochlade, damit diese nicht zu gr0ß werden und runterskaliert werden müssen. Indro empfahl mir das kostenpflichtige Tool WP Rocket, das nicht nur Caching beherrscht, sondern auch LazyLoad: Bilder werden erst dann geladen, wenn sie sichtbar werden. Dazu installierte ich Imagify, ein WordPress-Plugin, das meine Bilder komprimieren, also kleiner machen soll, ohne dass Qualität verloren geht. Allerdings sammelte ich in den 5,5 Blogjahren so viele Bilder an, dass ich auch bei Imagify ein bisschen Geld (ca. 20 €) reinstecken musste. Es lohnt sich.

Mein Hoster empfahl zudem, png-Bilder durch jpg zu ersetzen. Zuvor stellten wir den Blog auf https um und ich nutze nun ein CDN für meinen Blog. Bei einem CDN handelt es sich um ein Content Delivery Network. Meine Bilder und Dateien werden dann nicht vom Blog geladen, sondern aus dem Netzwerk. Das macht meinen Blog ebenfalls schneller.

Werbung

Obwohl im Tool pagespeed.de noch vieles rot leuchtet, hat sich hier schon einiges getan. Die JavaScript-Dateien waren vor der Komprimierung um einiges größer (mehr als doppelt so groß) und die Bilder haben sich um ein Vielfaches verkleinert. Auch bei CSS und HTML gab es Verbesserungen. Jeder kleine Schritt wird belohnt. Der Reiter Website-Daten von pagespeed.de half mir, um die Größe der Dateien im Auge zu behalten.

website-daten-pagespeed-mamaskind

Website-Daten von pagespeed.de

Links statt Popular Posts

Ich hatte zwei Plugins, die mir die beliebtesten Beiträge sowie meine Tags in einer hübschen Liste anzeigten. Diese habe ich gelöscht und durch Links ersetzt. Mir war nicht bewusst, dass ich neben der Blogroll weitere Linklisten erstellen direkt in WordPress erstellen kann. Dadurch habe ich zwei Tools eingespart und feste Links in der Sidebar gesetzt. Generell sollte man alle installierten Plugins hinterfragen: braucht man diese? Wenn nicht weg damit! Es ist stets eine gute Idee, die Plugins von WordPress oder die des Themes zu nutzen.

page-speed-insights-mamaskind

Google PageSpeed Insights: Entwickler sind gefragt, hier komme ich nicht weiter.

Fazit

Meine Ladezeit gefällt mir! Ich habe es tatsächlich geschafft, die Größe von 1,7 MB auf 718 kB runterzudrehen. Ich musste nur unnötige Plugins löschen, andere durch Alternativen ersetzen und meine externen Zugriffe (FB-Like-Box & Instagram-Box) minimieren. Natürlich muss die Seite weiterhin benutzerfreundlich sein. Speziell bei der Instagram-Box überlege ich, ob ich sie wieder einbaue oder ob meine Blogpost-Bilder in der Sidebar und im Footer ausreichend sind. Ich hoffe, das Leser weiterhin auf meine Social Network Symbole aufmerksam werden ohne eine riesige Box zu benutzen. Mit Hilfe eines Entwicklers könnte ich den Blog weiter optimieren, dass auch Google (siehe Screenshot oben) glücklich wird. 66 ist ein eher durchschnittlicher Wert, der aber nichts über die tatsächliche Geschwindigkeit aussagt. Google bemängelt u. a. dass die Bilder noch nicht komprimiert sind, was jedoch Imagify schon erledigt hat.

requests-kilobyte-0-mamaskindMeine Requests erscheinen mir mit 87 sehr hoch. Ich bekomme auch sehr viele leere (?) Dateien angezeigt. Falls jemand weiß, was das ist, darf er sich gerne melden. :)

Werbung

P. S. Wer jetzt den schnellsten Elternblog hat, kann ich nicht mit Sicherheit bestimmt. Die Tools schwanken bei jeder Messung – immerhin handelt es sich um Milisekunden. Mal ist rubbelbatz.de schneller, mal mamaskind.de. Auf jeden Fall hat der kleine Wettstreit Spaß gemacht und ich habe viel dabei gelernt. So liebe ich es: freundlicher Austausch und Hilfsbereitschaft unter Bloggern!

Weitere Blogposts der Serie:

 

Werbung