Optimierung der Ladegeschwindigkeit (Teil 1/2)

Nachdem ich nun wieder intensiver meine Blogs bearbeite und mir aufgefallen ist, dass die Ladegeschwindigkeit wirklich unterirdisch ist, geht es heute an die Optimierung der Ladegeschwindigkeit von meinen Blog-Seiten.

Was ich dabei tu und wie das ganze ausgeht, könnt Ihr in dem hier folgenden Artikel lesen.

Da der Artikel aber nun doch sehr lang geworden ist, werde ich diesen in zwei Artikel splitten. Dieser erste Teil wird sich mit de,m IST-Stand und der Analyse beschäftigen. Der zweite Teil geht dann auf die Maßnahmen ein, die hoffentlich zum Erfolg geführt haben.

Bei der Ladezeitoptimierung gilt es als erstes einen IST-Stand aufzusetzen. Die Ladezeit ist bei vielen Benutzern ein Gefühl und wenn das Gefühl sagt, es lädt zu lang springt der Besucher schnell wieder ab.

Mein Gefühl sagt mir im Moment, dass die Ladezeit meiner beiden Hauptblogs ClearSky-Blog und diesem hier einfach zu lang ist.

Daher gilt es hier zu optimieren.

IST-Stand der Ladezeit

Um den IST-Stand und später auch den Erfolg messen zu könne, benötigt man natürlich entsprechende Tools oder Dienste.

Einer der Dienste ist der Google Service PageSpeed. Ein anderer sind die Google Webmastertools. Natürlich gibt es auch externe Tools wie Pingdom oder andere Dienste. Man findet hier recht schnell die Tools.

Ich verwende die oberen Tools und werde nun nach der letzten Blogpause mir den IST-Stand aufzeigen lassen.

IST-Stand vom ClearSky-Blog

image

Pingdom zeigt mir 83/100 Punkten an und damit soll ich schneller als 38% aller getesteten Webseiten sein.

Das finde ich ziemlich schlecht.

Zur Auswertung der Daten komme ich später. Es gilt nun erst einmal festzustellen, wie schlecht oder auch gut die eigene Seite ist. Er lädt hier also bei der Domain 709.8 kB und das in 4,16 Sekunden.

imageLaut Google PageSpeed bekommt meine Seite auf den Mobilen Geräten nur 57/100 Punkte und für den Desktop-Bereich 67/100 Punkten.

Das ist unterirdisch schlecht. Mein Gefühl hat sich also nicht getäuscht.

IST-Stand von “Geld verdienen mit Nischenblogs”

imageNun beginnt das gleiche Spiel mit diesem Blog.

Tja, dieser Blog schneidet noch schlechter ab. Hier erreiche ich im Moment nur 73/100 Punkten und das obwohl der Blog hier über 1 Sekunde schneller lädt. Das hätte ich auch nicht gedacht. Eigentlich wollte ich diesen Blog gar nicht mitbetrachten, aber nun kommt er gleich mit unters Messer und rein in die Optimierung.

imageDafür schneidet er beim Google PageSpeed zwar besser ab, aber auch nicht wirklich gut.

62/100 Mobil und 70/100 auf dem Desktop sind keine guten Werten.

Die Referenz

Da man ja nun niemals auf 100/100 kommen kann, benötigen wir noch einen Referenzblog. Die Referenz sollte natürlich sehr gute Ergebnisse liefern und es sollte Möglich sein möglichst nah an diese Referenz heranzukommen.

Ich habe mir den Blog eines Pro-Bloggers herausgesucht und da er dort auch über Blog-Optimierungen schreibt, gehe ich davon aus, dass er seine Tipps und Tricks beherzigt. Daher ist die Wahrscheinlichkeit hoch, dass es nicht viel besser gehen wird.

imageBlogprojekt.de ist eines der Projekte von Peer Wandiger. Er begleitet mich schon sehr lange beim Bloggen und ich hoffe das ich weiterhin so viel lernen kann von Ihm.

Mit 93 Punkten ist Blogprojekt.de gut aufgestellt. Und beim PageSpeed-Test kommt zwar Mobil nur ein Wert von 78/100 imagePunkten zusammen, aber der Desktop sieht mit 91/100 Punkten wieder sehr gut aus.

So nun haben wir den IST-Stand und die Referenz erstellt. Jetzt geht es an die Analyse und an die Behebung der Fehler.

Die Analyse

Da schöne an all den Tools ist, dass diese uns schon die Analyse stark vereinfachen.

Pingdom gibt uns ein Wasserfalldiagramm an die Hand. Dieses zeigt ganz deutlich wo hier Ladeengpässe geschehen. Weiterhin ist es auch wichtig zu Wissen was man nicht optimieren muss.

