Tools & Tipps: Mobile Webseiten Ladezeit schnell und einfach verbessern

Wir sehen in unserer täglichen Arbeit viele gute mobile Webseiten, die mobil optimiert sind und schnelle Ladezeiten haben – auch abseits der üblichen Verdächtigen wie Amazon und Zalando. Allerdings setzen vorrangig die großen Player Maßstäbe und konditionieren den Onlineshopper. So wie das Paket am nächsten Tag da ist, werden die Onlineshopper auch in puncto Ladezeit an ein hohes Tempo gewöhnt.

Die Webseiten von Amazon und Co sind vor allem eins: unfassbar schnell! Doch hier die gute Nachricht: Es braucht keine Armee von Entwicklern, um schnell und einfach die mobile Webseiten Ladezeit erheblich zu verbessern. Im diesem Beitrag stellen wir Ihnen vier kostenlose Tools vor, die Ihnen helfen die mobile Webseiten Ladezeit zu verbessern. Und wir geben Ihnen drei Maßnahmen zur Ladezeit Optimierung an die Hand.

Abb. 1: #MobileMadness: a campaign to help you go mobile-friendly, Quelle: Google Webmaster

Korrelation Webseiten Ladezeit und Conversion-Rate

Gibt es zwischen Ladezeit der Website und der Kaufrate überhaupt einen Zusammenhang? Klare Antwort: Ja! Im folgenden Screenshot zeigt die gelbe Linie die Conversion-Rate und die rote Linie die durchschnittliche Seitenladezeit. Es wird ausschließlich die Seitenladezeit der mobilen Zugriffe dargestellt. In den wichtigen Wochen vor Weihnachten ist somit der Super-Gau passiert: Die Seitenladezeit geht von 6 auf 12 Sekunden hoch, die Conversion-Rate fällt von 2,4% auf ca. 1,4%.

Abb. 3: Ladezeit und Conversion-Rate Was in diesem Beispiel ein Problem war, zeigt gleichzeitig das Potenzial: Eine Halbierung der Seitenladezeit bewirkt im Umkehrschluss, dass sich die Conversion-Rate nahezu verdoppelt. Vereinfacht bedeutet dies, dass die Halbierung der Seitenladezeit in diesem Projekt bei gleicher Besucheranzahl den doppelten Umsatz generiert.

Branchenübergreifend werden 53% Ihrer Besucher die Website innerhalb von drei Sekunden verlassen, wenn sie nicht geladen ist.

Durch eine schnellere Seite sinkt die Absprungrate und steigt die Conversion-Rate. Die positiven Effekte für mehr Umsatz oder Leads liegen auf der Hand. Zusätzlich ist die mobile Seitengeschwindigkeit ein weiteres wichtiges Ranking Signal ab Juli 2018 für SEO. Brauchen Sie noch mehr Informationen und Argumente zu dem Thema „Ladezeit“, gibt es hier passende Statistiken von Google.

Ein beliebter Trugschluss: Hey, meine mobile Webseite ist doch super schnell! – wenn der Zugriff über WLAN erfolgt.

Hier die Ergebnisse der Anstrengungen unserer Netzbetreiber:

Abb. 4: Quelle: https://www.nperf.com/en/map/DE/-/1709.Vodafone-Mobile/signal/

Flächendeckend sehen wir 3G oder schlechter, in Ballungsgebieten auch 4G. Daher empfehlen wir in den folgenden Tools eine langsame Internetverbindung zu simulieren. Denn auch in den öffentlichen Verkehrsmitteln der Städte ist beim Warten des Seitenaufbaus Geduld ein guter Begleiter.

4 Tools , um die  „Mobile“ Webseiten Ladezeit zu verbessern

Kommen wir nun zum Herzstück und unseren Top Tools zur Analyse der Ladezeit mobiler Webseiten. Die Reihenfolge der Tools erfolgt nicht nach Priorität. Sie unterscheiden sich in Informationsdichte und Einfachheit der Aufbereitung der Daten. Auch haben die Tools einen unterschiedlichen Schwerpunkt in den Analysemöglichkeiten und sind für unterschiedliche Zielgruppen gedacht. Mit Google Analytics lassen sich zwar Erkenntnisse zur Website Geschwindigkeit gewinnen, was wegen der eingeschränkten Filter- und Einstellungsoptionen heute jedoch  außer Acht gelassen wird.

