Bloggen und Technik

Geschwindigkeit des Blogs optimieren

Pagespeed optimieren mit Pingdom

Wir haben vor ein paar Wochen den Speed unseres Blogs mächtig erhöhen können. Dabei hat uns das kostenlose Analysetool Pingdom sehr geholfen. 

In verschiedenen Gesprächen, in diversen Facebook-Guppen, wurde danach mehrfach der Wunsch an uns heran getragen, einen Beitrag über unsere Maßnahmen zu schreiben. Das möchten wir nun machen und zeigen, wie man in Pingdom die Bremsen beim Seitenaufbau erkennen kann. Im Zuge der Diskussionen haben wir uns die Speedwerte einiger Seiten ansehen können. Dabei sind uns oft die gleichen Ursachen aufgefallen, die auf vielen Seiten die Ladezeiten in den Keller ziehen. Auch diese fassen wir in diesem Artikel mal zusammen.

Warum soll die Ladezeit eigentlich optimiert werden?

Im Grund gibt es zwei Gründe, die für eine Optimierung der Ladezeit des eigenen Blogs spricht:

Kurze Ladezeiten erfreuen Eure Leser!

Eure Leser werden es dankbar zur Kenntnis nehmen, wenn die Seite schnell geladen und angezeigt wird. Keiner will ernsthaft 10 Sekunden oder länger warten, bis die Seite angezeigt wird. Da nützen auch keine lustigen Wartebildchen was, die man vereinzelt auf verschieden Seiten sieht. Da drehen sich Kreise oder andere Symbole lustig im Kreis rum, Ladebalken wandern über den Bildschirm oder es passiert einfach lange nichts, gar nichts.

Das will kein Besucher sehen und viele verlassen die Seite nach 2-3 Sekunden warten. Es ist belegt, dass die Schmerzgrenze schnell erreicht ist und die Besucher flüchten. Zusätzlich muss bedacht werden, dass viele Besucher eben nicht über eine Powerleitung ins Netz verfügen oder mit ihrem mobilen Geräten ein begrenztes Datenvolumen besitzen. Wo eine Seite mit einer schnellen DSL-Leitung schon 10 Sekunden lädt, dauert es mit einer ISDN- oder UMTS-Verbindung noch um einiges länger.

Daher sollte neben dem Speed auch die Seitengröße im Auge behalten werden. Natürlich, die Zeit wo eine komplette Webseite 200 Kilobyte groß war, die ist vorbei. Aber 10 Megabyte müssen es auch nicht zwingend sein, selbst auf fotolastigen Seiten, wie unsere eine ist.

Pagespeed ist ein Ranking Faktor bei Google

Google nutzt zum festlegen des Rankings über 200 Faktoren, die bei der Bewertung einer Seite eine Rolle spielen. Ein Bereich davon ist die Usability der Seite, wozu auch der Pagespeed gehört. Wir stark das wirklich bewertet wird, weiß wenn überhaupt nur Google selber. Aber, einige Seitenbetreiber haben unseren Eindruck bestätigt, dass ein paar Tage nach einer Speedoptimierung die Zugriffe auf die Webseite über Google spürbar angestiegen sind. 

Natürlich bring es nichts, wenn die Inhalte der Seite wegen anderer Mängel (schlechter Content, schlechte Keywords usw.) gar nicht erst im Ranking sind. Da bringt auch die beste Speedoptimierung nichts. Die Grundlagen des Blogs sollten schon stimmen. Und die Optimierung der Ladezeit sollte nach dem Erstellen von guten Content nur eine „Nebenrolle“ spielen und einen zusätzlichen Effekt bringen.

Wir wollen keine crackmäßige Maximaloptimierung, sondern einfach nur eine schnelle Webseite

Wir möchten noch darauf hinweisen, dass alle nachfolgenden Tipps und Einschätzungen unserer persönliche Meinung als ganz normale Blogger darstellen. Einige Technik-Freaks werden vielleicht die Hände über dem Kopf zusammen schlagen. Für uns steht einfach die gute Erreichbarkeit unserer Seite, gepaart mit einer noch lesbaren Seite – die auch noch ansprechend aussieht – im Vordergrund. Wir wollen keine Preise für die beste Optimierung auf 100% in allen Ebenen bekommen.

Pingdom oder Google Page Speed?

