Mobile Performance | So macht man eine Website mobilgerätefreundlich

Warum ist mobile Performance wichtig?

Das Web wird mobil. Laut Statista finden 51 Prozent der weltweiten Webseitenaufrufe auf Mobilgeräten statt. In einigen Regionen, wie z. B. Asien und Afrika, ist der Prozentsatz viel höher. In jedem Fall wächst dieser Prozentsatz von Jahr zu Jahr stetig an.

Die großen Suchmaschinen sind sich dieses Trends bewusst, weshalb sie Websites mit schnellen Ladezeiten für Mobilgeräte priorisieren. Mobilnutzer haben möglicherweise eine begrenzte Bandbreite, möchten aber trotzdem schnell Informationen finden. Diese Nutzer neigen dazu, weniger Geduld zu haben, was hohe Bounce Rates bei langsam ladenden Websites bedeutet (die „Bounce Rate“ ist der Prozentsatz der Website-Besucher, die die Website nach dem Betrachten nur einer einzigen Seite verlassen).

Google und andere Experten für die Geschwindigkeit von Websites haben ermittelt, dass die maximale Ladezeit für eine mobile Website etwa drei Sekunden betragen sollte. Nach drei Sekunden sinkt die Nutzerbindung dramatisch. Suchmaschinen „bestrafen“ Websites, die langsam geladen werden, indem sie sie in den Suchergebnissen weiter unten anzeigen, insbesondere für Mobilnutzer.

Ein Ladezeitlimit von drei Sekunden über eine mobile Verbindung scheint relativ streng, aber es gibt bewährte Strategien, um die Ladezeiten für Mobilgeräte niedrig zu halten.

Verbesserung der mobile Performance

Es gibt eine Reihe von Faktoren, die sich auf die Performance von Mobilgeräten auswirken. Daher können eine Reihe von Strategien und bewährten Vorgehensweisen die Ladezeiten verbessern.

Minimieren von Dateigrößen und Dateianzahl

Um eine kürzere Ladezeit zu gewährleisten, sollten alle Website-Dateien so klein wie möglich sein. Bilder sind häufig die größten angeforderten Dateien; sie können mithilfe von Bildoptimierern oder durch Konvertieren in ein leichtes Bildformat wie SVG verkleinert werden.

HTML-, JavaScript- und CSS-Dateien können durch Minifikation ebenfalls verkleinert werden. Code-Minifikation bedeutet, den gesamten Leerraum und die Kommentare aus dem Code zu entfernen und ihn so kompakt wie möglich umzustrukturieren. Dadurch wird die Dateigröße auf ein Minimum reduziert. Während dies den Code für einen Menschen praktisch unlesbar macht, kann ein Webbrowser den Code dennoch einwandfrei ausführen.

Neben der Schaffung kleinerer Dateigrößen sollte die Anzahl der Gesamtdateien auf ein Minimum beschränkt werden. Jede zusätzliche Datei, die zum Laden einer Website erforderlich ist, bedeutet eine zusätzliche Anfrage und Antwort, wodurch die Ladezeit steigt. Websites mit mehreren JavaScript- und CSS-Dateien sollten den gesamten JavaScript-Code in einer Datei konsolidieren und dies auch mit CSS tun. Bei Seiten, die nur sehr wenig JavaScript oder CSS benötigen, kann die Verwendung von Inline-Styles* die Ladezeiten erheblich verkürzen.

*Normalerweise schreiben Webentwickler HTML-, JavaScript- und CSS-Code in verschiedenen Dateien. Mit einer Technik namens „Inline-Style“ kann ein Entwickler seinen JavaScript- und/oder CSS-Code in dieselbe Datei wie sein HTML schreiben.

Zwischenspeichern von Ressourcen am Netzwerkrand