1. Die Chrome Entwicklerkonsole

Mit STRG + Shift + I öffnet sich die Konsole im Google Chrome Browser. Im Reiter Network ist im 1. Schritt der Cache auszuschalten. Daraufhin simulieren Sie im 2. Schritt eine Slow 3G Internet Verbindung und starten 3. eine Aufnahme.

Abb. 5: Google Entwicklerkonsole

In der nun folgenden Auswertung gibt es neben einem Wasserfalldiagramm mit sehr detaillierten Informationen auch die Erstellung von Screenshots während der Ladesequenz. In der Tabelle mit Wasserfalldiagramm lassen sich leicht erste Optimierungen einstellen. Die Tabelle kann u.a. nach CSS, JS und Bildern gefiltert werden. Werden Bilder im sichtbaren Bereich zuerst geladen? Sind diese komprimiert? Wie ist die Antwortzeit zum Server beim Time To First Byte? Bei diesem Beispiel ist der erste sichtbare Content nach 3,03 Sekunden und nach 8,94 Sekunden vollständig geladen.

Abb. 6: Aufbau der mobilen Webseite im Verlauf

2. Testmysite.withgoogle.com

Bei diesem Analyse Tool werden die Ergebnisse auch im Vergleich zur Branche dargestellt. Das Ganze basiert auf dem Tool webpagetest.org und ist in einem Non-Developer-Gewand leicht verständlich aufbereitet. Auf einen Blick erhalten Sie zudem Informationen über die Ladezeit und den geschätzten Besucherverlust.

Abb. 7: Testmysite.withgoogle.com

Zusätzlich können Sie einen detaillierten und kostenlosen Bericht anfordern mit Optimierungsvorschlägen zum Beschleunigen Ihrer mobilen Website.

Abb. 8: Übersicht Tipps Testmysite.withgoogle.com

3. Webpagetest.org

So heißt das kostenlose Profi-Tool mit vielfältigen Einstellungsmöglichkeiten zum Simulieren von Standorten, Browsern und Endgeräten. Mit seiner Hilfe können Sie von einem bestimmten Standort aus die Performance in anderen Ländern der Welt testen.  Die Statistiken und Optimierungsvorschläge sind bei diesem Tool besonders umfangreich. Empfohlene Standard Einstellungen für Deutschland sind der Server in Frankfurt / EC2 / Chrome bzw. IOS mit einer 3G Slow Internetverbindung.

Abb. 9: Webpagetest.org

Auf einen Blick gibt es nach drei Testrunden eine Auswertung zu mehreren Kategorien im amerikanischen Schulnotenformat. Außerdem gibt es einen Speed Index Score: Alles unter einem Score von 3000 ist aktuell sehr gut. Je größer die Zahl, desto langsamer lädt Ihre Seite. Bei einem Klick auf eine der Buchstaben-Kacheln oben rechts erhalten Sie detaillierte Informationen und Optimierungsvorschläge.

Abb. 10: Auswertung bei webpagetest.org

Kritische Punkte wie zum Beispiel Elemente die nicht geladen werden können werden direkt im Wasserfalldiagramm markiert. Genauso überflüssige Abfragen bei denen im Endeffekt kein Content geladen wird. Am Ende kostet all dies Zeit, die eingespart werden kann. Es werden hier also ca. 0,4 Sekunden verschwendet (Time to First Byte + Initial Connection) für 0 ms Content Download. Wer möglichst detaillierte Informationen wünscht, macht mit diesem Tool nichts falsch.

4. Lighthouse