Häufig haben wir in den letzten Tagen gelesen, dass versucht wurde den Speed seiner Webseite mit Google Page Speed zu optimieren. Das ist, unserer bescheidenen Meinung nach, der völlig falsche Weg. Google Page Speed beurteilt und misst nicht die Geschwindigkeit einer Webseite.

Es zeigt Verbesserungspotential an und bewertet die Umsetzung mit Prozenten/Punkten. So kann es vorkommen, dass eine Seite bei Google Page Speed hervorragend bewertet ist aber grottenlangsam ist oder umgekehrt rasend schnell lädt und trotzdem keine guten Werte bei Google Page Speed bekommt. Das ist übrigens bei uns hier der Fall. Da werden wir auch noch dran arbeiten aber nicht verbissen. Der eigentliche, echte Speed der Seite ist uns wichtiger.

Mehr über den Sinn von Google Page Speed hat Ernesto Ruge auf seinem Blog binary-butterfly sehr informativ und lesenswert zusammengefasst.

Pingdom dagegen misst wirklich die echte Ladezeit einer Seite und gibt einem viele Informationen darüber, wo man ansetzen kann um die Ladezeit zu minimieren.

Pingdom – Einstellungen und Ergebnisse

Pingdom findet Ihr im Netz unter der folgenden Adresse: https://tools.pingdom.com Nach dem Start der Seite, sehr ihr oben den Bereich zur Eingabe der URL und könnt den Testserver auswählen.

Test bei Pingdom starten

Pingdom Startmaske

Wichtig ist es, hier einen Testserver in Europa auszuwählen. Im Moment steht dafür nur ein Server in Stockholm zur Verfügung. Ein Test über einen US-Server wird immer langsamer sein und liefert Euch keine passenden Werte um die wirkliche Geschwindigkeit zu beurteilen.

Zusammenfassung der Ergebnisse

Nachdem ihr auf Start Test geklickt habt, startet der Speed Test für die eingegebene URL. Die Ergebnisse werden Euch nach Ablauf des Tests im oberen Bereich als Zusammenfassung angezeigt. Startet diesen Test ruhig 2-3 mal hintereinander. Gerade beim ersten Lauf kann es passieren, dass eine nicht gecachte Seite erwischt wird und die Werte schlechter sind. Ab dem 2. Durchlauf sollten diese dann aber halbwegs stabil sein. Sollten die Ergebnisse bei vielen Durchläufen immer sehr stark schwanken, dann habt ihr schone in erstes Problem entdeckt.

Pingdom Speed Test - Ergebnis

Was bedeuten nun die einzelnen Werte?

Performance Grade: Das ist eine Bewertung, ähnlich wie bei Google Page Speed, wo alle möglichen Parameter in Notenform bewertet werden. Über die wirkliche Geschwindigkeit sagt dieser Wert nichts aus!

Load Time: Das ist der wirklich gemessene Wert, die Ladezeit Eurer Seite. Diesen solltet Ihr auch bei den weiteren Optimierungen im Auge haben. Bei uns lag der Wert, vor der Optimierung, bei ca. 1,8 Sekunden. Ab zwei Sekunden, so sagt man, lächelt Google immerhin schon wohlwollend. Richtig erfreut ist Google aber wohl erst bei Werten unter einer Sekunde. In wie weit diese Werte jetzt stimmen, das lassen wir mal dahingestellt. Fakt ist auf jeden Fall, je schneller, desto besser.

Faster than: Das ist ein total unwichtiger Wert, eine Art Längenvergleich unter Webmastern. Oder seht es als virtuellen Schulterklopfer.

Page Size: Das ist die Menge an Daten, die geladen werden um Eure Seite darzustellen. Diesen sollte man so niedrig wie möglich halten ohne dabei die Optik seines Blogs zu zerstören. Wir könnten diesen Wert mit Sicherheit noch reduzieren. Aber als Blog mit einem Schwerpunkt auf Fotos werden wir niemals die Seitengröße eines reinen textbasierten Blogs erreichen. Versucht aber mit diesem Wert in vernünftigen Bereichen zu bleiben. 10 MB sind definitiv zu groß, von mehr wollen wir gar nicht reden. Fakt ist, jedes gesammelte MB will geladen werde und wirkt sich somit direkt auf die Load Time aus.

