Optimiser les images en fonction du réseau et des contraintes de périphérique dans React

La technologie de connectivité réseau a subi des changements de secoue de la terre depuis la naissance d'Internet. Nous avons depuis longtemps des adieux à l'ère de l'accès à Internet Dial-up, et maintenant nous pouvons regarder des vidéos haute définition sur les réseaux mobiles avec des smartphones. Mais toutes les connexions du réseau mobile ne sont pas les mêmes - les réseaux de génération plus anciens (3G, 2G, etc.) dominent toujours, et près de la moitié des connexions mondiales appartiennent à ce type de réseau en 2020.

Malheureusement, le processus d'élimination des anciens réseaux est très lent, et de nombreuses personnes dans le monde sont toujours confrontées au problème du chargement lent des pages, qui rappelle les premiers jours de la popularité de l'Internet à domicile.

Les sites Web modernes sont devenus à forte intensité de ressources, avec beaucoup de photos et d'animations. Pour les visiteurs utilisant des dispositifs à basse performance et des connexions réseau instables, une page Web normale peut prendre une minute à charger complètement. Cela est principalement dû au fait que les développeurs ont tendance à prendre des décisions binaires lorsqu'ils traitent du matériel utilisateur et des conditions de réseau: les appareils appartiennent à la catégorie de bureau ou à la catégorie des smartphones; Le statut de connexion est en ligne ou hors ligne. En fait, l'environnement de l'utilisateur est souvent plus détaillé et complexe.

Pouvons-nous faire mieux?

Comment combler l'écart entre les utilisateurs qui utilisent des appareils bas de gamme et des connexions réseau instables? Tout d'abord, nous devons évaluer rapidement leur situation spécifique en examinant les deux propriétés suivantes:

• navigator.deviceMemory
• navigator.connection

Sur la base de cela, nous pouvons décider d'ajuster la qualité de l'image à fournir. Cependant, pour les sites Web et les applications JAMSTACK rendus du côté serveur, il y a un problème - les objets navigator et toute autre API de navigateur ne sont pas disponibles pendant la phase de rendu. Une façon courante de résoudre ce problème consiste à ajouter beaucoup de marqueurs d'image réactifs, mais cela apporte un point de douleur significatif - une mise à l'échelle inefficace. Les CDN d'image comme ImageEngine peuvent aider à éviter ce problème et d'autres pièges associés aux images réactives, car elle gère tout le levage de lourds en effectuant des ajustements intelligents instantanément automatiques aux ressources demandées.

En termes d'adaptation aux limitations du réseau utilisateur, le type de connexion peut être détecté et l'image CDN est invitée à modifier le taux de compression en fonction de la qualité de la connexion. Voici comment implémenter cela dans React:

 Importer React, {UseState, UseEffect} à partir de 'react'

const useConnectionType = (defaultConnectionType) => {

  const issupported = Navigator? .Connection? .EffectiveType
    ? vrai
    : FAUX

  const [ConnectionType, setNetWorkStatus] = UseState (
    émis
      ? Navigator.Connection.EffectiveType
      : DefaultConnectionType
  )

  useEFFECT (() => {
    if (émis) {
      const {connexion} = navigateur
      const updateconnectionType = () => {
        setNetWorkStatus (connexion.EffectiveType)
      }

      connection.addeventListener ('change', updateconnectionType)

      return () => {
        Connection.RemoveEventListener («Change», UpdateConnectionType)
      }
    }
  }, [])

  return [ConnectionType, setNetWorkStatus]
}

const imagecdnhost = 'images.foo.com'

fonction connectionAwareComponent () {

  const [ConnectionType] = useConnectionType ()

  Laissez CompressionLevel = 0

  switch (connectionType) {
    cas «lent-2g»:
      CompressionLevel = 65
      casser
    cas «2G»:
      CompressionLevel = 50
      casser
    cas «3G»:
      CompressionLevel = 30
      casser
    cas «4G»:
      compressionLevel = 0
      casser
  }

  Retour (
    <div>
      {/ * Utilisez des instructions dédiées pour appliquer la compression variable * /}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="Optimiser les images en fonction du réseau et des contraintes de périphérique dans React" >
    </div>
  )
}

Nous pouvons aller plus loin, fournir des images floues aux utilisateurs avec des réseaux très lents et offrir la possibilité de télécharger des versions de résolution plus élevée à la demande. Ou concevez un système de notation des performances et ajustez le contenu envoyé en fonction du système.

D'un autre côté, les utilisateurs utilisant une connexion 4G "à grande vitesse" ne signifie pas nécessairement qu'ils ne se soucient pas de l'enregistrement des données, car ils peuvent visiter le site Web dans un état d'itinérance. L'activation des invites des clients sur le site Web permettra au propriétaire du site de détecter la présence d'un indicateur de sauvegarde de données et de prendre les mesures nécessaires pour s'adapter aux préférences de l'utilisateur.

Raisons des images plus rapides

Le processeur moyen, la bonne quantité de mémoire et les connexions de bas niveau ne sont pas des limitations fictives. Ils posent un véritable défi d'expérience utilisateur qui pourrait affecter des centaines de millions d'utilisateurs à travers le monde. Certaines entreprises commencent à intégrer leurs produits dans une expérience inclusive: des services de streaming comme Netflix et Spotify ajustent la qualité de streaming en fonction de votre état de réseau, tandis que beaucoup d'autres sont dans les coulisses pour optimiser automatiquement l'image pour les utilisateurs.

Dans les zones sous-développées où Internet n'est pas encore populaire, ce n'est peut-être pas le marché cible. Pendant ce temps, si les utilisateurs des zones rurales des pays développés sont fournis avec une version complète du site Web, ils peuvent vivre une expérience désagréable. Nous pouvons ajuster le contenu envoyé / affiché à l'utilisateur de plus en plus avec quelques petits ajustements.

L'utilisation d'un CDN d'image comme ImageEngine peut simplifier le processus d'optimisation de l'image et répondre automatiquement aux invites client pour les restrictions réseau. Le résultat est une meilleure expérience pour les visiteurs liés au réseau et un flux de travail élégant pour les développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!