Es ist wichtig zu verstehen, wie sich die Nutzung Ihrer App oder Website anfühlt, wenn die Verbindung schlecht oder unzuverlässig ist, und entsprechend zu entwickeln. Dabei können Ihnen verschiedene Tools helfen.
Test mit niedriger Bandbreite und hoher Latenz
Ein immer größerer Teil der Nutzer nutzt das Internet auf Mobilgeräten. Auch zu Hause wechseln viele Menschen von einem Festnetz-Breitbandanschluss zu einem mobilen Dienst.
In diesem Zusammenhang ist es wichtig zu verstehen, wie die Nutzung Ihrer App oder Website sich anfühlt, wenn die Verbindung schlecht oder unzuverlässig ist. Mit einer Reihe von Softwaretools können Sie niedrige Bandbreiten und hohe Latenzen emulieren und simulieren.
Netzwerkdrosselung emulieren
Beim Erstellen oder Aktualisieren einer Website müssen Sie für eine ausreichende Leistung unter verschiedenen Verbindungsbedingungen sorgen. Es gibt mehrere Tools, die Ihnen dabei helfen können.
Browser tools
Mit den Chrome-Entwicklertools können Sie Ihre Website mit verschiedenen Upload-/Downloadgeschwindigkeiten und Rückgabezeiten testen. Verwenden Sie dazu die Voreinstellungen oder benutzerdefinierten Einstellungen im Bereich „Netzwerk“. Einführung in die Analyse der Netzwerkleistung
System-Tools
Der Network Link Conditioner ist ein Einstellungsbereich, der auf einem Mac verfügbar ist, wenn Sie die Hardware-E/A-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 Hybrid-Web-Apps) unter Android ausführen:
Auf dem iPhone kann der Netzwerk-Link-Tester verwendet werden, um beeinträchtigte Netzwerkbedingungen zu simulieren (siehe oben).
Von verschiedenen Standorten und Netzwerken aus testen
Die Konnektivitätsleistung hängt vom Serverstandort und vom Netzwerktyp ab.
WebPagetest ist ein Onlinedienst, mit dem eine Reihe von Leistungstests für Ihre Website mit verschiedenen Netzwerken und Hoststandorten durchgeführt werden können. Sie können Ihre Website beispielsweise von einem Server in Indien über ein 2G-Netzwerk oder per Kabel von einer Stadt in den USA aus testen.
Wählen Sie einen Standort und dann in den erweiterten Einstellungen einen Verbindungstyp aus. Sie können die Tests sogar mit Scripts automatisieren (z. B. um sich auf einer Website anzumelden) oder mithilfe der RESTful APIs. So können Sie Konnektivitätstests in Build-Prozesse oder Leistungsprotokolle einbinden.
Fiddler unterstützt das globale Proxying über GeoEdge. Mithilfe der benutzerdefinierten Regeln können Sie Modemgeschwindigkeiten simulieren:
Test in einem beeinträchtigten Netzwerk
Mit Software- und Hardware-Proxys können Sie problematische Bedingungen in Mobilfunknetzen emulieren, z. B. Bandbreitendrosselung, Paketverzögerung und zufälligen Paketverlust. Mit einem freigegebenen Proxy oder einem beeinträchtigten Netzwerk kann ein Entwicklerteam realistische Netzwerktests in seinen Workflow einbinden.
Die Augmented Traffic Control (ATC) von Facebook ist eine Reihe von BSD-lizenzierten Anwendungen, mit denen sich Traffic steuern und beeinträchtigte Netzwerkbedingungen emulieren lassen:
Facebook hat sogar 2G-Dienstage eingeführt, um zu verstehen, wie Nutzer mit 2G-Verbindungen das Produkt nutzen. Dienstags wird den Mitarbeitern ein Pop-up angezeigt, über das sie eine 2G-Verbindung simulieren können.
Mit dem Charles-HTTP/HTTPS-Proxy können Sie Bandbreite und Latenz anpassen. Charles ist eine kommerzielle Software, aber es gibt eine kostenlose Testversion.
Weitere Informationen zu Charles finden Sie unter codewithchris.com.
Umgang mit unzuverlässiger Konnektivität und „Lie-Fi“
Was ist Lie-Fi?
Der Begriff Lie-Fi geht mindestens auf das Jahr 2008 zurück (als Smartphones so aussahen) und bezieht sich auf eine Konnektivität, die nicht das ist, was sie vorgibt zu sein. Ihr Browser verhält sich so, als hätte er eine Internetverbindung, obwohl dies aus irgendeinem Grund nicht der Fall ist.
Eine falsch interpretierte Konnektivität kann zu einer schlechten Nutzererfahrung führen, da der Browser (oder JavaScript) weiterhin versucht, Ressourcen abzurufen, anstatt aufzugeben und einen sinnvollen Fallback auszuwählen. Lie-Fi kann sogar schlimmer sein als eine Offlineverbindung. Wenn ein Gerät definitiv offline ist, kann Ihr JavaScript entsprechende Maßnahmen ergreifen.
Lie-Fi wird wahrscheinlich zu einem größeren Problem, da immer mehr Menschen auf mobile Datenverbindungen umsteigen und auf Festnetz-Breitband verzichten. Aktuelle Daten der US-Volkszählung zeigen, dass die Nachfrage nach Festnetz-Breitband sinkt. Das folgende Diagramm zeigt die Nutzung des mobilen Internets zu Hause im Jahr 2015 im Vergleich zu 2013:
Zeitüberschreitungen für die Verarbeitung von unterbrochenen Verbindungen verwenden
In der Vergangenheit wurden hackige Methoden mit XHR verwendet, um auf unterbrochene Verbindungen zu testen. Mit Service Workern lassen sich jedoch zuverlässigere Methoden zum Festlegen von Netzwerkzeitüberschreitungen verwenden. Mit Workbox ist das mit nur wenigen Codezeilen möglich:
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 auch eine Zeitüberschreitungsfunktion entwickelt. Die Streams API sollte dazu beitragen, die Bereitstellung von Inhalten zu optimieren und monolithische Anfragen zu vermeiden. Jake Archibald gibt in Supercharging page load (Seitenladezeit optimieren) weitere Informationen dazu.