Qu’est-ce que la latence et comment l’améliorer ?


La latence – le délai entre un utilisateur faisant une demande sur une application Web et l’obtention d’une réponse – peut jouer un rôle majeur dans les performances de votre site Web.

Propriétaire du site apprenant ce qu'est la latence et comment la réduire sur son site

En le minimisant, vous pouvez vous assurer que la demande d’un utilisateur – qu’il s’agisse de vérifier sur votre site Web de commerce électronique ou de cliquer sur un lien interne – soit satisfaite le plus rapidement possible. Ceci est essentiel pour offrir une expérience utilisateur transparente sur votre site Web.

Dans cet article, nous discuterons quelle est la latence et Comment ça fonctionne. Ensuite, nous allons parcourir plusieurs façons de améliorer le vôtre. Commençons.

Accélérez votre site Web avec le CDN intégré de HubSpot

La latence peut être mesurée de deux manières. Le premier est le temps d’aller-retour (RTT), ou le temps nécessaire à la requête pour se rendre du navigateur au serveur et vice-versa. Le second est le temps jusqu’au premier octet (TTFB), ou la durée entre l’envoi d’une requête au serveur par le navigateur et la réception de son premier octet de données.

La latence associée à une page HTML de base ou à un autre élément unique peut sembler insignifiante. Mais la latence associée à un site Web peut avoir un impact significatif sur l’expérience utilisateur car elle implique généralement plusieurs demandes de pages HTML ainsi que de CSS, de scripts et de fichiers multimédias.

Qu’est-ce qui cause la latence ?

La principale cause de latence est la distance. Plus la distance entre le navigateur qui fait la demande et le serveur qui répond à cette demande est longue, plus il faudra de temps pour que les données demandées voyagent et reviennent.

C’est pourquoi les visiteurs du site Web aux États-Unis obtiendront des réponses d’un centre de données à Council Bluffs, Iowa (l’un des Emplacements des centres de données de SiteGround) plus tôt que les visiteurs du site Web en Europe, par exemple.

Considérez le scénario suivant : il faut 800 ms à un navigateur pour envoyer une requête au serveur et 900 ms à ce navigateur pour recevoir une réponse. Dans ce cas, la latence serait de 1,7 secondes.

ce qui cause la latence : calcul du temps nécessaire pour que les données parcourent la distance entre le navigateur qui envoie une demande et sa réception en 1,7 seconde

Source des images

Les autres causes de latence sont la taille des ressources demandées et les problèmes des utilisateurs finaux. Par exemple, si un utilisateur demande une page Web contenant de nombreuses images, des fichiers CSS et JS, ou du contenu provenant de plusieurs sites Web tiers, le serveur mettra plus de temps à répondre. Ou un utilisateur peut utiliser un appareil avec peu de mémoire, une mauvaise connexion Internet ou un autre problème qui augmente le délai.

Qu’est-ce qu’une bonne latence ?

Étant donné que la latence est le temps nécessaire à une requête pour effectuer un aller-retour entre le navigateur et le serveur, elle ne peut pas être nulle. Mais idéalement, ce sera aussi proche de zéro que possible.

Alors qu’une bonne latence, comme un bon taux de rebond, est relatif, tout ce qui est inférieur à 100 millisecondes est généralement acceptable. La plage optimale est encore plus basse, entre 20 et 40 millisecondes.

Comment fonctionne la latence ?

La latence est le temps qu’il faut entre le moment où un utilisateur fait une demande et le moment où il reçoit une réponse. Une fois qu’un utilisateur a fait une demande, plusieurs étapes doivent être franchies avant qu’il n’obtienne une réponse.

Prenons l’exemple suivant. Supposons qu’un utilisateur navigue sur un site Web de commerce électronique et clique sur une catégorie. Pour afficher les éléments de cette catégorie sur le navigateur de l’utilisateur, procédez comme suit :

  1. L’utilisateur clique sur la catégorie.
  2. Le navigateur de l’utilisateur envoie une requête au serveur du site de commerce électronique.
  3. La demande est acheminée vers le serveur du site, avec toutes les informations nécessaires. La transmission de ces informations prend du temps. Plus il y a d’informations envoyées, plus il faut de temps pour les transmettre.
  4. Le serveur reçoit la requête.
  5. Le serveur accepte ou rejette la demande avant de la traiter. Chacune de ces étapes prend du temps. La durée dépend de la capacité de traitement du serveur et de la quantité d’informations traitées.
  6. Le serveur envoie une réponse à l’utilisateur final avec les informations nécessaires relatives à sa demande.
  7. Le navigateur de l’utilisateur reçoit la réponse et affiche la catégorie du produit.

Les étapes 1 à 4 représentent la première partie du cycle de latence. Les étapes 5 à 7 représentent la deuxième partie. Pour obtenir la latence totale résultant de la demande, vous additionnez tous les incréments de temps, à partir du moment où l’utilisateur clique sur la catégorie jusqu’au moment où il voit ces produits.

Pourquoi améliorer la latence ?

La vitesse de la page est essentielle à la expérience utilisateur. À tel point qu’en 2010, Google a annoncé que la vitesse de la page était un facteur de classement pour la recherche. Et bien qu’ils n’aient pas donné de chiffre exact, ils ont déclaré que leur objectif était inférieur à une demi-seconde.