Requests: Hm, einfach erklärt: Wie viele „Puzzleteile“ müssen geladen werden, damit die Seite am Ende komplett dargestellt wird. Bei unserer Startseite setzt sich das aus 60 Bildern (Fotoblog halt), 8 Scripten, 3 CSS-Dateien, 1 HTML-Datei und 4 sonstigen Elementen zusammen, das ergibt dann den Wert 76. Wir wissen gar nicht, wo da ein idealer Wert liegen würde, ob es überhaupt einen gibt. Je niedriger der Wert ist, desto weniger Datenanfragen müssen gestellt werden und umso weniger Daten müssen übertragen werden. Allerdings haben wir auch festgestellt, dass ein einzelner Request die komplette Leistung in den Keller ziehen kann, wogegen 10 andere Puzzleteile die Ladezeit überhaupt nicht verändert haben. Da kommen wir aber noch drauf zu sprechen.

Perfomance Insights

Performance TippsIm nächsten Abschnitt findet ihr die einzelnen Bereiche, woraus sich der Performance Grade aus der Zusammenfassung errechnet. 

Wenn hier alles grün ist, so erfreut euch an dem Anblick. Sollten dabei die Werte trotz grüner Anzeige nicht auf 100% stehen, so lohnt sich ein Klick auf den Pfeil rechts. In dem Slide-Down werden euch die Dinge angezeigt, die noch nicht optimal in diesem Bewertungsbereich sind. 

In dem Beispiel hier im Screenshot sieht man, dass da noch Kleinigkeiten angemeckert werden. Nur, diese „Schwachstellen“ zu beseitigen ist nicht ganz trivial und solange die Gesamtbewertung stimmt und der Speed auch noch schnell ist, ist es auch gar nicht unser Bestreben an dieser Stelle überall die 100% zu erreichen.

Sollten bei Euch Teile dieser Auswertung orange oder rot angezeigt werden, dann sollte doch über eine Optimierung der einzelnen Punkte nachgedacht werden. Viele Dinge sind dabei aber einfach mit wenigen Klicks im hoffentlich vorhandenen Caching-Plugin zu beseitigen.

Response Codes

Response Codes

In diesem Bereich werden euch ggf. Fehlermeldungen angezeigt, wenn einzelne Puzzleteile der Seite nicht erreichbar sind. 

Informationen zum Content Type

Content Type

In diesem Bereich bekommt ihr Informationen über die Größe und die Anzahl der einzelnen Inhaltstypen, die auf Eurer Webseite geladen werden. Bei uns sind natürlich Bilder ein wesentlicher Bestandteil der Seite, sowohl was die Datenmange angeht als auch bei der Anzahl.

Diese Anzeige ist sicherlich interessant um mal einen Einblick zu bekommen, welche Datenmangen von welchen Modularten geladen werden. Viel interessanter ist aber der nächste Abschnitt.

Informationen zum Content by Domains

Content by Domains

In dieser Ansicht könnt ihr sehen, von welchen Domains beim Aufbau Eurer Seite Daten geladen werden. Ganz oben in den Listen sollte natürlich eure eigene Domain stehen. Bei uns tauchen dann noch externe Domains auf, von denen z.B. Schriften geladen werden oder Daten für die Statistik übertragen werden.

Diese externen Domainzugriffe sollten so weit wie möglich minimiert werden, denn die fressen Ladezeit. Gerade das Laden von irgendwelchen Boxen oder Bannern dauert oft viel zu lange und kann nicht wirklich optimiert werden.

Ein paar Dinge, wie zum Beispiel die Einbindung von Analysetools wie Google Analytics oder Piwik sind nunmal wichtig. Natürlich kann man diese Scripte, ebenso wie Schriftarten, auch auf dem eigenen Server zur Verfügung stellen. Nur stellt sich dann die Frage, wie weit will man bei der Optimierung gehen? Welchen Aufwand will man betreiben. So könnte man z.B. die Javascript-Datei von Google Analytics auf den eigenen Webserver legen, das ist schnell gemacht und es müsste nur ein Pfad im Trackingcode geändert werden. Nur, das Script wird ja gelegentlich mal aktualisiert. Wenn dann das aktuelle Script nicht auf dem eigenen Server liegt, funktioniert vielleicht die Statistik nicht mehr.

Daher gilt es hier einen Kompromiss zu finden, zwischen Aufwand für die Optimierung und Nutzen. Und nur so nebenbei, die zwei Fonts und das bisschen Statistik sind das kleinste Problem. Andere externe Dienste versauen einem viel mehr den Pagespeed. Dazu aber später mehr.

Der Wassefall in Pingdom

Pingdom WasserfallDie oben genannten Bereiche in der Auswertung sind alle nett um sich einen Überblick zu verschaffen. Richtig wertvoll ist aber der sogenannte Wasserfall, der nun auf der Seite folgt.

