Niedrige Bandbreite und hohe Latenz

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 zunehmender Anteil der Nutzer nutzt Mobilgeräte. 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. Dafür stehen Ihnen mehrere Tools zur Verfügung.

Browsertools

Mit den Chrome-Entwicklertools können Sie Ihre Website mit verschiedenen Upload- und Downloadgeschwindigkeiten und Umlaufzeiten testen. Verwenden Sie dazu Voreinstellungen oder benutzerdefinierte Einstellungen im Bereich „Netzwerk“. Einführung in die Analyse der Netzwerkleistung

Drosselung in den Chrome-Entwicklertools

System-Tools

Network Link Conditioner ist ein Einstellungsbereich, der auf Mac-Computern verfügbar ist, wenn Sie Hardware-E/A-Tools für Xcode installieren:

Steuerfeld für Mac Network Link Conditioner

Einstellungen für den Mac-Netzwerk-Link-Conditioner

Benutzerdefinierte Einstellungen für den Mac Network Link Conditioner

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:

Android Emulator

Android-Emulator-Einstellungen

Auf dem iPhone kann der Netzwerk-Link-Test 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 Sie eine Reihe von Leistungstests für Ihre Website mit einer Vielzahl von Netzwerken und Hoststandorten durchführen können. Sie können Ihre Website beispielsweise von einem Server in Indien über ein 2G-Netzwerk oder über Kabel von einer Stadt in den USA aus testen.

WebPagetest-Einstellungen

Wählen Sie einen Standort und 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. Mit seinen benutzerdefinierten Regeln können Sie Modemgeschwindigkeiten simulieren:

Fiddler-Proxy

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 Traffic geformt und beeinträchtigte Netzwerkbedingungen simuliert werden können:

Erweiterte Traffic-Steuerung von Facebook

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 HTTP-/HTTPS-Proxy Charles können Sie Bandbreite und Latenz anpassen. Charles ist eine kommerzielle Software, aber es gibt eine kostenlose Testversion.

Charles-Proxy-Einstellungen für Bandbreite und Latenz

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 gibt es mindestens 2008 (als Smartphones wie dieses aussahen) und bezieht sich auf Verbindungen, die nicht das sind, was sie vermuten lässt. 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:

Das Diagramm einer US-amerikanischen Bevölkerungsgruppe zeigt,
dass feste Breitbandverbindungen nicht mehr mobil sind, insbesondere in Haushalten mit niedrigem Einkommen

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.

Feedback