Niedrige Bandbreite und hohe Latenz

Es ist wichtig zu verstehen, wie sich die Nutzung Ihrer App oder Website anfühlt, wenn die Internetverbindung schlecht oder unzuverlässig ist, und entsprechend zu entwickeln. Eine Reihe von Tools kann Ihnen helfen.

Mit niedriger Bandbreite und hoher Latenz testen

Ein immer mehr Menschen nutzen das Internet auf Mobilgeräten. Selbst zu Hause verlassen viele Menschen ihre mobilen Breitbandnetze.

In diesem Zusammenhang ist es wichtig zu verstehen, wie sich die Nutzung Ihrer App oder Website bei schlechter oder unzuverlässiger Verbindung anfühlt. Niedrige Bandbreite und hohe Latenz können mithilfe einer Reihe von Softwaretools emuliert und simuliert werden.

Netzwerkdrosselung emulieren

Wenn Sie eine Website erstellen oder aktualisieren, müssen Sie dafür sorgen, dass unter verschiedenen Verbindungsbedingungen eine angemessene Leistung erzielt wird. Dafür gibt es verschiedene Tools.

Browser tools

Mit den Chrome-Entwicklertools können Sie Ihre Website mit verschiedenen Upload-/Downloadgeschwindigkeiten und Umlaufzeiten testen. Dazu verwenden Sie Voreinstellungen oder benutzerdefinierte Einstellungen aus dem Bereich „Netzwerk“. Unter Erste Schritte mit dem Analysieren der Netzwerkleistung finden Sie die Grundlagen.

Drosselung in den Chrome-Entwicklertools

System-Tools

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

Steuerfeld „Network Link Conditioner“ für Mac

Network Link Conditioner-Einstellungen für Mac

Benutzerdefinierte Einstellungen für Mac Network Link Conditioner

Geräteemulation

Mit dem Android-Emulator können Sie verschiedene Netzwerkbedingungen simulieren, während Anwendungen (einschließlich Webbrowser und hybride Webanwendungen) unter Android ausgeführt werden:

Android Emulator

Einstellungen für den Android-Emulator

Für iPhones kann Network Link Conditioner verwendet werden, um Bedingungen für beeinträchtigte Netzwerke zu simulieren (siehe oben).

An verschiedenen Standorten und in verschiedenen Netzwerken testen

Die Verbindungsleistung hängt vom Serverstandort und vom Netzwerktyp ab.

WebPagetest ist ein Onlinedienst, mit dem eine Reihe von Leistungstests für Ihre Website über eine Vielzahl von Netzwerken und Hoststandorten ausgeführt werden kann. Sie können Ihren Standort beispielsweise von einem Server in Indien in einem 2G-Netzwerk oder über Kabel von einer Stadt in den USA testen.

WebPagetest-Einstellungen

Wählen Sie einen Ort und in den erweiterten Einstellungen einen Verbindungstyp aus. Sie können Tests sogar mithilfe von Skripts (z. B. zum Anmelden bei einer Website) oder deren RESTful APIs automatisieren. So können Sie Konnektivitätstests in Build-Prozesse oder Leistungs-Logging einbinden.

OpenCensus unterstützt globale Proxys über GeoEdge und mit seinen benutzerdefinierten Regeln können Modem-Geschwindigkeiten simuliert werden:

Fieder-Proxy

Bei einem beeinträchtigten Netzwerk testen

Mit Software- und Hardware-Proxys können Sie problematische Bedingungen von Mobilfunknetzen wie Bandbreitendrosselung, Paketverzögerungen und zufälligen Paketverlust emulieren. Über einen gemeinsam genutzten Proxy oder ein beeinträchtigtes Netzwerk kann ein Entwicklerteam reale Netzwerktests in seinen Workflow einbinden.

Augmented Traffic Control (ATC) von Facebook ist eine BSD-lizenzierte Reihe von Anwendungen, mit denen Traffic gesteuert und beeinträchtigte Netzwerkbedingungen emuliert werden kann:

Facebook Augmented Traffic Control

Facebook hat sogar 2G-Dienstage eingeführt, um zu verstehen, wie Menschen mit 2G ihr Produkt nutzen. Dienstags wird den Mitarbeitern ein Pop-up mit der Option angezeigt, eine 2G-Verbindung zu simulieren.

Mit dem Charles-HTTP/HTTPS-Proxy kann die Bandbreite und die Latenz angepasst werden. Charles ist eine kommerzielle Software, aber es ist eine kostenlose Testversion verfügbar.

Bandbreiten- und Latenzeinstellungen für Charles-Proxy

Weitere Informationen zu Charles finden Sie unter codewithchris.com.

Mit unzuverlässigen Verbindungen und Lie-Fi umgehen

Was ist Lie-fi?

Der Begriff lie-fi geht auf das Jahr 2008 zurück, als Smartphones so aussahen, und bezieht sich auf Konnektivität, die nicht das ist, was sie scheint. Ihr Browser verhält sich dann so, als ob er eine Verbindung hätte, wenn er aus irgendeinem Grund keine Verbindung hat.

Eine falsch interpretierte Konnektivität kann zu Problemen führen, da der Browser (oder JavaScript) weiterhin versucht, Ressourcen abzurufen, anstatt auf ein vernünftiges Fallback zu verzichten. Lie-Fi kann sogar schlimmer sein als offline. Zumindest wenn ein Gerät definitiv offline ist, kann dein JavaScript angemessene Ausweichmaßnahmen ergreifen.

Lie-Fi wird mit großer Wahrscheinlichkeit zu einem größeren Problem, da immer mehr Menschen zu mobilen Breitbandnetzen wechseln. Aktuelle Daten zur US-Volkszählung zeigen, dass feste Breitbandverbindungen entfernt werden. Das folgende Diagramm zeigt die Nutzung des mobilen Internets zu Hause im Jahr 2015 im Vergleich zu 2013:

Das Diagramm aus US-Volkszählungsdaten zeigt, dass vor allem in Haushalten mit niedrigem Einkommen
kein fester Breitbandnetz zur Verfügung steht.

Zeitüberschreitungen bei instabiler Verbindung verwenden

In der Vergangenheit wurden hackige Methoden mit XHR verwendet, um die Konnektivität zu testen. Service Worker ermöglicht jedoch zuverlässigere Methoden zum Festlegen von Netzwerkzeitüberschreitungen. Dazu sind nur wenige Codezeilen nötig, um die Workbox zu nutzen:

workboxSW.router.registerRoute(
  '/path/to/image',
  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

Weitere Informationen zu Workbox finden Sie im Chrome Dev Summit von Jeff Posnicks Vortrag Workbox: Flexible PWA Libraries (in englischer Sprache).

Auch für die Fetch API wird eine Zeitüberschreitungsfunktion entwickelt. Die Streams API soll dabei helfen, die Inhaltsübermittlung zu optimieren und monolithische Anfragen zu vermeiden. Jake Archibald gibt unter Supercharging page Load (Seitenaufbau optimieren) weitere Informationen zum Umgang mit Lie-fi.

Feedback