Ladezeiten von mobilen Webseiten verringern – Methoden im Überblick

Im ersten Teil sprachen wir über die Herausforderungen einer mobilen Webpräsenz und deren Analyse, aus dem Leitfaden „Moderne Mobile-Web-Technologien“ des Bundesverbandes für Digitale Wirtschaft. Im zweiten Teil fassen wir nun für Sie zusammen, wo Sie laut BVDW konkret ansetzen müssen, um die Ladezeit Ihrer Website zu optimieren. 

Die 3-Sekunden-Regel

Der User/Kunde ist zwar König, aber Google ist der Kaiser. Für beide gilt: Ihr Fokus liegt auf der Zeit. Lädt eine Seite zu langsam (über 3 Sekunden), sei es nun mobil oder nicht, springt der User ab, beziehungsweise Google straft die Seite ab. Einer der Hauptfaktoren für eine gute mobile Webpräsenz ist also die Ladezeit. Diese wird jedoch gerade in Online-Shops durch viele Bilder und andere große Dateien stark an die Grenzen getrieben.

Diese Optimierung muss nicht aufwendig sein. Schon kleine Eingriffe in das vorhandene System können Wirkung zeigen.

An folgenden Punkten können Sie ansetzen:

1. Browser Caching
2. CDN
3. Kompression
4. Bilder
5. Ressourcen
6. Prefetching

Browser Caching:

Browser Caching (das Speichern von schon zuvor vom Browser heruntergeladenen Daten) ist eine relativ schnelle Lösung, um die Ladezeiten einer Website zu optimieren. Jedoch muss diese Methode mit Vorsicht genossen werden, um dem Kunden/Besucher trotz Caching alle Inhalte der Website zu können.

„Dabei ist es besonders wichtig zu beachten, dass generell alle Dateiformate im Browser Caching definiert werden können, dies aber zum Beispiel bei Dateien, die einer häufigen Änderung unterliegen, zu Problemen führen kann, da der Browser des Users nicht die geänderte Version der Dateien lädt.“ (BVDW)

Um das zu verhindern, sind zwei Methoden empfehlenswert: Zum einen das Cachen nach der letzten Änderung (sobald die Webseite neue Elemente lädt, sendet der Server diese erneut an den Browser). Zum anderen das Cachen nach der Haltbarkeit. Das heißt, der Server bestimmt, wie lange bestimmte Elemente vom Server gespeichert werden. Dies ist besonders bei statischen Elementen wie Logos, Videos und dem Quellcode zu empfehlen.

Somit werden die Ladezeiten zwar weniger verkürzt, als wenn die ganze Website gecached wird. Der User bleibt aber dennoch immer auf dem aktuellen Stand, was besonders für Online-Shops (Angebote, neue Ware und so weiter) zwingend notwendig ist.

Content Delivery Network (CDN):

Ein CDN ist ein Netz von global verteilten und über das Internet verbundenen Servern, mit denen Inhalte unabhängig von der eigenen Servergeschwindigkeit und Internetanbindung ausgeliefert werden können. CDN sollte für jeden Onlineshop Pflicht sein. Denn auch, wenn eine Website theoretisch ideal lädt und alle Voraussetzungen optimal sind, so kann die Performance beim Browser an einer schlechten, beziehungsweise langsamen Internetverbindung scheitern. CDN sorgt für eine weltweite Internetanbindung, sodass auch global ein schneller Zugriff auf die Website möglich ist.

Kompression:

Eine schnelle, wenn auch nicht ganz elegante Lösung ist die Kompression, also die Verkleinerung von vorhandenen Dateien. Ohne großen technischen Aufwand lassen sich die Dateigrößen von Bildern, Videos und dem Quellcode komprimieren, also alles das, was der Browser nachladen muss – oft auch mit Informationsverlust, der aber nicht weiter ins Gewicht fällt, da diese vom Nutzer nicht wahrgenommen werden. So können Sie relativ schnell bei Google eine Steigerung der Bewertung der Ladezeit erzielen. Zu beachten sind hier die jeweiligen Einstellungen der unterschiedlichen Contentmanagement-Systeme, um einen möglichen zu hohen Datenverlust zu verhindern, der durch Kompression entstehen kann.

Bilder:

Bilder stehen besonders mobil im Fokus, da Betrachter sie schnell erfassen können. Sie sind für die Attraktivität einer Website wichtig, aber auch für die Verkaufsförderung. Achtung: Je mehr Bilder vorhanden sind und je größer diese sind, desto schlechter ist die Ladezeit der Webseite. Abhilfe, besonders für Verkleinerung ohne Qualitätsverlust des Materials, kann ein Styleguide sein oder andere bewährte Tools wie das oben erwähnte Content Delivery Network.

Ressourcen/CMS:

Plugins waren lange Zeit die Methode für Nichtprofis, um mit einer Website zu arbeiten und ein Backend nach den eigenen Vorstellungen zu befüllen. Diese praktischen Plugins schlucken jedoch Unmengen an Ressourcen (Server und Browser zu gleichen Teilen). Hier kann eine Skript-Integration helfen. Diese sorgt dann dafür, dass der Inhalt der gleiche bleibt, aber sich die Ladezeiten und die Ressourcenverschwendung verringern. 

Prefetching:

Prefetching ist das Vorladen (im Browser) von bestimmten Links einer Website, die der Kunde besucht. Nicht die Landingpage ist vorgeladen, sondern der nächste wahrscheinliche Link, der vom Benutzer angeklickt wird. Dieses Vorgehen macht allerdings nur den Eindruck einer schnellen Website, denn die Seite selbst ist nicht schneller, sie steht nur schon in den Startlöchern. 

Natürlich ist die Schnelligkeit nicht der einzige Punkt, an dem Sie arbeiten sollten. Viele weitere Möglichkeiten bieten sich Ihnen, um Ihren Kunden ein besseres mobiles Shoppingerlebnis zu ermöglichen. Lesen Sie mehr dazu in unserem dritten Beitrag unserer Themenreihe.