Bien qu’il puisse sembler difficile d’atteindre cet objectif, il existe plusieurs façons d’optimiser la vitesse de votre site Web. Un moyen majeur consiste à améliorer votre latence.

Vous ne pouvez pas éliminer complètement la latence, mais vous pouvez la minimiser. Jetons un coup d’œil à certaines mesures que vous pouvez prendre pour minimiser la latence ci-dessous.

Bien que l’utilisateur puisse prendre certaines mesures pour réduire la latence de son côté, nous nous concentrerons exclusivement sur les solutions côté serveur ci-dessous.

1. Utilisez un CDN.

Étant donné que la latence est liée à la distance entre un navigateur et un serveur, vous pouvez réduire la latence en rapprochant les deux. Bien que vous ne puissiez pas littéralement déraciner l’emplacement de votre serveur et le rapprocher de chaque utilisateur, vous pouvez utiliser un réseau de distribution de contenu (CDN).

Un CDN est un système distribué de serveurs conçu pour fournir le contenu Web le plus rapidement possible aux visiteurs, où qu’ils se trouvent dans le monde. Avec un CDN, vous n’avez pas besoin de compter sur un seul serveur pour envoyer du contenu partout dans le monde. Au lieu de cela, le CDN exploitera différents serveurs du réseau les plus proches de chaque visiteur unique pour fournir les actifs demandés.

Une fois que le serveur le plus proche de l’utilisateur fournit et affiche le contenu demandé, ce serveur fait une copie de ces actifs Web. Lorsqu’un autre visiteur dans la même partie du monde tente d’accéder à ce contenu, le CDN peut rediriger la demande du serveur d’origine vers le serveur le plus proche, et ce serveur peut fournir le contenu mis en cache beaucoup plus rapidement car il a moins de distance pour voyage. Voici une illustration :

CDN puise dans le réseau pour fournir du contenu à partir du serveur le plus proche et met en cache le contenu pour améliorer la latence

Source des images

Il existe deux façons d’utiliser un CDN. Vous pouvez en acheter un auprès d’un fournisseur CDN, comme Cloudflare. Ou vous pouvez choisir une plate-forme de création de site Web avec un CDN intégré, comme Centre de gestion de contenu.

2. Minimisez la taille des fichiers CSS et Javascript.

La plupart des pages Web contiendront une combinaison de HTML, CSS et Javascript. Le problème est que chaque fois qu’un visiteur charge une page, des fichiers CSS et JavaScript doivent être envoyés du serveur au navigateur. Cela signifie plus de requêtes HTTP, ce qui peut augmenter considérablement la latence. Bien que vous ne puissiez pas supprimer le CSS et le Javascript de vos pages Web, vous pouvez réduire la taille de ces fichiers. Plus les fichiers sont petits, plus ils voyageront rapidement du serveur au navigateur.

La bonne nouvelle est que vous pouvez automatiser ce processus avec un minificateur comme le Closure Compiler Service de Google. Ajoutez simplement votre code dans le compilateur, cliquez sur le bouton “Compiler” et téléchargez le fichier minifié.

Minification des fichiers CSS et JavaScript avec le Closure Compiler Service pour améliorer la latence

Source des images

3. Compressez vos images.

L’optimisation de vos images est une autre façon de réduisez les requêtes HTTP de votre site Web. Idéalement, vous devriez réduire la taille du fichier de chaque image à moins de 100 Ko. Vous n’avez pas besoin de réduire autant si cela affecte la qualité de l’image, mais essayez de la maintenir aussi proche que possible de 100 Ko.

Vous pouvez télécharger, redimensionner et compresser vos images une par une à l’aide d’un outil comme Squoosh ou tout à la fois avec un outil comme TinyPNG.

Compresser et redimensionner une image à l'aide de Squoosh pour améliorer la latence

4. Réduisez le nombre de ressources bloquant le rendu.

Lors du chargement d’une page, les navigateurs téléchargent et analysent chaque ressource – y compris les images, le CSS, etc. – avant de les rendre à l’utilisateur frontal. Certaines ressources telles que les polices et les fichiers JavaScript sont jugées critiques par le navigateur, il arrête donc de télécharger et d’analyser d’autres parties de la page jusqu’à ce qu’elles soient traitées.

Ces ressources sont appelées “ressources bloquant le rendu” et peuvent considérablement ralentir votre site. Techniquement, réduire la quantité de ressources bloquant le rendu sur votre site ne réduira pas la latence, mais cela améliorera la perception du temps de chargement sur votre site.

Minimiser votre latence

Minimiser la latence peut avoir un impact majeur sur les performances de votre site Web et sur l’expérience utilisateur. Une latence plus faible permet de s’assurer que les utilisateurs reçoivent les ressources qu’ils ont demandées aussi rapidement que possible, afin qu’ils aient plus de raisons de revenir encore et encore sur votre site.

Note de l’éditeur : cet article a été initialement publié en décembre 2020 et a été mis à jour pour être complet.

Nouvelle incitation à l'action



Vous pouvez lire l’article original (en Anglais) sur https://blog.hubspot.com/website/what-is-latency

Leave a Reply

Your email address will not be published. Required fields are marked *