Hier könnt ihr genau sehen, welches Puzzleteil (Request) wann geladen wird und wie lange das Laden dauert. Mit Hilfe dieser Ansicht lassen sich Geschindigkeitsbremser am besten erkennen.

Kurze Regel: Je länger ein Balken ist, desto böse!

Dummerweise sind die Balken oft verzerrt, wenn ein extrem langer Balken im Spiel ist. Ist dieser dann beseitigt, erscheinen 5 neue lange Balken. Da müsst Ihr durch!

Neben den Ladezeiten werden Euch die Dateigrößen angezeigt und unter dem Namen des Elements noch die Quelle als Pfad auf eurem Blog oder eine externe Domain.

Aus all diesen Einzelwerten, bzw. Puzzleteilen, werden die oben beschriebenen Gesamtwerte errechnet. Wenn ihr also die Gesamtbewertung, die Gesamtladezeit oder die Anzahl der Requests reduzieren wollt, so könnt ihr in dem Wasserfall nachschauen, wo es sich lohnt anzusetzen.

Nicht nur die Startseite testen!

Bevor wir uns nun die verschiedenen Fehlerquellen anschauen, noch einen wichtigen Tipp. Testet während der Analyse und der Optimierung nicht nur Eure Startseite vom Blog. Eine Fehlerquellen sind da oft gar nicht zu sehen. Testet stichprobenartig auch mal ein paar Beitragsseiten oder statische Seiten. Oft tauchen da noch ganz andere Probleme auf, die auf der Startseite gar nicht bemerkt werden (Kommentarfunktion, Sharing, Autorenbox usw.).

Häufige Geschwindigkeitsbremsen

Neben den Optimierungen in den letzten Wochen haben wir uns zahlreiche Speedwerte von anderen Blogs angeschaut. Das waren meistens Reiseblogs, wobei das eigentlich nichts zur Sache tut. Die üblichen Bremsklötze sind über verschiedene Blogsparte vermutlich sehr ähnlich. 

An dieser Stelle ist ein Satz sehr wichtig:

Speedoptimierung auf dem Blog kann sehr schmerzhaft sein!

Nachfolgend blenden wir einzelne schlimme Werte von anderen Blogs ein, als Beispiel. Diese sind natürlich anonym, wir möchten hier niemanden bloß stellen. Ein Angebot zur Analyse von uns, folgt noch am Ende des Beitrags.

Langsamer Server oder fehlerhaftes / kein Caching

Einen langsamen Server, ein fehlerhaftes oder nicht vorhandenes Caching erkennt man meist am ersten geladenen Balken im Wasserfall, also die Zeile, wo vorne einfach Eure URL steht. Wenn diese länger als 0,2-0,5 Sekunden ist, dann besteht da Verbesserungsbedarf.

Bevor Ihr aber nun fluchtartig den Provider wechselt, schaut erstmal nach einem vernünftigen Caching.

Beim Caching werden die Seiten nicht mehr als einzelne Bausteine ausgeliefert, sondern vorgefertigt als fertige Seiten, eben aus dem Cachespeicher (Das war jetzt gaaaanz einfach erklärt). Dabei entfällt das Zusammensammeln der einzelnen Puzzleteile und dieser erste Ladevorgang geht deutlich schneller. Erst wenn ein gutes Caching keine deutliche Besserung bringt, solltet Ihr das Problem beim Server suchen.

Was ist denn ein gutes Cache-Plugin? Auch diese Frage erreichte uns in den letzten Tagen öfters. 

Wir haben in den letzten Monaten einige ausprobiert. Am Ende sind wir bei WP-Rocket hängen geblieben. Das macht vom ersten Moment an, was es tun soll, die Seite klein und schnell. Selbst mit den Standardeinstellungen nach der Installation war unsere Seite bereits deutlich schneller. Wenn man die Einstellungen noch ein wenig verfeinern und optimieren will, ist die Konfiguration schlank und übersichtlich. Nachteil von WP-Rocket, es kostet Geld. Nur, wir sind der Meinung, gute Arbeit muss auch honoriert werde und wir haben bis heute keinen Cent für das Plugin bereut.

Andere Caching Plugins müssen aber nicht schlechter sein. Bei uns haben diese aber zum Teil zu merkwürdigen Phänomenen auf dem Blog gesorgt, waren  uns zu kompliziert oder haben einfach keine Speedverbesserung gebracht. 