Ein kostenloses Plugin für den Google Chrome Browser. Lighthouse vereint Analysemöglichkeiten diverser Tools und gibt nebst performancerelevanten Optimierungsvorschlägen zur mobilen Webseitengeschwindigkeit auch Tipps zu Progressive Web App, Best Practices und SEO. Die meisten Metriken werden samt Optimierungsmaßnahmen erklärt. Die Screenshots, die wir aus der Entwicklerkonsole oder auch webpagetest.org kennen, sind hier ebenfalls enthalten. Sehr hilfreich ist die Kategorisierung in „First meaningful paint“ – wann ist der primäre, sichtbare Content geladen (first Interactive), wann reagiert die Seite das erste Mal auf Scrollen/Klicks des Nutzers und wann ist die Seite vollständig interaktiv (Consistently Interactive).

Abb. 11: Auswertung bei Lighthouse

Spannend ist hier der zweite Teil der Auswertung im Bereich Opportunities. Hier finden sich ganz konkrete Tipps, was die Priorisierung von Ressourcen ungemein erleichtert.

Abb. 12: Detaillierte Auswertung bei Lighthouse

3 Tipps, wie Sie die mobile Webseite Ladezeit verbessern

1. Vermeiden Sie große Dateien

Denn daraus ergeben sich weniger Anfragen für weniger Bilder und Dateien. Muss der Slider bei einer Startseite auch mobil integriert sein oder reicht ein Heroshot? Braucht es mobil unbedingt ein Video? Auf einer Kategorienseite sollen 10, 20 oder 100 Artikel geladen werden?

Wie sinnvoll sind hier die großen, hochauflösenden Bilder? Könnten die Bilder in zwei Phasen geladen werden – kleines Format dann großes Format? Kann überprüft werden, wie schnell die Internetverbindung des Nutzers ist und der Content darauf abgestimmt werden?

Bild-Tipps: Alle Bilder komprimieren, kleinere Bilder für kleinere Geräte nutzen, Anfragen sparen, und mehrere Bilder zu einem kombinieren: Laden Sie keine Bilder die nie gesehen werden.

JS/CSS-Tipps: Komprimieren Sie JS/CSS, vermeiden Sie große JS/CSS Dateien, denn auch hier gilt: Anfragen sparen. Integrieren Sie die meisten JS/CSS Dateien in 1-3 Dateien. Laden Sie JavaScript wenn möglich in der Reihenfolge der Sichtbarkeit.

Ziel: Wenige Anfragen für wenige Dateien mit kleiner Dateigröße!

2. Sichtbaren Inhalt zuerst laden.

Nutzer nehmen eine Seite als geladen wahr, wenn der Inhalt, der ohne scrollen sichtbar ist, geladen wurde. Deshalb sollten Sie keine Bilder laden, die nie gesehen werden. Bilder sind dabei nach Priorität zu laden, im sichtbaren Bereich zuallererst. Bereiche, die durch scrollen gesehen werden, dürfen im Zweifel auch später laden. Der Nutzer sieht, dass etwas passiert und springt seltener ab.

3. So viel cachen wie möglich. Wiederkehrende Besucher haben eine höhere Conversion-Rate als Besucher, die das erste Mal Ihre Website besuchen. Machen Sie es Ihren Besuchern bei einem mobilen Besuch so angenehm wie möglich. Der Browser kann Daten auf dem Gerät des Nutzers speichern, so dass diese bei einem nochmaligen Aufruf der Website nicht mehr neu geladen werden müssen. Dies gilt auch für Produkte in Ihrem Shop die aus einer Datenbank abgerufen werden müssen. Überlassen Sie es einer Caching Engine den ersten Aufruf vorzunehmen und nicht Ihren Besuchern.

Fazit

Es ist die Kombination der verschiedenen Tools, die das Aufdecken der Potenziale ermöglicht. Für einen schnellen Überblick über die Website Performance haben alle Ihre Vorteile. Testmysite.withgoogle.com gibt einen guten ersten Einblick mit allgemeinen Informationen.

Konkrete Impulse und Handlungsaufforderungen bei webpagetest.org, der Chrome Entwicklerkonsole und dem Plugin Lighthouse. Wir haben bei unseren Projekten viele Über-Nacht-Verbesserungen gesehen: Ladezeiten wurden mit geringem Zeitaufwand reduziert und Conversion-Raten verbessert. Rechnen Sie es sich aus, es lohnt sich.