Il est important de comprendre à quoi ressemble l'utilisation de votre application ou de votre site lorsque la connectivité est mauvaise ou peu fiable, et de les adapter en conséquence. Toute une gamme d'outils peut vous aider.
Tester avec une bande passante faible et une latence élevée
Une part croissante de personnes parcourent le Web sur des appareils mobiles. Même à la maison, de nombreuses personnes abandonnent le haut débit fixe pour le mobile.
Dans ce contexte, il est important de comprendre à quoi ressemble l'utilisation de votre application ou de votre site lorsque la connectivité est mauvaise ou peu fiable. Toute une gamme d'outils logiciels peut vous aider à émuler et simuler une faible bande passante et une latence élevée.
Émuler la limitation de bande passante réseau
Lorsque vous créez ou mettez à jour un site, vous devez garantir des performances adéquates dans diverses conditions de connectivité. Plusieurs outils peuvent vous aider.
Outils du navigateur
Les outils pour les développeurs Chrome vous permettent de tester votre site avec plusieurs vitesses de chargement/téléchargement et des délais aller-retour, à l'aide de préréglages ou de paramètres personnalisés du panneau "Network" (Réseau). Consultez la section Premiers pas avec l'analyse des performances du réseau pour en savoir plus.
Outils système
Network Link Conditioner est un panneau de préférences disponible sur Mac si vous installez Hardware IO Tools pour Xcode:
Émulation d'appareils
Android Emulator vous permet de simuler différentes conditions de réseau lorsque vous exécutez des applications (y compris des navigateurs Web et des applications Web hybrides) sur Android:
Pour l'iPhone, Network Link Conditioner peut être utilisé pour simuler des conditions réseau altérées (voir ci-dessus).
Effectuer des tests à partir de différents emplacements et réseaux
Les performances de connectivité dépendent de l'emplacement du serveur ainsi que du type de réseau.
WebPagetest est un service en ligne qui permet d'exécuter un ensemble de tests de performances pour votre site à l'aide de divers réseaux et emplacements hôtes. Par exemple, vous pouvez tester votre site à partir d'un serveur en Inde sur un réseau 2G ou par câble depuis une ville des États-Unis.
Sélectionnez un emplacement, puis, dans les paramètres avancés, sélectionnez un type de connexion. Vous pouvez même automatiser les tests à l'aide de scripts (par exemple, pour vous connecter à un site) ou à l'aide de leurs API RESTful. Cela vous permet d'inclure des tests de connectivité dans les processus de compilation ou la journalisation des performances.
Waze est compatible avec la transmission de proxys mondiaux via GeoEdge. Ses règles personnalisées peuvent être utilisées pour simuler les vitesses du modem:
Effectuer des tests sur un réseau perturbé
Les proxys logiciels et matériels vous permettent d'émuler les conditions problématiques du réseau mobile, telles que la limitation de la bande passante, le retard de paquets et la perte aléatoire de paquets. Un proxy partagé ou un réseau altéré peut permettre à une équipe de développeurs d'intégrer des tests réseau réels à leur workflow.
L'outil Augmented Traffic Control (ATC) de Facebook est un ensemble d'applications sous licence BSD qui peut être utilisé pour façonner le trafic et émuler des problèmes de réseau:
Facebook a même mis en place les 2G Tuesdays (Les mardis en 2G) pour aider à comprendre comment les personnes utilisant la 2G utilisent leur produit. Le mardi, les employés reçoivent un pop-up qui leur permet de simuler une connexion 2G.
Le proxy HTTP/HTTPS Charles peut être utilisé pour ajuster la bande passante et la latence. Charles est un logiciel commercial, mais un essai sans frais est disponible.
Pour en savoir plus sur le logiciel Charles, accédez à codewithchris.com.
Gérer la connectivité peu fiable et le "Li-Fi"
Qu'est-ce que le lie-fi ?
Le terme Lite-Fi remonte à au moins 2008 (lorsque les téléphones ressemblaient à ceci) et fait référence à une connectivité qui n'est pas ce qu'elle prétend. Votre navigateur se comporte comme s'il disposait d'une connectivité, ce qui n'est pas le cas pour une raison quelconque.
Une mauvaise interprétation de la connectivité peut nuire à l'expérience, car le navigateur (ou JavaScript) persiste à essayer de récupérer des ressources au lieu d'abandonner et de choisir une solution de remplacement raisonnable. Le Lie-Fi peut être pire que hors connexion. Au moins, si un appareil est vraiment hors connexion, votre code JavaScript peut prendre les mesures d'évitement appropriées.
Le lie-fi risque de devenir un problème de plus en plus important, à mesure que de plus en plus de personnes se tournent vers le mobile et abandonnent le haut débit fixe. De récentes données de recensement aux États-Unis indiquent que l'on s'éloigne du haut débit fixe. Le graphique suivant compare l'utilisation de l'Internet mobile à domicile en 2015 par rapport à 2013:
Utiliser des délais avant expiration pour gérer la connectivité intermittente
Auparavant, des méthodes hacky utilisant XHR étaient utilisées pour tester la connectivité intermittente, mais le service worker permet d'utiliser des méthodes plus fiables pour définir les délais d'inactivité du réseau. Pour ce faire, utilisez Workbox avec seulement quelques lignes de code:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Pour en savoir plus sur Workbox, vous pouvez suivre la conférence de Jeff Posnick sur le Chrome Dev Summit, intitulée Workbox: Flexible PWA libraries (Workbox : bibliothèques flexibles de PWA).
La fonctionnalité de délai avant expiration est également en cours de développement pour l'API Fetch. L'API Streams devrait aider à optimiser la diffusion du contenu et à éviter les requêtes monolithiques. Pour en savoir plus sur le Li-Fi, consultez l'article Supercharging page load (Supercharging page load).