Zum Thema Caching und die verschiedenen Techniken könnte man wohl ganze Blogs füllen. Gerade eben ist dazu aber ein toller Artikel bei Ernesto auf seinem Blog Binary Butterfly erschienen, wo das Ganze wirklich sehr gut erklärt wird. Ja, wir verlinken immer wieder mal Richtung Ernesto – er ist absoluter Profi und kann trotzdem für Einsteiger erklären – also hat er es auch verdient. Wer also ein wenig mehr rund um das Thema Caching lernen will, ist dort gut aufgehoben.

Schlecht programmierte Themes

Ein weiteres Manko sind oft schlecht programmierte Themes. Dabei meinen wir schlecht in Bezug auf unnötigen Krempel, die diese Themes mitbringen. Da werden oft zahlreiche Funktionen integriert um alle möglichen Dinge zu erledigen oder darstellen zu können. Dumm ist es in dem Moment, wenn man diese Funktionen gar nicht benötigt und sie nicht deaktiviert werden können. 

Gute Themes haben auch viele Funktionen. Nur werden diese entweder als zusätzliche Plugins angeboten oder man kann sie deaktivieren, wenn sie nicht benötigt werden.

Plugins als Bremsklotz

Ein häufiger Bremsklotz bei Blogs sind schlecht programmierte Plugins. 

Wir möchten dabei auch mal mit dem weit verbreiteten Vorurteil aufräumen, dass viele Plugins eine Installation automatisch langsamer machen. Das stimmt so pauschal nicht! Ein einziges Plugin kann die Performance massiv in den Keller ziehen. Viele Plugins in Summe müssen das nicht unbedingt machen.

Ihr lest übrigens gerade auf einem Blog, wo sage und schreibe 43 Plugins aktiv sind. Trotzdem haben wir tolle Ladezeiten. Dies aber erst nach dem gnadenlosen Aussortieren der „falschen“ Plugins. Diese heraus zu filtern war ein wenig aufwändig. 

Wir haben dazu einfach alle Plugins deaktiviert und dann den Speedtest gestartet. Danach haben wir ein Plugin wieder aktiviert und wieder den Speed gemessen und auch die Anzahl der Requests und die Seitengröße im Auge gehabt. Das haben wir dann für jedes Plugin einzeln wiederholt. So hatten wir am Ende 3 Plugins identifiziert, die sich extrem negativ auf die Ladezeit ausgewirkt haben. 

Dummerweise waren das drei Plugsins, die wir eigentlich sehr ins Herz geschlossen hatten. Trotzdem sind diese dann runter geflogen, 2 Ersatzlos und eines wurde durch ein performanteres Plugin eines anderen Anbieters ersetzt. Das sind wir wieder bei dem Punkt, dass eine Optimierung schmerzhaft sein kann.

Ganz besonders negativ waren zwei Plugins, welche die admin-ajax.php beim Seitenaufbau geladen haben. Diese Datei lässt sich nicht cachen und hat die Ladezeit um eine gute halbe Sekunde in den Keller gezogen.

Viele Plugins laden auch andere Scripte von externen Quellen nach. Auch diese könnt ihr im Wasserfall identifizieren und dann nachschauen, ob ihr die damit verbunden Funktionen benötigt oder diese ggf. in den Themeeinstellungen deaktivieren könnt.

Wenn wir jetzt neue Plugins installieren, dann testen wir vor und nach der Installation die Seitengeschwindigkeit. Sollte die sich negativ verändern, fliegt das Plugin direkt wieder runter.

Ein Hinweis aber noch: Viele Plugins sind nicht unbedingt ein Problem bei der Seitengeschwindigkeit. Aber, jedes installierte Plugin ist primär mal ein Sicherheitsrisiko für den Blog. Das sollten sich auch Spielkinder, wie wir es sind, immer vor Augen halten und abwägen, ob man bereit ist das Risiko einzugehen.

Facebook-Like-Boxen

Sehr häufig sind uns auf verschiedenen Blogs diese Facebook-Like-Boxen in den Sidebars oder im Footer aufgefallen. Mal abgesehen davon, dass die aus Datenschutzgründen als bedenklich anzusehen sind, ziehen sie auch die Ladezeit wunderbar in den Keller.

Facebook Widget

