améliorer les performances Web sur les appareils lents

Aprenda a asegurarse de que cada Nom d'utilisateur obtenga la mejor experiencia posible optimizando sus sitios para restricciones específicas de Matériel y red.

16 déc.2019

Les capacités des appareils et les connexions réseau varient considérablement. Les sites qui ravissent les utilisateurs d'appareils haut de gamme peuvent être
inutilisable en los de gama baja. Los sitios que se cargan sin problemas en redes rápidas pueden detenerse en redes lentas. Cualquier usuario puede experimentar un sitio la toile lento, por eso el desarrollo de soluciones de «talla única» no siempre funciona.

Dans son Présentation du Chrome Dev Summit, Addy Osmani de Google y Nate Schloss de Facebook exploran una solución a ese problema: un patrón para entregar páginas que se adapten mejor a una variedad de limitaciones de los usuarios. Ellos lo llaman charge adaptative.

Qu'est-ce que le chargement adaptatif?

Le chargement adaptatif implique de fournir différentes expériences à différents utilisateurs en fonction de leur réseau et des limitations matérielles, en particulier:

• Une expérience de base rapide pour tous les utilisateurs (y compris les appareils bas de gamme).

• Ajoutez progressivement des fonctionnalités haut de gamme exclusives, si le réseau et le matériel d'un utilisateur peuvent les gérer.

Al optimiser para restricciones específicas de hardware y red, permite que cada usuario obtenga la mejor experiencia posible para su dispositivo. Adaptar la experiencia a las limitaciones de los usuarios puede incluir:

• Il sert des images et des vidéos de mauvaise qualité sur des réseaux lents.

• Limitez la fréquence d'images des animations sur les appareils bas de gamme.

• Évitez les opérations coûteuses en calcul sur les appareils bas de gamme.

• Bloqueo de scripts de terceros en dispositivos más lentos.

• Carga de JavaScript no crítico para interactividad solo en CPU rápidas.

Comment implémenter le chargement adaptatif

Les signaux que vous pouvez utiliser pour le chargement adaptatif sont:

Hay dos lugares donde puede tomar una decisión sobre qué servir a los usuarios: el client et le serveur. En el cliente, tiene las API de JavaScript mencionadas anteriormente. En el servidor, puede utilizar suggestions de clients
pour obtenir des informations sur les capacités de l'appareil de l'utilisateur et le réseau auquel il est connecté.

Chargement adaptatif dans React

Utilitaires et crochets de chargement adaptatifs React est une suite pour l'écosystème React qui facilite l'adaptation de vos sites aux appareils bas de gamme. Il comprend:

• Les useNetworkStatus () crochet à adapter en fonction de l'état du réseau (lent-2g,
  2 g, 3gou 4g).

• Les useSaveData () crochet pour s'adapter en fonction des préférences de sauvegarde des données de l'utilisateur.

• Les useHardwareConcurrency () hook à adapter en fonction du nombre de cœurs de processeur CPU logiques dans la machine utilisateur.

• Les useMemoryStatus () crochet à adapter en fonction de la mémoire de l'appareil utilisateur (RAM).

Cada gancho acepta un argumento opcional para establecer el valor inicial. Esta opción es útil en dos escenarios: cuando el le navigateur del usuario no es compatible con la API relevante y para la representación del lado del servidor, donde puede usar los datos de sugerencias del cliente para establecer el valor inicial en el servidor. Por ejemplo, el
useNetworkStatus () hook peut utiliser la valeur initiale transmise par l'indicateur client pour le rendu côté serveur, et lorsqu'il est exécuté sur le client, il est mis à jour si le type effectif du réseau change.

Les crochets et utilitaires de chargement adaptatifs React sont implémentés à l'aide de l'API de la plate-forme Web (Informations sur le réseau,
Dispositif de mémoire
y Concurrence matérielle). Vous pouvez utiliser les mêmes API pour appliquer des concepts de chargement adaptatif à d'autres frameworks et bibliothèques, tels que
Angulaire,
Vue, et autres.

Charge adaptative en action

Esta sección explora demostraciones de cómo puede utilizar la carga adaptable y ejemplos del mundo real de sitios como Facebook, eBay, Tinder y otros.