Wenn ein Benutzer eine Website besucht, muss das Gerät des Benutzers normalerweise mit dem Webserver kommunizieren, um die Website-Dateien abzurufen. Wenn sich der Webserver in San Francisco befindet und der Benutzer sich in Berkeley aufhält (16 km entfernt), sollte dies ziemlich schnell gehen. Aber was ist, wenn sich der Benutzer in Tokio befindet (8.000 km entfernt)? Das bedeutet, dass jede Anfrage und Antwort Tausende von Kilometern zurücklegen muss, wodurch sich das Laden der Website erheblich verlangsamt.

Ein gängiger Weg, um dieses Problem zu bekämpfen, ist die Verwendung eines Content Delivery Network (CDN). Ein globales CDN cacht Inhalte an der Netzwerk-Edge. Das bedeutet, dass das CDN über Caching-Server verfügt, die in Rechenzentren auf der ganzen Welt installiert sind. Jeder, der einen Internetzugang hat, ist nie zu weit von einem Rechenzentrum entfernt. Die Rechenzentrums-Server kommunizieren mit den Ursprungswebservern, um Website-Daten zu cachen. Wenn Benutzer eine Website besuchen, die das CDN verwendet, erhalten sie Website-Dateien von ihrem lokalen Rechenzentrum. Dies gewährleistet eine schnelle Reaktionszeit von Anfragen für Benutzer – unabhängig von ihrem Standort.

Zwischenspeichern von API-Aufrufen

API-Aufrufe sind HTTP-Anfragen zum Abrufen von Daten von externen Ressourcen. Beispielsweise kann eine Filmkritik-Website wie Rotten Tomatoes API-Aufrufe an einen Ticketing-Dienst wie Fandango senden, damit Besucher auf Rotten Tomatoes ihr lokales Kinoprogramm sehen können. API-Aufrufe können zwar dazu beitragen, eine robuste Erfahrung zu schaffen und redundante Arbeit zu reduzieren, sie sorgen jedoch auch für neue HTTP-Anfragen, was zu längeren Ladezeiten führen kann.

API-Aufrufe können zwischengespeichert werden, um diese zusätzlichen HTTP-Anfragen zu minimieren. In unserem obigen Beispiel für das Kinoprogramm muss Rotten Tomatoes nur einmal pro Tag das Programm für Los Angeles abrufen. Es kann seine Website so konfigurieren, dass dieser API-Aufruf einmal pro Tag zwischengespeichert wird. Wenn täglich 10.000 Benutzer aus Los Angeles Rotten Tomatoes besuchen, muss dann nur der erste dieser Benutzer auf den API-Aufruf von Fandango warten.

Priorisierung von sichtbaren Inhalten

Was ein Benutzer beim Laden einer Webseite sofort sieht, ist oft nur die Spitze des Eisbergs: Er muss nach unten scrollen, um den Rest der Seite zu sehen. Der Inhalt, der auf dem Bildschirm eines Benutzers angezeigt wird, bevor dieser herunterscrollt, wird als „Above the Fold“-Inhalt bezeichnet. Webentwickler sollten den Code so schreiben, dass „Above the Fold“-Inhalte immer zuerst geladen werden. Eine Technik, um dies zu erreichen, ist das sog. Lazy Loading, bei dem Inhalte, die nicht sofort zu sehen sind, dynamisch geladen werden, während der Benutzer auf der Seite nach unten scrollt.

Vermeidung von Umleitungen

Es gibt verschiedene Gründe, warum Websites Umleitungen beim Laden von Seiten erstellen. Beispielsweise werden 301-Umleitungen häufig bei Websites verwendet, die umbenannt oder umfirmiert werden. Diese Praxis sollte nach Möglichkeit vermieden werden, da Umleitungen wertvolle Ladezeit in Anspruch nehmen.

Zusammenfassung

Da das mobile Surfen im Web immer beliebter wird, wird es auch immer wichtiger, eine leistungsstarke mobile Website zu haben. Schnelle mobile Websites werden mit höherer Bindung und verbesserten Konversionsraten sowie einem SEO-Schub belohnt. Website-Besitzer sollten einige oder alle der oben beschriebenen Strategien implementieren, um diese Vorteile zu nutzen.