12 Elemente werden in diesem Beispiel von Facebook geladen um diese Like-Box anzuzeigen. Jedes einzelne davon benötigt zwischen 0,2 und 0,8 Sekunden. Und vom Start des ersten Element bis zum Ende der Skala verstreicht eine Gesamtzeit von 1,7 Sekunden. Diese Zeit ist euer Blog langsamer. Oben hatten wir geschrieben, dass 2 Sekunden das Mindeste ist, was man sich als Ladezeit setzen sollte. Die sind somit, nur durch die Facebook Like Box, schon fast aufgebraucht.

Schmeisst das Teil vom Blog. Setzt irgendwo ein paar Links zu Euren Social Media Profilen, die der Besucher anklicken kann, wenn er euch folgen will. 

Und jetzt bitte nicht sagen, die Box bringt mir doch sooo viele Likes. Das glauben wir nicht, Punkt. Die meisten Blogs, wo wir die Boxen sehen haben weniger Likes wie wir, und wir haben diese Box noch nie im Einsatz gehabt.

Instagram Bilder eingebettet

Total gerne werden auch die aktuellen Bilder aus dem eigenen Instagram Profil in einem Banner oder einem Widge eingeblendet. Das ist genau so eine Geschwindigkeitsbremse, wie diese Facebook Box. Auch bei der Instagrameinbindung bremst jedes einzelne Bild die Ladezeit Eures schönen Blogs aus.

Warum macht ihr nicht schnell eine Collage Eurer letzten oder besonders schönen Bilder bei Instagram, ladet diese eine Datei auf Euren Blog und setzt dann einfach den Link zu Eurem Instagram Profil dadrauf? Ok, macht mehr Arbeit, aber die Ladezeit wird es euch danken.

Pinterest Box

Hier gilt das Gleiche wir für die Facebook- oder die Instagram-Einbindung. Muss man das Teil haben? Bringt es was, dass im Blog einzubetten? Wir haben uns, bei all diesen Elementen, klar für ein Nein entschieden.

Bild an WP ausgelagert

Jetpack bietet eine Funktion namens Photon an, mit der man Bilder bei WordPress auf deren Server spiegeln kann, so dass sie von dort geladen werden. Das soll einen Performacegewinn bringen, sagt WordPress. Schmarrn! Das einzig vorteilhafte dabei ist, dass die Daten parallel von mehreren Quellen geladen werden, dass kann Sinn machen, wenn denn der andere Server schnell ist und in Europa steht. Das nennt sich dann CDN, würde aber den Rahmen hier sprengen. Schauen wir doch lieber mal, was mit einem einfach Bild passiert, wenn es von WP geladen wird.

Bild bei WP gespeichert

In diesem Beispiel beträgt die Ladezeit, für ein 67,7 kB großes Bild, sage und schreibe 1,38 Sekunden!!!einself!! Wow.

Ihr erkennt die von extern geladenen Bilder an der Adresszeile unter dem Bildnamen, die mit i0, i1, i2 usw. anfängt.

Schaltet diese Funktion ab, lasst die Bilder bei Euch im Webspace liegen und erfreut euch an kurzen Ladezeiten.

Sonstige Banner oder Widgets 

Ein weitere große Bremse sind viele Widgets bzw. Banner, die Inhalte von externen Quellen laden. Besonders die nachfolgenden sind uns immer ins Auge gefallen:

  • Travelbook oder andere Banner aus diesem Hause (im Waterfall an der Domain widgets.boomads zu erkennen). Da haben wir Ladezeiten bis zu 1,irgendwas Sekunden gesehen, offensichtlich ganz nach Auslastung des boomads-Servers.
  • Amazon Widgets
  • Bloglovin Widgets
  • Newslettersysteme (vor allem so manches Mailchimp-Plugin)
  • usw.

Ihr seht, das sind alles Widgets, die Inhalte von ihren eigenen Servern nachladen.

Der einfachste Weg, das zu optimieren ist es, die Logos als Datei auf den eigenen Webspace hochzuladen und dann einfach den Link manuell drauf zu setzen. Bei Amazon und Bloglovin ist das z.B. problemlos machbar. Und ja, bei Amazon geht das auch als Affiliate Link. 

Travelbook stellt sich da wohl immer noch quer, die bestehen auf ihren Code. Das ist einer der Gründe, warum wir da nicht mitspielen. 

Gravatar Bilder

Wir mögen sie alle, die Gravatar Bildchen bei den Kommentaren. So bekommen die Besucher ein Gesicht und die Kommentarbereiche gleichen keinen Textwüsten mehr. Dummerweise werden die Gravatare bei jedem Laden der Seite neu von dem Dienst geladen und können nicht vom Cache gespeichert werden.

