Guide de préparation à l'évaluation

2.1.2 Comprendre les concepts de bande passante faible et de latence élevée

Il est important de savoir à quoi ressemble l'expérience utilisateur sur votre site ou votre application lorsque la connectivité est mauvaise ou peu fiable, et d'adapter le développement en fonction. Toute une gamme d'outils peut vous y aider.

Tester la bande passante faible et la latence élevée

De plus en plus de personnes parcourent le Web sur des appareils mobiles. Même à la maison, les dispositifs fixes à haut débit sont souvent abandonnés au profit des mobiles.

Il est donc important dans ce contexte de savoir à quoi ressemble l'expérience utilisateur sur votre site ou votre application lorsque la connectivité est mauvaise ou peu fiable. Toute une gamme d'outils logiciels peuvent vous aider à émuler et à simuler une expérience utilisateur avec une faible bande passante et une latence élevée.

Émuler le ralentissement du réseau

Lorsque vous développez un site ou que vous le mettez à jour, vous devez vous assurer de son efficacité dans différentes conditions de connectivité. De nombreux outils peuvent vous y aider.

Outils navigateur

L'outil Chrome DevTools vous permet de tester votre site en appliquant différents préréglages ou paramètres personnalisés à partir du panneau Chrome DevTools Network : vitesses de chargement/téléchargement et temps d'aller-retour.

Outils système

Network Link Conditioner est un panneau de préférence disponible sur Mac lorsque vous installez l'outil Hardware IO Tools pour Xcode (sachez que vous devez disposer d'un ID de connexion Apple) :

Émulation d'appareils

L'outil Android Emulator vous permet de tester l'exécution d'applications sur Android (y compris des navigateurs Web et des applications Web hybrides) en simulant différentes capacités de réseau :

Network Link Conditioner peut être utilisé pour simuler des capacités de réseau ralenties pour les iPhone (voir ci-dessus).

Tester à partir de différents emplacements et réseaux

La qualité de la connectivité dépend de l'emplacement du serveur et du type de réseau.

Le service en ligne WebPagetest vous permet de faire passer une série de tests de performances à votre site à l'aide de différents réseaux et emplacements hôtes. Vous pouvez par exemple tester la navigation sur votre site à partir d'un serveur en Inde sur un réseau 2G, ou via une connexion câblée dans une ville des États-Unis.

Sélectionnez un emplacement géographique. Ensuite, dans les paramètres avancés, choisissez un type de connexion. Vous pouvez même automatiser les tests à l'aide des scripts (par exemple, pour la connexion à un site) ou des API RESTful. Vous pouvez ainsi inclure les tests de connectivité dans les processus de développement ou la consignation des performances.

Fiddler est compatible avec les serveurs proxy Global via GeoEdge. Il vous permet d'utiliser des règles personnalisées pour simuler des vitesses de modem :

Tester sur un réseau ralenti

Les proxys logiciels et matériels vous permettent d'émuler des réseaux mobiles problématiques : ralentissement de la bande passante, retard des paquets et perte aléatoire des paquets. En utilisant un proxy partagé ou un réseau ralenti, une équipe de développeurs peut intégrer des tests réseau concrets à leur flux de travail.

L'outil Augmented Traffic Control (ATC) de Facebook est un ensemble d'applications sous licence BSD qui peut être utilisé pour générer du trafic et émuler des capacités de réseau ralenties :

Facebook a même mis en place le mardi en 2G afin que les employés se rendent compte de l'expérience utilisateur offerte avec une connexion 2G. Ainsi, tous les mardis, les employés reçoivent une notification à l'écran qui leur propose de simuler une connexion 2G.

Le proxy HTTP/HTTPS Charles peut être utilisé pour ajuster la bande passante et la latence. Il s'agit d'un logiciel commercial, mais une version d'essai gratuite 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 Li-Fi ?

Le terme "Li-Fi" date de 2008 au moins (quand les téléphones ressemblaient à cela) et fait référence à une connectivité qui n'est pas ce qu'elle prétend être. Votre navigateur se comporte comme s'il disposait d'une connectivité, et pourtant, pour une raison quelconque, il n'en a pas.

Une mauvaise interprétation de la connectivité nuit grandement à l'expérience utilisateur, car le navigateur (ou JavaScript) persiste à essayer de récupérer des ressources au lieu d'abandonner et d'opter pour une solution sensée. De fait, le Li-Fi peut être pire que le mode hors connexion : au moins, si un appareil est clairement hors connexion, JavaScript peut entreprendre une manœuvre d'évitement appropriée.

Le Li-Fi risque de devenir un problème de plus en plus important à mesure que les internautes abandonnent la connexion haut débit fixe pour se tourner vers le mobile. De récentes données de recensement aux États-Unis ont montré que de moins en moins d'internautes utilisaient la connexion haut débit fixe. Le graphique suivant compare l'utilisation domestique de l'Internet mobile en 2013 et 2015 :

Utiliser les délais d'inactivité pour gérer la connectivité intermittente

Auparavant, on faisait appel à des méthodes bien connues utilisant le XHR pour tester la connectivité intermittente. Cependant, à l'heure actuelle, un service worker permet d'avoir recours à des méthodes plus fiables pour définir les délais d'inactivité du réseau. Jeff Posnick explique comment gérer la connectivité intermittente à l'aide des délais d'inactivité sw-toolbox dans sa vidéo Instant Loading with Service Workers :

toolbox.router.get(
  '/path/to/image',
  toolbox.networkFirst,
  {networkTimeoutSeconds: 3}
);

Une option de délai d'inactivité est également prévue pour l'API Fetch. De plus, l'API Streams devrait aider à optimiser la diffusion du contenu et éviter les demandes monolithiques. Pour en savoir plus sur le Li-Fi, écoutez les explications de Jake Archibald dans la vidéo Supercharging page load.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?