Il existe de très nombreux facteurs qui peuvent rendre une page Web lente à télécharger et par conséquent à s’afficher sur les écrans des mobiles ou des ordinateurs de bureau.
Certains de ces facteurs sont très connus comme le poids des pages elles-mêmes ainsi que celui des médias qui la compose, les images principalement.
D’autres facteurs peuvent également entrer en ligne de compte, qui sont moins connus ou moins évidents. Nous allons nous intéresser à trois temps spécifiques qui ont une très forte influence sur le téléchargement d’une page : le temps de génération, les temps de latence et le temps de téléchargement.
Les principaux temps
Au-delà des trois temps que nous allons étudier plus loin, il existe plusieurs autres temps qu’il faut prendre en considération pour mesurer les performances Web :
- Les temps de latence
- Le Time To First Byte
- Le Time To Last Byte
- Le Time To First Paint
- Le temps de génération
- Le DOM content loaded
- Le temps de rendition
- Le temps de téléchargement
- LCP, FID, CLS
Ces temps contribuent bien entendu à l’UX mais également pour certains au SEO, car ils sont pris en considération dans l’algorithme de Google, soit directement, soit en influant sur les demandes d’explorations de votre site Web.
Le temps de génération
Définition du temps de génération
Le temps de génération d’une page Web est le temps nécessaire pour que tous les éléments qui composent la page soient disponibles.
Les principaux éléments qui influencent le temps de génération
Il s’agit d’éléments externes à la page. Les services utilisés par la page auront une grande influence sur son temps de génération. Comme par exemple les ressources disponibles en base de données. Plus les requêtes seront complexes, plus elles seront nombreuses plus elles allongeront le temps de génération de la page. Il en est de même pour les polices du document, si elles doivent-être chargées à partir de services externes comme Google Fonts par exemple.
Autre point noir dans le temps de génération, c’est l’utilisation d’un moteur de recherche interne. En effet, les pages de résultats auront un temps de génération qui peut être très long en raison des multiples tables de base de données qu’il est nécessaire d’interroger pour pouvoir obtenir les informations nécessaires à la génération du contenu de la page.
Comment améliorer le temps de génération ?
L’utilisation d’un reverse proxy est la meilleure réponse pour améliorer le temps de génération. Bien que cela ne soit pas sa seule utilité, le reverse proxy permet de traiter par le biais d’un cache les requêtes les plus courantes et répétitives sans avoir recours aux différents serveurs. Sur les structures importantes avec de multiples serveurs frontaux, la fonction de load balancing du reverse proxy permet une meilleure répartition de la charge des serveurs et cela a pour effet d’améliorer le temps de génération.
Les temps de latence
Définition des temps de latence
Les temps de latence correspondent aux différents temps perdus par l’utilisateur quand il appelle une page. Ces temps sont principalement le TTFB, le temps de rendition, le DOM content loaded (DCL).
Dans notre contexte, le Time To First Byte permet de mesurer le temps de réactivité d’un serveur Web. Il s’agit du temps écoulé entre la requête et le premier octet reçu par le navigateur client en provenance du serveur. Ce temps inclut donc également la latence du réseau.
Le temps de rendition (rendering time) est mesuré par Google dans son outil PageSpeed Insights. Ce temps est utilisé comme critère de classement dans l’algorithme de Google, cependant son impact est difficilement mesurable tellement il est négligeable. L’impact sur l’UX est par contre non négligeable.
DOM content loaded signifie que tout le HTML a été reçu et analysé par le navigateur dans l’arbre DOM qui peut maintenant être manipulé. Cela se produit avant que la page n’ait été entièrement rendue (les ressources externes peuvent ne pas avoir été entièrement téléchargées – y compris les images, CSS, JavaScript et toute autre ressource liée).
Comment améliorer les temps de latence ?
Avant d’améliorer les temps de latence, il faut bien entendu les identifier avec précision. Il existe différents outils, par exemple Dareboost dont la version gratuite est amplement suffisante pour se faire une très bonne idée des points améliorables. GTmetrix est également une alternative intéressante.
Dareboost donne des mesures très intéressantes comme LCP, TBT, CLS, TTFB, SI et en place d’une série de tests propriétaire, il permet d’avoir une timeline sous forme de waterfall très riche en informations.
Cette timeline permet de connaître exactement tous les temps de l’ensemble des requêtes nécessaires à la génération d’une page ainsi que les erreurs détectées s’il y en a.
Très souvent, 2 ou 3 corrections permettent de gagner 80% du temps de latence. Il est inutile et peu intéressant de s’attacher à tout vouloir corriger. D’autant plus que nombre de problèmes peuvent dépendre de facteurs circonstanciels ou de différents cas d’utilisation.
Outre les différentes possibilités suggérées ci-dessus ainsi que par l’outil PageSpeed Insights de Google, une bonne solution est l’installation d’un CDN et de vérifier qu’il est bien actif sur les pages concernées par des temps de latence importants.
Le temps de téléchargement
Définition du temps de téléchargement
Le temps de téléchargement est le temps nécessaire pour que le navigateur client reçoive toutes les informations attachées à une page et qu’il les ait récupérées.
Comment améliorer le temps de téléchargement ?
En plus des problématiques propres au réseau internet et la qualité de la connexion au réseau du client Web, il y a un point particulier à surveiller : la compression GZIP. Est-elle activée sur l’ensemble des pages du site Web ?
Pour le vérifier, il suffit de lire le HTTP Response Header de la page appelée. Pour cela, vous pouvez utiliser (par exemple, il y en a d’autres) l’outil de GiftOfSpeed disponible ici https://bit.ly/neper-testgzip
L’ensemble des réglages proposés ici devraient permettre d’améliorer sensiblement les Web Perf de vos pages, et de fait, l’UX de vos visiteurs et de façon moins perceptible, et cependant réelle, le SEO.