Abhilfe schafft hier ein kleines Plugin mit dem Namen Harrys Gravatar Cache, welches die Avatare auf euren Server kopiert und diese dann von dort geladen werden. Der Vorteil ist nicht nur das die Ladezeit geringer wird, die Bilder werden auch vom Browsercache mit abgedeckt, was zusätzliche Pluspunkte gibt. In dem Plugin könnt ihr auch einstellen, wie groß die Avatare gespeichert werden solle und wie lange die im Speicher bleiben, bevor sie aktualisiert werden.

Anzahl der angezeigten Kommentare

Viele Kommentare sind toll, das Ziel eines jeden Bloggers. Und wenn viele Kommentare zu einem Artikel gegeben werden, umso besser. Aber, viele Kommentare bedeutet auch viele Gravatar-Bildchen, egal ob mit oder ohne Nutzung des Caches, und somit viele Requests. In den Einstellungen zu den Kommentaren kann ein Umbruch eingestellt werden. Dann werden nur noch 20-25 Kommentare auf einmal angezeigt werden und die weiteren können über eine Pagnation im Kommentarbereich angezeigt werden, wenn Euer Theme das unterstützt (was in der Regel der Fall sein sollte). Wir selber konnten damit Beiträge mit vielen Kommentaren 0,5 Sekunden schneller machen.

Bilder

Eine weitere große Geschwindigkeitsbremse sind zu große Bilder.

Hier jetzt einen Richtwert zu geben, wie groß ein Bild maximal sein darf, bezogen auf die Dateigröße, ist nicht einfach. 

Sagen wir es mal so, eine Bilddatei mit 2, 3 oder noch mehr Megabyte Größe ist definitiv zu groß. Wir selber empfinden inzwischen eine Maximalgröße von 200 kB als angemessen. Jetzt sind wir aber auch ein Fotoblog und haben gerne die Exif-Daten in die Bilder eingebettet und arbeiten auch gerne mit größeren Auflösungen zum Nachladen auf großen Monitoren.

Wir exportieren die Bilder für unseren Blog meistens aus Lightroom. Dabei wählen wir jpg als Dateiformat und setzen die Qualität auf 60%. Damit kommen wir meistens auf Dateigrößen von 150-220 kB. Für die Darstellung im Web reicht das völlig aus. Andere Stimmen sagen, nicht zu unrecht, dass 100 kB für ein Bild im Netz völlig ausreichend sind.

Bilder, die in Widgets auftauchen, besonders wenn sie auf jeder Seite auftauchen, versuchen wir auf eine Größe von ca. 20 kB zu bekommen.

Trotzdem würden wir unsere Bilder gerne noch weiter optimieren. Das scheitert im Moment aber an über 5000 Bilddateien auf dem Server (der Fluch des Fotoblogs) und den damit verbundenen Kosten, wenn das durch einen Servicedienst geschehen soll. Ein manuelles optimieren und neu hochladen kommt für uns nicht in Frage, das sind einfach viel zu viel Fotos.

Ein weiterer Grund spricht zusätzlich gegen eine Optimierung der vorhandenen Bilder. Malte Landwehr hat dazu ein Experiment gestartet und festgestellt, dass nach dem Reduzieren der Dateigrößen die Rankings in Google verloren gegangen sind. Da die optimierten Bilder von Google als neue Dateien betrachtet werden, ist das Risiko groß, seine Rankings in der Google Bildersuche zu verlieren.

Neue Bilder werden wir zukünftig auf jeden Fall kleiner machen, wir haben da die 100 kB Marke im Auge – schaun mer mal.

Optimierung durchführen

Wie soll so eine Optimierung nun ablaufen? Ich beschreibe das mal, wie wir das gemacht haben.

  • Suche eines guten Caching-Plugins
  • Aktivieren des Caching
  • Speedtest
  • Lokalisierung der „Bremsen“ mit Hilfe von Pingdom
  • Plugins alle deaktivieren
  • Ein Plugin nach dem anderen wieder aktivieren und nach jeden einmal den Speedtest laufen lassen
  • Schmerzhaftes Trennen von „bösen“ Plugins
  • Ersatz durch neue Plugins mit besserer Performance (testen)
  • Den Nutzen von Bremsen wie Facebook Box, Instagram, Pinterest Box usw. zumindest mal überdenken.
  • Optimierung der Bilder in Widgets und im Header
  • Vorschläge aus dem Bereich Perfomance Insights von Pingdom umgesetzt. (Scripts im Footer laden lassen, Browsercaching, Komprimierung der CSS und JS Dateien, usw – alles über WP-Rocket machbar)
  • Jetzt kann ein Blick auf die Google Page Speed Messung geworfen werden – und sich wundern, dass da immer noch bescheidene Werte erscheinen.
  • Überlegen, ob einige der Vorschläge von Google Page Speed noch umgesetzt werden können (Aufwand/Nutzen).