Les Réagir le film démo montre comment adapter le service multimédia en fonction de l'état du réseau. C'est une application de recherche de films qui affiche des affiches, des résumés et des listes de distribution. En fonction du type de connexion effective de l'utilisateur, il sert des affiches de haute qualité sur des connexions rapides et des affiches de mauvaise qualité sur des connexions lentes.

Twitter a un mode d'économie de données conçu pour réduire la quantité de données utilisées. Dans ce mode, les images d'aperçu sont chargées en basse résolution et les grandes images ne sont chargées que lorsque vous appuyez sur l'aperçu. Avec cette option activée, les utilisateurs iOS et Android ont enregistré 50% sur l'utilisation des données d'image, et les utilisateurs Web ont enregistré 80%. Voici une réaction
manifestation
que usa el gancho Guardar datos para replicar la línea de tiempo de Twitter. Intente abrir sus DevTools Rapporter et observez la différence dans la quantité de données transférées lorsque vous faites défiler lorsque l'option Enregistrer les données est désactivée et lorsqu'elle est activée.

eBay active et désactive conditionnellement des fonctionnalités telles que le zoom lorsque les conditions matérielles ou réseau d'un utilisateur ne les prennent pas bien en charge. Vous pouvez y parvenir en utilisant le fractionnement et le chargement de code adaptatifs, un moyen de charger conditionnellement des composants plus interactifs ou d'exécuter des opérations plus lourdes en calcul sur des appareils haut de gamme, sans envoyer ces scripts aux utilisateurs sur des appareils plus lents. Regardez la vidéo sur 16 minutes où Addy montre ce modèle implémenté avec React.lazy () et Suspense dans un
Page de démonstration du produit eBay.

Tinder utilise une série de modèles de chargement adaptatifs sur son
la toile
y Application allégée para que la experiencia être rápida para todos. Si un usuario está en una red lenta o tiene el Ahorro de datos habilitado, deshabilita la reproducción automática de video, limita la búsqueda previa de rutas y limita la carga de la siguiente imagen en el carrusel para cargar imágenes una a la vez a medida que los usuarios deslizan el dedo. Después de implementar estas optimizaciones, han visto mejoras significativas en el recuento de deslizamientos promedio en países como Indonesia.

Téléchargement adaptatif sur Facebook

Un problème qui se pose dans le chargement adaptatif est le regroupement des appareils en classes haut de gamme et bas de gamme en fonction des signaux disponibles. Sur les appareils mobiles,
agent utilisateur (UA) string fournit le nom de l'appareil qui permet à Facebook d'utiliser les données accessibles au public sur les caractéristiques de l'appareil pour regrouper les appareils mobiles en classes. Cependant, sur les appareils de bureau, la seule information pertinente fournie par l'UA est le système d'exploitation de l'appareil.

Pour regrouper les appareils de bureau, Facebook enregistre des données sur le système d'exploitation, les cœurs de processeur (à partir de navigator.hardwareConcurrency) et RAM (navigator.deviceMemory) en su seguimiento del desempeño. Al observar las relaciones entre diferentes tipos de hardware y rendimiento, clasificaron los dispositivos en cinco categorías. Con las clases de hardware integradas en el monitoreo del rendimiento, obtienen una imagen más completa de cómo las gens usan los productos de Facebook según su dispositivo y pueden identificar las regresiones más fácilmente.

Regardez la vidéo sur 24 minutes, où Nate explique comment Facebook aborde le regroupement d'appareils et utilise le chargement adaptatif pour les animations et le chargement JavaScript.

En savoir plus sur la charge adaptative

Le chargement adaptatif consiste à concevoir vos sites en gardant à l'esprit l'inclusivité. Créez une expérience de base qui fonctionne parfaitement pour tout le monde, puis basculez ou superposez des fonctionnalités qui la rendent encore plus impressionnante si un utilisateur dispose de suffisamment de mémoire, de CPU ou d'un réseau rapide. Pour plus d'informations sur la charge adaptative, consultez le
Ville
et regardez la présentation du Chrome Dev Summit: