Sarah Depold
8. April 2016
(Aktualisiert: 12. Januar 2021)
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!
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:
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.
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.
| 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 |
| 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 |
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.
Schließlich betrachtete ich alle installierten Plugins und löschte sehr viele:
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!
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.
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.
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.
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.
Meine 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. 🙂
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:
Eigentlich sollte ich mich nun richtig freuen. Die kritischen 12 Wochen sind vorbei. Die Erschöpfung verschwindet immer mehr, ich werde wieder aktiver. Sogar ein bisschen Haushalt schaffe ich nun. Nicht mehr alles bleibt beim Mann hängen. Doch eine Sache fehlt: ich merke mein Baby noch nicht, jedenfalls nicht bewusst.
Unsere Katzen kamen zu uns, als wir mitten im Studium waren. 2007 - in unserer ersten gemeinsamen Wohnung - wurden wir gefragt, ob wir eine Balinesin und einen Burmesen, beides orientalische Katzen, aufnehmen wollen. Sie waren so süß! Ich überredete meinen (damals noch) Freund, was mir heute noch zur Last gelegt wird: "Du wolltest die […]
Du hast ein schmales Budget und suchst Geschenke, die nichts kosten? Für den kleinen Taler haben wir die unsere top 17 kostenlose Geschenkideen zusammengestellt. Fest steht: Ein bisschen kreativ werden muss du dennoch. Entweder du bastelst ein tolles Geschenk, das von Herzen kommt, schreibst ein paar schöne Zeilen oder du verschenkst einfach Zeit. Zeit mit […]
Hallo Sarah, danke für deinen sehr aufschlussreichen Artikel. Weist du, inwiefern sich der Pagespeed auf das Google-Ranking auswirkt?
Beste Grüße
Daniel
Hi Daniel,
2010 wurde der PageSpeed als Rankingfaktor angegeben.
Quelle:
https://www.sistrix.de/frag-sistrix/onpage-optimierung/pagespeed-ladezeit/
Viel wichtiger finde ich aber die Benutzerfreundlichkeit: man will Leser nicht warten lassen und die Absprungrate minimieren.
Auch beachten: vllt. kann Google viel schneller und mehr crawlen, wenn die Seite schnell lädt? Hier könnte der Vorteil gegenüber langsamen Seiten liegen.
Liebe Grüße
Sarah
Hey,
ertsmal vielen Dank für die schöne Ausarbeitung und die Mini-Competition. Mir hat es auch viel Spaß gemacht.
Ich hoffe, wir konnten damit auch den ein oder anderen motivieren, sich auch mit dem Thema auseinanderzusetzen. Mein Feeling sagt mir auf jeden Fall "JA".
Vielleicht noch ein paar Anregungen:
[quote]vllt. kann Google viel schneller und mehr crawlen, wenn die Seite schnell lädt? Hier könnte der Vorteil gegenüber langsamen Seiten liegen.[/quote]
--> Definitiv ist das der Fall. Das Crawl-Budget ist schließlich limitiert, durch die schiere Masse an Websites, die gecrawlt werden müssen. Daher ist es nur sinnvoll, dass der Zugang zu den Informationen schnell und unkompliziert vollzogen werden kann.
[quote]Weist du, inwiefern sich der Pagespeed auf das Google-Ranking auswirkt?[/quote]
Er hat seinen Platz in der Kausalkette und korelliert direkt mit der Usererfahrung auf deiner Webseite. Erst diese Woche hatte ich ein Meeting mit einem SEO, der auch des öfteren Speaker ist. U.a. war auch der Pagespeed Thema. Auch wenn Pagespeed mittlerweile eine eigene Disziplin geworden ist, kann man festhalten, dass alles unter 2 Sek als in Ordnung gilt. Kurze Ladezeiten machen nur einen geringen Prozentsatz an Ranking-Boosts aus. Hier muss man aber auch immer den Wettbewerb betrachten. Mit Private Blogs und eCommerce verhält es sich wie mit Äpfel und Birnen.
[quote]Ich bekomme auch sehr viele leere (?) Dateien angezeigt. [/quote]
Das scheinen winzige grafische Elemente zu sein. Leere Dateien sind es jedenfalls nicht, sondern nur in der falschen Einheit angegeben.
Ansonsten freue ich mich aktuell erstmal über die Ladezeiten-Verbesserungen unserer Projekte. Im nächsten Schritt heißt es, beobachten, ob sich gesteigerte Visits und Rankings darauf zurückführen lassen.
Das Ende der Fahnenstange ist also noch nicht erreicht!
LG Indro
Interessant! Hab mal getestet, bei Pingdom bin ich bei 376ms und 100/100 - mit einer Onepage-Seite, auf der noch nix wirklich zu sehen ist XD
Hi Sarah,
ist schon echt eine Super Leistung. Bei den Tools die du zum testen genutzt hast würde ich aber noch empfehlen darauf zu achten, dass sie möglichst aus der Region testen aus der auch dein meister Traffic kommt. Gerade Pingdom misst gerne aus Nord Amerika, das verfälscht aber aufgrund der langen Distanz zu deinem Server das Ergebnis.
Darum sollte da Amsterdam als Quelle ausgewählt werden.
Gruß
- Sebastian
Hi Sebastian,
danke für den Tipp, das nehme ich noch auf.
Meine Screenshots entstanden alle mit Amsterdam als Region. 🙂
Liebe Grüße
Sarah
Wahnsinn - was für eine Arbeit, die sich aber offenkundig doch sehr lohnt, danke für den aufschlussreichen Artikel. Mir hat bisher davor gegraut 🙁
Aber ich denke, ich werde das auch mal in Angriff nehmen.
Was ich nicht ganz verstanden habe, wie funktioniert das genau, was du oben beschrieben hast mit "nutze nun ein CDN für meinen Blog"? Vielleicht eine Idee für deinen nächsten Post? 🙂
Und die Sache mit den "beliebtesten Beiträgen":
die gibst du jetzt nur als statische Links aus, also ohne Plugin?
D.h. "händisch" suchst du dir die beliebtesten aus Google Analytics raus und pflegst sie als Link in die Sidebar oder wie machst du das genau?
Hi Birgit,
ich habe ein Managed WordPress Blog. D. h. ich bezahle mehr Geld, bekomme aber auch Unterstützung. Im Falle des CDN habe ich dem Hoster Bescheid gesagt: Macht mal das CDN an und ich musste nur im WP Rocket den Pfad angeben. Mehr habe ich nicht gemacht. Wie es mit anderen Systemen funktioniert, kann ich leider nicht sagen. Aber schau dir dazu gerne Cloudflare an.
@Beliebteste Beiträge
Damit meine ich nur die in meiner rechten Sidebar. Diese sind nun händisch hinterlegt und werde ich bei Bedarf anpassen.
Die ähnlichen Beiträge unter jedem Beitrag stellt WordPress selbst zusammen, die Funktion wird vom Theme mitgeliefert.
Genau: Google Analytics dient dann als Datenquelle.
Viel Erfolg beim Umsetzen! 🙂
Liebe Grüße
Sarah
Danke für tipps, Sarah!
Ich benutze Shortpixel, wenn ich die größe und meine bilder zu optimieren. Ich habe bessere ergebnisse als Imagify.
Hi Frank,
danke für den Hinweis.
Ich bin nicht darauf eingegangen, weil ich mich damit nicht auskenne.
Es ist ein reiner Erfahrungsbericht. 🙂
Liebe grüße
Sarah
Hallo, Frank !
Überprüfen sie, was ShortPixel kann https://shortpixel.com/image-compression-test/site/http://www.2bms.de/ für ihre website tun. Ich bekomme immer bessere ergebnisse mit.
Hallo Sarah,
vielen Dank für diesen informativen Beitrag! Er kam gerade zur rechten Zeit, da meine Webseite aufgrund einer Themeumstellung hinsichtlich der Pagespeed gerade in die Knie geht. Ich arbeite daran...
Einige Deiner empfohlenen Maßnahmen habe ich bereits selbst angewendet und konnte schon Verbesserungen erzielen. An einer Stelle würde ich gerne nachhaken, was Imagify anbelangt. Inwieweit ist es notwendig, vor oder nach der Optimierung noch Plugins wie Regenerate Thumbnails zu nutzen, wenn sich die Image Dimensions bei einem Themenwechsel geändert haben? Bzw. welches Vorgehen würdest Du empfehlen?
Vielen Dank und liebe Grüße,
Heike
Etwas verspätet, vielleicht deshalb weil ich nicht unbedingt zu den Lesern von Elternblogs gehöre. Das hat was damit zu tun, dass beide > 30 sind 😀
Webseiten beschleunigen finde ich cool, ist sowas wie ein (extremes!) Hobby von mir.
Die "leeren Dateien" sind Inline Bilder, mit Base64 verschlüsselt, die letztendlich NIX anzeigen. Die dienen als Platzhalter für Lazy Load und werden später durch die "richtigen" Bilder ersetzt. Wenn eben in den Bereich mit den Bildern gescrollt wird.
Bei größeren Bildern ist JPG, meistens, etwas kleiner als PNG. (Auch wenn PNG optimiert wird. Das geht ja mit JPG auch 😉
LG
Waelti
Hi Waelti,
danke für deine Hilfe!
Dann haben sie also ihre Daseinsberechtigung. 🙂
P.S. Über 30 ist heutzutage ein normales Alter für die Elternschaft, auch wenn ich da noch nicht mitreden kann. 😀
[…] Teil 8: PageSpeed-Optimierung […]
Hast du auch irgend ein messbaren Nutzen aus deiner Optimierung gezogen?
Geringe Absprungrate innerhalb der ersten 10 Sekunden zum Beispiel? Das wäre nämlich nochmal richtig interessant gewesen. Wir haben selbst das Problem, das unsere Blogs ab und zu sehr hohe Ladezeiten aufweisen, aber solang unsere Absprungraten grad mal bei 3% liegen, denk ich gar nicht mehr daran, meine Energie in Page-Speed-Optimierung zu stecken.
Liebe Grüße aus Berlin
Mathias Will
Hallo,
Schnelleres Laden ist doch schon mal was. Was es sonst bringt, kann ich nicht messen, da es zu viele Faktoren gibt.
Wenn deine Absprungrate 3% ist, ist entweder dein Trackingcode doppelt enthalten, du misst anders (erst ab gewissen Sekunden) o.ä.
Es ist nicht möglich, dass mit herkömmlichen Tracking 3% mit einem Blog erreicht werden.
Meine Absprungrate liegt bei 80%.
Viele Grüße
Sarah
Richtig!
Ich messe die Nutzer die innerhalb von 10 Sekunden den Blog verlassen.
Bei uns war die Absprungrate auch immer bei 80%, aber der Wert bringt einem Blogbetreiber nicht viel. Fans lesen eh immer nur den neuen Artikel und neue Nutzer kommen über Google, Facebook oder sonstige Quellen und interessiert auch nur ein Thema. Also Tracke ich wer innerhalb von 10 Sekunden den Blog verlässt um Unterseiten zu finden, die innerhalb der ersten 10 Sekunden nicht ansprechend wirken. Nur so bringt uns Blogbetreiber die Absprungrate auch etwas.
Würde meine Absprungrate nun deutlich steigen, weiß ich das irgendetwas nicht mit meiner Seite innerhalb der ersten 10 Sekunden nicht stimmt. z.B. Page Speed 🙂
Die normal gemessene Absprungrate ist für Shopbetreiber interessant. Wenn man als Shop 80% hat, sollte man sich starke sorgen machen.
Das ganze mache ich über Google Tag Manager.
Liebe Grüße
Mathias
Sehr gut! 🙂
Hallo Sarah,
deine SEO-Reihe ist wirklich top! Ich konnte mir schon sehr viele Tips und Tricks rauslesen und umsetzen.
Ich habe mal eine spezielle Frage zu Imagify:
Du sagst, du hast 20€ investiert. Gucke ich mir die Pricing-Tabelle an, handelt es sich hierbei um den 3 GB "Einmal-Plan". Du hast also die 3 GB für deine bisherigen Bilder genutzt und der Rest wird mit die kommenden Bildern verrechnet? Oder hast du zudem noch einen monatlichen Betrag X?
Beste Grüße,
Max
Hi Max,
Danke dir!
Uff, das ist lange her. 🙂 Ich habe auf jeden Fall keinen laufenden Plan, daher gehe ich von der ersten Variante aus.
Es kann natürlich sein, dass das Pricing verändert wurde. Aber ich meine mich zu erinnern, dass ich für die alten Bilder bezahlte, ob der Masse, und der Rest Inn free-Plan enthalten ist?
Liebe Grüße
Sarah
[…] Teil 8: PageSpeed-Optimierung […]