Am Ende hört sich das jetzt wahnsinnig aufwändig an. Wirklich intensiv haben wir da nur zwei Abende dran gesessen. 

Bei allen Optimierungen sollten Aufwand/Nutzen gegeneinander abgewogen werden. Ein paar Schwachstellen finden wir auch bei uns noch. Nach einiger Recherche ist uns aber der Aufwand zu groß, diese zu beseitigen. Und das, um am Ende bei den Perfomance Insights einen Wert von 97 auf 98% zu steigern.

Auch der Faktor „Unbedingt-haben-wollen“ spielt eine Rolle. Wenn ihr euch von der Facebook-Box einfach nicht trennen wollt, dann bleibt die halt auf dem Blog. Dann müsst ihr aber auch bereit sein mit dem Performance Nachteil zu leben.

Was hat uns die Optimierung gebracht?

Ganz einfach, mehr Besucher über Google. Hier mal eine Grafik, die das ganz schön zeigt.

Entwicklung bei Google nach der Speed Optimierung

Die Speedoptimierung haben wir am 21. und 22.12. durchgeführt. Am 25.12. ist auf einmal die Zugriffszahl von Google nach oben gegangen. Ebenso sind unsere Rankings, die wir mit Pagerangers überwachen, überdurchschnittlich nach oben gegangen. Da uns für den Zeitraum keine Änderung bei Google bekannt ist, führen wir das auf unsere Optimierung zurück. Das schöne ist, die höheren Werte sind bis heute nachhaltig auf dem Level geblieben.

Als Beleg für die Auswirkung durch die Optimierung sehen wir zusätzlich die Tatsache, dass unsere Rankings zeitgleich bei Google nach oben gegangen sind. Wir nutzen das Analysetool von Pagerangers*. Da können wir in dem Zeitraum ebenfalls einen Anstieg der gescannten Keywords sehen.

Unser Angebot für Euch

Jetzt machen wir mal was selbstloses. Wir bieten Euch an, mal einen Blick auf euren Pagespeed zu werfen. Wenn ihr das möchtet, dann schreibt das einfach unten in einen Kommentar. Wir werden uns die Seite, die Ihr in das URL-Feld eintragt, gerne einmal anschauen und Euch dann an die angegebene Mailadresse ein paar Tipps senden. 

Seht uns aber bitte nach, dass das ein paar Tage – oder auch mehr – dauern kann. Wir haben einen vollen Kalender aber zwischendurch schauen wir uns immer mal ein oder zwei Seiten an.

Im Moment kann es sogar ein paar Wochen dauern, bis wir uns Eure Seite anschauen können. Wir verreisen mal wieder und das Notebook bleibt zu Hause. Daher, habt ein wenig Geduld – nach der Reise melden wir uns gerne.

Wie ist Eure Erfahrung mit solchen Optimierungen? Habt ihr das schonmal gemacht? Ist Euch der Speed eurer Seite sogar egal? Haltet ihr das alles für überbewertet? Oder optimiert Ihr eure Seiten auch regelmäßig? Fragen über Fragen, wie gemalt für einen tollen Kommentar hier unten auf der Seite.

Danke für das Lesen des Beitrages!
Wir zwei beiden im Arches NationalparkÜber einen Kommentar würden wir uns riesig freuen! Ihr dürft den Beitrag auch sehr gerne über Eure Social Media Kanäle teilen. Beides zaubert uns immer ein Lächeln ins Gesicht.

Neu hier im Blog? Dann schau doch mal wer wir sind oder was wir auf diesem Reiseblog und Fotoblog anbieten.

Ganz besonders ans Herz legen möchte wir die Reiseberichte unserer Rundreisen, unsere Reisetipps und die Tipps für schöne Bilder von euren Reisen. 

Der Beitrag gefällt Dir? Dann teile ihn doch...

62 Kommentare

Hier klicken um einen Kommentar zu schreiben