Découvrez comment vous assurer que chaque utilisateur bénéficie de la meilleure expérience possible en optimisant vos sites en fonction des contraintes matérielles et réseau spécifiques.
Les capacités des appareils et les connexions réseau varient beaucoup. Les sites qui séduisent les utilisateurs d'appareils haut de gamme peuvent être inutilisables sur ceux d'entrée de gamme. Les sites qui se chargent correctement sur les réseaux rapides peuvent s'arrêter sur les réseaux lents. Tout utilisateur peut connaître un site Web lent. C'est pourquoi le développement de solutions "taille unique" ne fonctionne pas toujours.
Dans leur conférence sur le Chrome Dev Summit, Addy Osmani de Google et Nate Schloss de Facebook explorent une solution à ce problème : un modèle de création de pages qui répondent mieux à diverses contraintes utilisateur. C'est ce que nous appelons le chargement adaptatif.
Qu'est-ce que le chargement adaptatif ?
Le chargement adaptatif consiste à proposer différentes expériences à différents utilisateurs en fonction de leurs contraintes réseau et matérielles, en particulier:
Une expérience de base rapide pour tous les utilisateurs (y compris les appareils d'entrée de gamme).
Ajout progressif de fonctionnalités haut de gamme uniquement, à condition que le réseau et le matériel d'un utilisateur puissent les gérer.
En optimisant les contraintes matérielles et réseau, vous permettez à chaque utilisateur de bénéficier de la meilleure expérience possible sur son appareil. Adapter l'expérience aux contraintes des utilisateurs peut inclure:
Diffusion d'images et de vidéos de mauvaise qualité sur des réseaux lents
Limitation de la fréquence d'images des animations sur les appareils bas de gamme
Éviter les opérations gourmandes en ressources de calcul sur les appareils bas de gamme.
Blocage des scripts tiers sur les appareils lents
Chargement de code JavaScript non critique pour l'interactivité uniquement sur les processeurs rapides.
Navigateurs compatibles et implémenter le chargement adaptatif
Les signaux que vous pouvez utiliser pour le chargement adaptatif sont listés ci-dessous. La compatibilité avec les navigateurs est également incluse pour chaque signal:
Navigator.deviceMemory
La propriété navigator.deviceMemory permet de réduire la consommation de mémoire sur les appareils d'entrée de gamme.
Navigator.hardwareConcurrency
La propriété navigator.hardwareConcurrency correspond au nombre de cœurs de processeur. Elle permet de limiter l'exécution de JavaScript coûteuse et de réduire la logique d'utilisation intensive du processeur lorsqu'un appareil ne peut pas la gérer correctement.
NetworkInformation.effectiveType
La propriété navigator.connection.effectiveType permet d'affiner le transfert de données afin d'utiliser moins de bande passante.
NetworkInformation.saveData
La propriété navigator.connection.saveData permet d'exploiter les préférences de l'utilisateur concernant l'économiseur de données.
Vous pouvez prendre une décision sur les éléments à diffuser auprès des utilisateurs à deux endroits : le client et le serveur. Sur le client, vous avez les API JavaScript mentionnées ci-dessus. Sur le serveur, vous pouvez utiliser les suggestions du client pour obtenir des informations sur les fonctionnalités de l'appareil de l'utilisateur et sur le réseau auquel il est connecté.
Chargement adaptatif dans React
La suite de crochets et utilitaires de chargement adaptatif React s'adresse à l'écosystème React et facilite l'adaptation de vos sites aux appareils d'entrée de gamme. Voici les sujets abordés :
Le hook
useNetworkStatus()pour l'adaptation en fonction de l'état du réseau (slow-2g,2g,3gou4g)Le hook
useSaveData()pour l'adaptation en fonction des préférences de l'économiseur de données de l'utilisateur.Hook
useHardwareConcurrency()pour l'adaptation en fonction du nombre de cœurs de processeur logiques sur l'appareil de l'utilisateur.Le hook
useMemoryStatus()pour l'adaptation en fonction de la mémoire (RAM) de l'appareil de l'utilisateur.
Chaque hook accepte un argument facultatif pour définir la valeur initiale. Cette option est utile dans deux cas de figure: lorsque le navigateur de l'utilisateur n'est pas compatible avec l'API appropriée, et pour le rendu côté serveur, où vous pouvez utiliser les données d'indication du client pour définir la valeur initiale sur le serveur. Par exemple, le hook useNetworkStatus() peut utiliser la valeur initiale transmise à partir de l'indice client pour le rendu côté serveur et, lorsqu'il est exécuté sur le client, se mettre à jour si le type effectif du réseau change.
Les hooks et les utilitaires de chargement adaptatif React sont implémentés à l'aide des API de la plate-forme Web (informations sur le réseau, mémoire de l'appareil et simultanéité matérielle). Vous pouvez utiliser les mêmes API pour appliquer les concepts de chargement adaptatif à d'autres frameworks et bibliothèques, tels que Angular et Vue.
Le chargement adaptatif en action
Cette section présente des démonstrations expliquant comment utiliser le chargement adaptatif, ainsi que des exemples concrets provenant de sites tels que Facebook, eBay, Tinder, etc.
La démonstration de React Movie montre comment adapter la diffusion de contenus multimédias en fonction de l'état du réseau. Il s'agit d'une application permettant de parcourir des films. Elle présente des affiches, des résumés et des listes de diffusion. En fonction du type de connexion efficace de l'utilisateur, il diffuse des affiches de haute qualité sur les connexions rapides et des affiches de faible qualité sur les connexions lentes.
Twitter dispose d'un mode Économiseur de données conçu pour réduire la quantité de données utilisées. Dans ce mode, les images d'aperçu ne se chargent en basse résolution que lorsque vous appuyez sur l'aperçu. Lorsque cette option est activée, les utilisateurs d'iOS et Android ont économisé 50% de la consommation de données à partir des images, et les utilisateurs du Web ont économisé 80%. Voici une démonstration React qui utilise le hook "Save Data" pour reproduire la timeline de Twitter. Ouvrez le panneau Network des outils de développement et examinez la différence entre la quantité de données transférées lorsque vous faites défiler l'écran lorsque l'option "Enregistrer les données" est désactivée ou lorsqu'elle est activée.
eBay active et désactive de manière conditionnelle des fonctionnalités telles que le zoom lorsque l'état du matériel ou du réseau d'un utilisateur ne les prend pas bien en charge. Vous pouvez y parvenir grâce à la division de code adaptative et au chargement de code, qui permettent de charger de manière conditionnelle des composants plus interactifs ou d'exécuter des opérations plus gourmandes en ressources de calcul sur les appareils haut de gamme, sans envoyer ces scripts aux utilisateurs d'appareils plus lents. Regardez la vidéo de 16 minutes où Addy présente ce schéma implémenté avec React.lazy() et Suspense sur une page de démonstration d'un produit eBay.
Tinder utilise un certain nombre de modèles de chargement adaptatif dans son application Web et son application Lite afin que l'expérience reste rapide pour tous. Si un utilisateur se trouve sur un réseau lent ou a activé l'économiseur de données, il désactive la lecture automatique des vidéos, limite le préchargement des routes et limite le chargement de l'image suivante dans le carrousel au chargement des images une par une lorsque l'utilisateur balaie l'écran. Après avoir implémenté ces optimisations, l'entreprise a constaté des améliorations significatives du nombre moyen de balayages dans des pays tels que l'Indonésie.
Chargement adaptatif sur Facebook
Un problème qui se pose lors du chargement adaptatif est le regroupement des appareils en classes de gamme supérieure et inférieure en fonction des signaux disponibles. Sur les appareils mobiles, la chaîne user-agent (UA) fournit le nom de l'appareil, ce qui permet à Facebook d'utiliser des données accessibles au public sur les caractéristiques de l'appareil pour regrouper les appareils mobiles en classes. Toutefois, sur les ordinateurs, les seules informations pertinentes fournies par UA sont le système d'exploitation de l'appareil.
Pour regrouper les ordinateurs, Facebook enregistre les données sur le système d'exploitation, les cœurs de processeur (à partir de navigator.hardwareConcurrency) et la mémoire RAM (navigator.deviceMemory) dans la surveillance des performances. En examinant les relations entre différents types de matériel et de performances, elle a classé les appareils en cinq catégories. Les classes matérielles sont intégrées à la surveillance des performances, ce qui leur permet d'obtenir une vision plus complète de la façon dont les utilisateurs utilisent les produits Facebook en fonction de leur appareil et d'identifier plus facilement les régressions.
Regardez la vidéo 24 minutes, dans laquelle Nate explique comment Facebook aborde le regroupement d'appareils et utilise le chargement adaptatif pour les animations et le chargement de JavaScript.
En savoir plus sur le chargement adaptatif
Le chargement adaptatif consiste à concevoir vos sites en tenant compte de l'inclusivité. Créez une expérience de base qui convient à tous, puis activez ou superposez des fonctionnalités qui le rendent encore plus intéressant si un utilisateur dispose de suffisamment de mémoire, de processeurs ou d'un réseau rapide. Pour en savoir plus sur le chargement adaptatif, consultez les démonstrations disponibles et regardez la vidéo du sommet des développeurs Chrome: