Es ist wichtig, zu verstehen, wie sich die Nutzung Ihrer App oder Website bei schlechter oder unzuverlässiger Verbindung anfühlt, und sie entsprechend zu entwickeln. Es gibt eine Reihe von Tools, die Ihnen dabei helfen können.
Mit geringer Bandbreite und hoher Latenz testen
Ein immer größerer Anteil der Nutzer greift über Mobilgeräte auf das Web zu. Selbst zu Hause verzichten viele Menschen auf Festnetz-Breitbandanschlüsse und nutzen stattdessen Mobilfunk.
In diesem Zusammenhang ist es wichtig zu verstehen, wie sich die Nutzung Ihrer App oder Website bei schlechter oder unzuverlässiger Verbindung anfühlt. Es gibt eine Reihe von Softwaretools, mit denen Sie eine niedrige Bandbreite und eine hohe Latenz emulieren und simulieren können.
Netzwerkdrosselung emulieren
Beim Erstellen oder Aktualisieren einer Website müssen Sie für eine angemessene Leistung unter verschiedenen Verbindungsbedingungen sorgen. Dabei können verschiedene Tools helfen.
Browser-Tools
Mit den Chrome-Entwicklertools können Sie Ihre Website mit verschiedenen Upload-/Downloadgeschwindigkeiten und Umlaufzeiten testen. Verwenden Sie dazu die Voreinstellungen oder benutzerdefinierten Einstellungen im Bereich „Netzwerk“. Grundlegende Informationen finden Sie unter Erste Schritte mit der Analyse der Netzwerkleistung.
System-Tools
Network Link Conditioner ist ein Einstellungsbereich, der auf dem Mac verfügbar ist, wenn Sie Hardware IO Tools für Xcode installieren:
Geräteemulation
Mit dem Android Emulator können Sie verschiedene Netzwerkbedingungen simulieren, während Sie Apps (einschließlich Webbrowser und hybride Web-Apps) auf Android ausführen:
Auf dem iPhone kann Network Link Conditioner verwendet werden, um beeinträchtigte Netzwerkbedingungen zu simulieren (siehe oben).
Von verschiedenen Standorten und Netzwerken aus testen
Die Verbindungsleistung hängt vom Serverstandort und vom Netzwerktyp ab.
WebPagetest ist ein Onlinedienst, mit dem Sie eine Reihe von Leistungstests für Ihre Website über verschiedene Netzwerke und Hoststandorte ausführen können. Du kannst deine Website beispielsweise von einem Server in Indien in einem 2G-Netzwerk oder über Kabel von einer Stadt in den USA aus testen.
Wählen Sie einen Standort und in den erweiterten Einstellungen einen Verbindungstyp aus. Sie können Tests sogar mithilfe von Skripts (z. B. zum Anmelden auf einer Website) oder mithilfe ihrer RESTful APIs automatisieren. So können Sie Konnektivitätstests in Build-Prozesse oder das Leistungs-Logging einbinden.
Fiddler unterstützt globales Proxying über GeoEdge. Mit den benutzerdefinierten Regeln können Modemgeschwindigkeiten simuliert werden:
In einem beeinträchtigten Netzwerk testen
Mit Software- und Hardware-Proxys können Sie problematische Mobilfunknetzbedingungen wie Bandbreitendrosselung, Paketverzögerung und zufälligen Paketverlust emulieren. Mit einem freigegebenen Proxy oder einem beeinträchtigten Netzwerk kann ein Entwicklerteam Netzwerktests unter realen Bedingungen in seinen Workflow einbinden.
Augmented Traffic Control (ATC) von Facebook ist eine Reihe von BSD-lizenzierten Anwendungen, mit denen Traffic geformt und beeinträchtigte Netzwerkbedingungen emuliert werden können:
Facebook hat sogar 2G-Dienstage eingeführt, um zu verstehen, wie Menschen mit 2G-Verbindungen das Produkt nutzen. Dienstags erhalten die Mitarbeiter ein Pop-up, über das sie eine 2G-Verbindung simulieren können.
Mit dem HTTP/HTTPS-Proxy Charles können Sie die Bandbreite und Latenz anpassen. Charles ist eine kommerzielle Software, es ist jedoch eine kostenlose Testversion verfügbar.
Weitere Informationen zu Charles finden Sie unter codewithchris.com.
Umgang mit unzuverlässigen Verbindungen und „Lie-Fi“
Was ist Lie-Fi?
Der Begriff Lie-Fi stammt mindestens aus dem Jahr 2008 (als Smartphones noch so aussahen) und bezieht sich auf eine Verbindung, die nicht das ist, was sie zu sein scheint. Ihr Browser verhält sich so, als ob er eine Verbindung hätte, obwohl dies aus irgendeinem Grund nicht der Fall ist.
Eine falsch interpretierte Verbindung kann zu einer schlechten Nutzererfahrung führen, da der Browser (oder JavaScript) weiterhin versucht, Ressourcen abzurufen, anstatt aufzugeben und eine sinnvolle Fallback-Option zu wählen. Lie-Fi kann tatsächlich schlimmer sein als offline. Wenn ein Gerät definitiv offline ist, kann dein JavaScript zumindest entsprechende Ausweichmaßnahmen ergreifen.
Lie-Fi wird wahrscheinlich zu einem größeren Problem, da immer mehr Menschen auf Mobilgeräte umsteigen und sich von festen Breitbandverbindungen abwenden. Aktuelle Daten der US-Volkszählung zeigen eine Abkehr von festem Breitband. Das folgende Diagramm zeigt die Nutzung des mobilen Internets zu Hause im Jahr 2015 im Vergleich zu 2013:
Zeitlimits für die Verarbeitung von Verbindungsunterbrechungen verwenden
In der Vergangenheit wurden unsaubere Methoden mit XHR verwendet, um die Verbindung zu testen, wenn sie zeitweise unterbrochen war. Service Worker ermöglichen jedoch zuverlässigere Methoden zum Festlegen von Netzwerk-Zeitüberschreitungen. Dies lässt sich mit Workbox und nur wenigen Codezeilen erreichen:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Weitere Informationen zu Workbox finden Sie im Vortrag von Jeff Posnick auf dem Chrome Dev Summit: Workbox: Flexible PWA Libraries.
Für die Fetch API wird derzeit auch eine Zeitüberschreitungsfunktion entwickelt. Die Streams API soll dazu beitragen, die Inhaltsübermittlung zu optimieren und monolithische Anfragen zu vermeiden. Jake Archibald gibt in Supercharging page load weitere Details zum Umgang mit Lie-Fi.