Bei hohen Ladezeiten und unsicheren Seiten springt dir jeder Besucher ab!

Zwei Wochen schloss ich mich in meinem Arbeitszimmer ein um mich endlich der Erstellung meiner beiden Websites zu widmen. Ich komme aus dem Bereich Marketing und weiß daher worauf es beim Design und beim Thema Usability ankommt. Das nötige technische Wissen konnte ich mir aus ein paar Youtube Videos aneignen. Hier noch ein Plugin und dort noch mehr sich bewegende Elemente… so wuchsen die Websites langsam heran. Als ich dann endlich fertig war und zufrieden auf mein Werk blickte, merkte ich schnell ein heut zu Tage vernichtendes Problem: die Websites laden zu langsam!

Ein Problem, was einem in dieser schnelllebigen Zeit schnell das Genick bricht. Denn Niemand möchte 15 Sekunden warten bis eine Seite geladen wurde. In solchen Fällen verlassen die Besucher meistens die Seite wieder, bevor sie sie überhaupt sehen konnten. Und als ob das nicht schon schlimm genug wäre, beeinflusst die Ladezeit auch das Google-Ranking. Langsam ladende Seiten werden in den Google-Ergebnissen weiter unten angezeigt.

Da war ich nun. Mit zwei schönen Websites, die wohl Niemand finden geschweige denn laden lassen würde. Über das Tool „Page Speed Insights“ (https://developers.google.com/speed/pagespeed/insights/) ließ ich mir visuell darstellen, wie schlimm es um meine Seiten steht.

Speedscore 9 für mobile Aufrufe und Speedscore 22 für Aufrufe am PC. Und das bei möglichen 100%. Quasi ein vernichtendes Ergebnis.

Darunter stand eine lange Liste warum die Seite so langsam ist. Also was alles geladen wird, aber nicht nötig ist. Darunter konnte ich mir schon mal nicht sooo viel vorstellen. Ich erspähte die Überschrift „Empfehlungen“ und war schon ganz erfreut konkrete Handlungsschritte zu bekommen:

  • „Nicht genutztes JavaScript entfernen“ – aha… ähhh wo entferne ich denn JavaScript und woher weiß ich, dass es nicht genutzt wird?
  • „Wichtige Anforderungen vorab laden“ – wichtig ist da auch eher ein schwammiger Begriff, oder? Was ist denn wichtig? Und wie soll es vorab geladen werden? Und wo stelle ich das ein?

Das führte alles zu nichts. Frustriert notierte ich groß auf meiner To Do Liste: „Website Ladegeschwindigkeit optimieren“. Dann beschloss ich dieses Thema erstmal ruhen zu lassen, bis ich eine Idee hatte, wie ich es lösen konnte.

In den nächsten Tagen stellte ich ein weiteres Problem fest: Ich habe zwar für beide Seiten extra ein Business SSL-Zertifikat gekauft, aber dennoch werden einige Unterseiten als unsicher markiert.

Ich habe keine Lösung, aber ich bewundere das Problem.

Das landete so gleich mit auf meiner To Do Liste. Soll sich doch mein zukünftiges Ich damit herumärgern.

Mein zukünftiges Ich las diese beiden Punkte immer wieder auf der To Do Liste. Das Problem hatte sich leider immer noch nicht erledigt. Wie viele potentielle Besucher hatte ich dadurch wohl schon verloren?

Und dann endlich – völlig unerwartet – kam die Lösung zu mir. Ich hatte einen neuen Eintrag über mein Kontaktformular erhalten:

Die Lösung naht

„Hallo Jenn, ich habe mir deine persönliche Webseite und die Human Reboot Webseite mal genauer angesehen. Die beiden Seiten sehen optisch echt super aus. Allerdings laden die Seiten sehr langsam. Hier kannst Du überprüfen, woran das liegt und wie Du die Ladezeit verbessern könntest: https://developers.google.com/speed/pagespeed/insights/

Zur Zeit liegen die Seiten im roten Bereich, das beeinflusst einerseits das Ranking der Seite und andererseits, wird es deine Absprungrate negativ beeinflussen, weil die meisten Leute sich keine 15 Sekunden Zeit nehmen.

Außerdem gibt es auf den Seiten ein kleines Problem mit dem Sicherheitszertifikat, wahrscheinlich werden nur irgendwelche Bilder über http statt https eingebunden. Das ist nicht weiter schlimm, aber die Warnung könnte Besucher deiner Webseiten verunsichern.

Ich würde Dir gern meine Hilfe bei diesen Problemen anbieten. Vielleicht können wir die Tage ja mal skypen, um das genauer zu besprechen. Ich freue mich auf deine Antwort.“

Als hätte Nico sehen können, was auf meiner To Do Liste steht und mich schon ewig quält! Ich war unheimlich dankbar, dass mir endlich eine Lösung für mein Problem geschickt wurde.

Nico kenne ich von der ABG App, die er ins Leben gerufen hat. Eine App, die alle Angebote und Geschäfte in Altenburg ansprechend aufarbeitet und dir verrät, was du auf keinen Fall verpassen darfst.

Wir verabredeten uns zu einem Skype Termin um nochmal gemeinsam das Problem zu betrachten und eine Lösung zu finden.

Und schon ging es los

Ohne SmallTalk startete Nico direkt mit dem Thema. Als Unternehmerin fand ich das super, da wir sofort effizient an der Problemlösung dran waren.

Ich erklärte Nico, dass der Aufbau meiner beiden Websites auf einer Multisite basiert und wie die beiden Seiten entstanden sind.

Da war ihm sofort klar, dass der SSL Fehler darauf zurück zu führen ist, dass ich die zweite Seite erst aufgebaut habe und danach das SSL Zertifikat zugewiesen habe. Dieses Vorgehen hat dazu geführt, dass alle Verlinkungen der Seite als „http“ statt „https“ im Code stehen. Damit kann die Seite nicht als sicher eingestuft werden. Das gleiche Problem ist auch beim Einfügen der Bilder entstanden. Die Pfade wurden ebenfalls mit „http“ hinterlegt. Somit war meine Aufgabe alle Verlinkungen und alle neu einzufügen bzw. die Pfade zu überprüfen.

Nico schaute sich in der Zeit die Probleme mit der Ladegeschwindigkeit genauer an. Er schaffte es die Ladezeit von 20 auf 10 Sekunden für mobile Geräte zu verkürzen. Die Ursache, dass die Ladegeschwindigkeit nicht weiter optimiert werden kann, sind die eigebundenen Youtube Videos. Eigentlich hatte ich ja gedacht, dass die Videos erst geladen werden, sobald Jemand auf Play drückt. Das ist aber leider nicht der Fall. Die Videos werden beim Laden der Webseite vorgeladen, damit sie sofort starten können. Aber auf der Seite ist doch nur 1 Video? Nico sagte: „Ein Video reicht. Dadurch wird der komplette Programmcode für das Video geladen, der eigentlich erst gebraucht wird, wenn man beim Video angelangt. Ich belese mich dazu nochmal, was man machen könnte.“

Die Ergebnisse der Ladezeitoptimierung bei jennvandistel.de

Meine Startseite, auf der sich ein Video befand erreichte mit Nicos Hilfe einen Score von 33:

Eine Unterseite ohne Videos erreichte sogar 57 von 100 Punkten bei der Ladegeschwindigkeit! Eine tolle Verbesserung!

Aber das war nur die „kleine“ der beiden Websites. Der große Bruder hat deutlich mehr Inhalte und eigebundene Videos sowie Affiliate Links. Daher war es eine echte Herausforderung hier die Ladezeit zu verbessern.

Ladezeiten von Human Reboot

Während Nico sich dem Problem im Detail annahm, löschte ich alle eingefügten Animationen, die den Text beim Scrollen einfliegen ließen. Das kostet leider auch Ladezeit. Zwar nur minimal, aber ich wollte unbedingt das Gesamtergebnis verbessern. Insgesamt konnte ich damit nochmal 2 Punkte gutmachen.

In der Empfehlungsliste der Page Speed Seite stand außerdem, es gibt ein Plugin, was Bilder in modernen Formaten erstellt und somit die Ladezeit positiv beeinflusst. Damit hatte Nico allerdings eher weniger gute Erfahrungen gemacht und erklärte mir, dass oft die modernen Formate von manchen Browsern nicht unterstützt werden. Außerdem funktionieren diese „Bilder in modernen Formaten“ wieder über ein Plugin, bei dem nur 1000 Anfragen kostenlos sind. Damit ist dieses Vorgehen wenig effektiv.

Nico hatte aber zwei Lösungsmöglichkeiten für die eingebundenen Youtube Videos gefunden, um die Ladezeit zu verringern.

  1. Einfach lokal einbinden. Nachteil: Speicherplatz + keine Youtube Klicks.
  2. Lazy Loading: Das Video wird erst nach dem Klicken geladen. Dafür müsste man wieder ein Plugin installieren.

Die Krux an der Sache ist, dass weitere Plugins die Ladezeit der Websites wiederrum negativ beeinflussen. Am besten wäre es also keine Plugins zu nutzen und alle entsprechend zu programmieren. Programmieren zu lernen wollte ich allerdings gern vermeiden.

Während unserer Zusammenarbeit gab es ein WordPress Update in dem tatsächlich die Lazy Loading Funktion bereits voreingestellt ist. Das bot den Vorteil, dass wir hier nicht mehr händisch für jedes Video und Bild die Lazy Load Funktion einstellen mussten.

„Mein Browser sagt mir, dass keine Verbindung zu YouTube beim Laden hergestellt wird. Allerdings meckert Insights immer noch drüber.“

Auch wenn die Messwerte immer noch rot gefärbt sind, konnte Nico subjektiv eine deutliche Verbesserung der Ladezeit erzielen. So erscheinen jetzt die ersten Inhalte bereits nach 1 Sekunde, was die Absprungrate definitiv verringern wird.

Ladezeiten vor der Optimierung
Geschwindikeit mit Komprimierung
Ladezeiten nach Abschluss der Optimierungen