Pingdom hat noch einen weiteren Vorteil. Es merkt sich zuvor erstellte Analyse und dadurch hat man über längere Zeit auch einen Vergleich der Analyse.

Auch PageSpeed gibt sofort Rückmeldungen und diese sind in ein Ampelsystem eingebaut. Man sieht also sofort was erforderlich ist und was empfohlen wird. Dabei kann man sofort auf die mobilen Geräte oder/und auf die Desktopgeräte optimieren.

Analyse vom ClearSky-Blog.de

Wie oben schon erwähnt, gibt es bei Pingdom eine Wasserfallanalyse. Das ist der erste Tab unter dem Test-Screen.

Im Screenshot seht Ihr sofort, dass meine Hauptseite Ewigkeiten zum laden braucht. Das sind hier Über 2 Sekunden bis alles geladen wurde.

image

Geht man mit dem Mauszeiger über den Balken, gibt es eine Beschreibung der imageAufteilung. Bei mir wartet die Seite 1,12 Sekunden auf irgendetwas.

Ihr seht also, dass es nun an mir ist rauszufinden, auf was hier gewartet wird.

So geht man nun durch das Wasserfalldiagramm und schaut sich an, was da wirklich schief läuft.

Auf dem zweiten Tab sieht man nun den Performance Grade. Hier hat man also einen Anhaltpunkt, wie gut die Performance nach bestimmten Gesichtspunkten ist. Z.B. gibt es Bilder in meiner Seite die einen sehr geringen Wert für das Überleben haben. Was das bedeutet? Naja wenn die Webseite gecached wird, also lokal auf dem Rechner liegt, dann gibt es einen Zeitwert wie lange das Bild oder die Seite leben darf ohne neu geladen zu werden. Ist dieser Wert sehr kurz eingestellt, wird die Seite bei jedem Besuch neu geladen. Das kostet Zeit. Vor allem bei Bilder die eigentlich statisch auf der Seite sind und sich nicht ändern.

Mein Performance Grade liegt momentan bei 83/100. Das finde ich nicht so schlecht, ist aber Ausbaufähig.

Der dritte Tab zeigt die Page Analyse und damit die Fehler und die Statistiken zur Webseite. Wo geht die Zeit hin. Eher in das Warten oder eher in das Laden von Bildern etc.

Der letzte Tab auf Pingdom zeigt die History. Hier kann man also schauen ob man über die Zeit besser oder schlechter wird. Ich hoffe doch das es besser wird.

Nun zur Analyse durch PageSpeed. Google arbeitet hier eher mit textbasierten Hinweisen. Daher kann ich nur wiedergeben, was Google mir hier zeigt. Alles was Google nicht zeigt, ist auch nicht optimierbedürftig.

Beim ClearSky-Blog ist die einzige erforderliche Behebung eine Komprimierung einzubauen, damit nicht so viele Bytes über das Netz übertragen werden müssen.

Sehr schön bei Google ist, dass hier jede Empfehlung gleich mit einer Google-Seite verlinkt ist.

So ist zum Beispiel die Antwortzeit meiner Servers zu reduzieren. Gut, dass kann ich nicht beeinflussen. Aber ich kann erst einmal Nachlesen, woran es wohl liegen mag.

Die empfohlenen Behebungen sind bei Google also:

- Browser Caching benutzen

- bestimmte JavaScript- und CSS-Ressourcen beseitigen. Diese behindern das Laden.

- Antwortzeit des Servers reduzieren

- Bilder optimieren

- CSS reduzieren

- JavaScript reduzieren

- HTML reduzieren

Da die Fehleranalyse nun für diesen Blog genauso aussieht, verzichte ich auf die direkte Analyse.

Fazit des ersten Teils

Ihr seht das eine regelmäßige Analyse schon von jedem Blogger durchgeführt werden sollte. Ich habe lange damit gewartet und sehe nun was alles zu tun ist.

Nach diesem IST-Stand und der Analyse, werde ich im zweiten Teil beschreiben was ich alles getan habe und dann auch das Ergebnis nach Zahlen aufzeigen.

Ähnliche Beiträge:

GD Star Rating
loading...
Optimierung der Ladegeschwindigkeit (Teil 1/2), 5.0 out of 5 based on 2 ratings

Ein Kommentar

  • Sehr schöner Beitrag. Die Ladezeit ist für Google ein wichtiges Kriterium für die Positionierung in den Suchergebnissen. Eine Optimierung bringt also nicht nur eine geringere Absprungrate sondern auch ein besseres Ranking in den SERP´s. Ich wünsche dir viel Erfolg!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

CommentLuv badge