Google a réalisé une importe mise à jour dans le calcul des performances d'un site Internet, en introduisant de nouvelles métriques phares en mai 2020.
Ces métriques sont au nombre de 3 et ont les doux noms de :
- LCP
- FID
- CLS
Les points qui vont suivre vont être légèrement techniques, mais une bonne compréhension vous aidera à mieux appréhender les enjeux.
Que signifie LCP (Largest Contentful Paint) ?
Je n'ai pas trouvé de traduction littérale qui soit suffisamment parlante, alors je vais tâcher de paraphraser.
Il s'agit pour Google de calculer le temps de chargement global de l'objet le plus grand qui apparaît au-dessus de la ligne de flottaison.
Définition de la ligne de flottaison : view-port en anglais, il s'agit de toute la partie du site web qui est visible par l'internaute au chargement de la page. Donc pour résumer, toute la partie du haut, jusqu'en bas de la fenêtre.
Pour être concret : si une image se charge en haut de votre page et qu'il s'agit de l'objet le plus grand (en pixel) de la partie haute, c'est le temps de chargement de ce fichier qui va être regardé. L'objectif derrière cette métrique, c'est d'estimer la perception de la vitesse pour un internaute.
Ainsi, si votre serveur répond très vite, mais qu'une image énorme est chargée en début de page, votre LCP risque de ne pas être dans le vert. Google recommande à ce jour un LCP inférieur à 2,5 secondes.
Plan d'actions pour un LCP rapide :
- Vérifier que toutes les ressources de type images sont parfaitement optimisées en termes de poids
- En fonction du design de votre site, il peut être opportun de décaler vers le bas vos images importantes (comprendre : sous la ligne de flottaison) afin qu'elles ne soient pas prises en compte dans le calcul du LCP
- Optimiser ensuite la taille de chaque image, afin qu'elle ne soit pas plus grande que nécessaire.
- Optimiser le chargement des polices
- Optimiser le chargement de l'ensemble des ressources.
Google fournit 2 exemples assez parlant pour se figurer la situation.
Cas 1
Cas 2
Dans le cas 1 - plus facile à comprendre - l'image le plus grande dans le "view-port" est la photo des 3 candidats, à droite. C'est l'objet le plus grand, et il se charge en dernier. On comprend donc la dimension de "ressenti utilisateur" en termes de vitesse. Tout le contenu textuel est potentiellement chargé, il manque simplement l'image.
Dans le cas 2, l'objet le plus large est le paragraphe extrait de wikipedia. Il est plus grand que chaque petite image chargé après dans l'aperçu. Google va considérer donc que le LCP est calculé sur le temps de chargement du paragraphe, et non des autres images.
A noter : concernant les images, les fichiers type SVG ne sont pas pris en compte dans le LCP pour le moment.
Que signifie FID (First Input Delay) ?
Le First Input Delay est, s'il fallait résumer de manière relativement simpliste, le temps de réaction de votre site.
Au chargement de votre site web, si l'utilisateur réalise une action dessus, en particulier un clic ou une saisie au clavier, Google va estimer le temps de réaction du site.
La particularité de cette métrique, c'est qu'elle est totalement empirique. Autrement dit, ce n'est pas un simple crawler qui va la calculer, puisque ce n'est pas un véritable utilisateur.
Donc Google va s'appuyer sur les données recueillies par le Chrome User Experience Report (globalement, les statistiques remontées par les internautes à Google) pour en donner une estimation. C'est la raison pour laquelle, par exemple, vous n'aurez pas sa valeur dans le PageSpeed Insight dans la partie "Lab".
Google recommande un FID inférieur à 100ms.
Le lab va fournir une donnée dérivée, intitulée "Total Blocking Time" (TBT). C'est une estimation du temps pendant lequel la page "est bloquée" et ne peut pas répondre à une quelconque sollicitation de l'internaute.
Plan d'actions pour garantir un FID faible :
- Ne pas charger trop de fichiers en même temps (par exemple, fusionner les fichiers CSS si possible)
- Réduire globalement le nombre de requêtes réalisées par le navigateur
- Réduire le temps d'exécution des javascript
Que signifie CLS (Content Layout Shift) ?
Le CLS (Content Shift Layout) est la dernière métrique à date mise en place par Google. Cette statistique est également centrée sur l'utilisateur. Son objectif est le suivant :
Quantifier les décalages de design d'un site web au chargement dans la partie visible de la page. Il arrive parfois que, lorsqu'une page se charge, on voit un contenu, puis un objet nouveau apparaît (une image, un bouton...) qui décale ensuite ce contenu sur l'écran (parfois même pour le rendre invisible). Ce type de comportement est considéré comme négatif par Google en termes d'expérience utilisateur.
C'est ce type de comportement que le CLS quantifie et pour lequel il donne une valeur. Google fournit deux exemples caricaturaux :
Dans les 2 cas, le contenu "bouge" durant le chargement de la page. C'est ce type de comportement qu'il faut tenter d'éviter.
Un bon CLS a un score inférieur à 0,1.
Plan d'actions pour améliorer le CLS :
- Il est préférable, dans le code HTML, de donner des attributs de taille à votre image (type width / height). Cela évite au navigateur de faire le travail de "resize" et tout le monde sait à quoi s'en tenir au moment du chargement de la taille. Cela évite les images qui apparaissent trop grandes car le navigateur n'a pas laissé d'espace au chargement par exemple.
- Il faut éviter les changements design "autonomes", s'il n'y a pas eu d'intéraction avec l'utiisateur. Attention également aux animations qui peuvent modifier le design.
Conclusion
On l'aura remarqué, ces nouveaux indicateurs de performance utilisés dans les outils officiels de Google (PageSpeed en particulier) pour donner un score aux sites web ont une très forte dimension "Expérience utilisateur".
Nul ne sait à ce jour quel impact ces indicateurs auront sur l'algorithme des résultats de Google, mais on peut supposer qu'ils en auront un. L'enjeu de la vitesse telle qu'on l'a connu est certainement moins pressant car de nombreux sites ont su faire les investissements nécessaires. En revanche, Google considère qu'il y a des améliorations à faire au niveau de l'expérience semble-t-il.
Ces indicateurs ne sont pas les derniers que Google va mettre en place et nous pouvons nous attendre à de nouvelles métriques dans les prochains mois ou prochaines années.
