Core Web Vitals : zoom sur l'indicateur FID

Le Page Experience est l'un des derniers projets de Google en matière d'optimisation des pages web. À travers ce nouvel algorithme, le géant californien a pour ambition de rendre le référencement naturel indissociable de l'expérience utilisateur. Les Core Web Vitals (LCP, FDI, CLS), nouveaux facteurs ranking SEO, sont les fers de lance de cette révolution. Ces indicateurs de performance dont la mise en activité officielle était annoncée entre mai 2021 et juin 2021 seront désormais incontournables.

La semaine dernière, nous avons analysé l'indicateur CLS. Aujourd'hui, nous nous intéressons de près à un autre de ces KPI essentiels : le FID. De son appréciation à son optimisation, en passant par son fonctionnement et ses outils de mesure, nous scrutons à la loupe.

Qu'est-ce que le FID ?

Le FID (First Delay Input) est une métrique aussi importante pour l'utilisateur que pour le site. Découvrons cet indicateur à la fois centré utilisateur et révélateur de l'état de santé des sites web.

Définition du First Delay Input

Le FID est un indicateur qui évalue l'interaction entre l'utilisateur et le site internet. Il mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page et celui où le navigateur lui répond.

Lorsqu'un internaute arrive sur un site, il initie toujours une action (appuyer un bouton, cliquer sur un lien interne…) pour interagir. La mission du FID est donc de mesurer la réactivité des sites internet pour en améliorer le temps de réponse, optimiser l'affichage et offrir une expérience utilisateur de qualité aux internautes.

Qu'est-ce qu'un bon score FID ?

Les algorithmes de Google considèrent qu'une page web offre une bonne expérience utilisateur lorsque son score FID est inférieur à 100 millisecondes. Cela signifie que votre site doit être capable de réagir à la première action d'un visiteur en moins de 100 millisecondes. Bien que le 75e de centile soit la norme pour les autres Core Web Vitals (CLS et LCP), Google recommande vivement un test de vitesse sur la base des 95e à 99e centiles (desktops et site mobiles).

Comment optimiser le FID ?

Pour comprendre comment améliorer le FID, il faut comprendre comment s'exécute le code JavaScript. Le navigateur exécute le code JavaScript de manière séquentielle. C'est-à-dire qu'il traite un seul morceau de code à la fois. C'est pour cela qu'on dit que JavaScript est mono-thread, car lorsqu'un morceau de code est en cours d'exécution, il « bloque » les autres tâches. Pour améliorer le temps de réponse et booster la vitesse de chargement de la page concernée, il faut trouver des solutions adaptées.

Réduire le temps d'exécution de JavaScript

Lorsqu'un fichier occupe le fil principal de manière prolongée, il ralentit la vitesse d'affichage de la page par le navigateur web. L'une des solutions pour y remédier est de limiter le volume des fichiers traités. En procédant ainsi, vous réduisez le temps d'exécution du navigateur, et par conséquent vous améliorez la vitesse de chargement.

Plusieurs possibilités s'offrent à vous :

• Compresser le code : la compression gzip est l'une des méthodes les plus utilisées pour réduire le poids de JavaScript. Ce procédé s'effectue à l'aide d'un algorithme de compression qui diminue la taille d'un code sans toutefois en supprimer les informations essentielles.
• Différer les JavaScript non utilisés : évitez de charger des requêtes inutiles sur votre page, n'y insérez que ce qui est nécessaire. Chaque fois que le navigateur tombe sur une balise de script renvoyant à un fichier externe, celle-ci retient toute son attention. Il met tout en pause pour se concentrer sur son exécution, et cela est néfaste pour les pages de votre site.
• Vérifier l'ordre d'exécution des scripts tiers : donnez la priorité à l'exécution des scripts les plus importants pour l'optimisation de la vitesse du navigateur. Évitez que des scripts peu importants s'exécutent avant ceux qui sont essentiels pour la navigation des internautes.

Minimiser les tâches dites "longues"

Une tâche longue (Long Task) désigne une période d'exécution de JavaScript supérieure à 50 millisecondes. Malheureusement, cet intervalle de temps est suffisant pour désintéresser les internautes et augmenter le taux de rebond du site. Pour éviter ce genre de situation, il faut fractionner votre code et opter pour l'importation dynamique.

Le fractionnement du code est une procédure informatique qui permet de subdiviser un code volumineux en différents morceaux ou bundles. Une fois le code fractionné, les bundles obtenus peuvent être hiérarchisés et téléchargés à la demande ou en parallèle. En appliquant ce procédé de manière efficace, vous réduirez le temps de chargement des pages.

Réduire la taille des différents échanges et le nombre de requêtes

Sur un site web, les requêtes sont gérées les unes après les autres, et ce, qu'elles soient sous forme de médias ou de ressources. Cela signifie que plus le nombre de requêtes est important, plus le temps de réponse du navigateur sera élevé. Pour y remédier, il faut réduire le nombre de ressources à travers une agrégation.

Supposons qu'un site ait 80 requêtes à gérer, dont 55 images, 12 fichiers Java et 13 feuilles de styles. Au lieu de supporter toute cette masse de contenus, au risque de ralentir le chargement de la page, on peut les agréger par type et obtenir une feuille de calcul, un fichier JavaScript et une image. Cela fait un gain de 77 requêtes HTTP.

Les requêtes HTTP sont aussi très souvent associées à des problèmes de « taille ». Lorsque la taille en octet d'une requête est trop importante, son exécution prend plus de temps au navigateur. C'est la raison pour laquelle il est conseillé de réduire la taille des requêtes à travers des techniques telles que la compression des images, le nettoyage du code source HTML ou la minification des JS et des CSS.

Réaliser un audit de performance via Lighthouse

Lighthouse est un outil de performance qui permet d'effectuer l'audit d'une page internet pour en améliorer la productivité. Logiciel open-source édité par Google, il permet aux webmasters de trouver des axes d'amélioration du FID. Comment procéder ? À travers un audit de performance. Lighthouse va convertir la valeur brute du FID en un score de métrique de 0 à 100, coloré en fonction des plages suivantes :

• de 0 à 49, votre score est en rouge et considéré comme « médiocre »
• de 50 à 89, il est de couleur orange et donc « à améliorer »
• de 90 à 100, il est vert et considéré comme « bon »

À la fin de chaque test, Lighthouse fournit un rapport dans lequel sont répertoriées des recommandations détaillées pour l'amélioration de votre score FID. Vous y trouverez également de la documentation sur la façon de mettre ces recommandations en application pour réduire le temps de chargement de votre site. En outre, Lighthouse propose une section Diagnostics dans laquelle sont répertoriés des conseils supplémentaires.

PageSpeed Insights

PageSpeed Insights est un outil gratuit d'aide à la performance web. De même que sur Lighthouse, les résultats sont présentés sur une échelle de 0 à 100. Attention, cet outil ne se limite pas à l'affichage des scores, car il propose également des chiffres clés pour l'optimisation du FID. Les données de terrain sont analysées en fonction des URL testées, puis leurs valeurs sont classées par vitesses :

• entre 0 et 0,1 seconde, le FID est dans le « vert » car il est jugé « rapide »
• entre 0,1 et 0,3 seconde, il est « moyen » et donc de couleur « orange »
• lorsqu'il est supérieur à 0,3 seconde, il est lent et de couleur « rouge »

Search Console via le Core Web Vitals report

Le Core Web Vitals report est accessible via la Search Console de Google. Il offre des informations détaillées sur les performances web d'une page en fonction des données d'utilisation enregistrées, et ce, en temps réel. Pas besoin d'écrire de code, tous les Core Web Vitals sont disponibles et accessibles avec facilité.

Le rapport indique clairement le FID de chaque URL dont les données sont analysées. Cependant, s'il arrive que le logiciel ne collecte pas suffisamment de données pour le calculer, il n'apparaîtra pas dans le rapport.

Images : developers.google - web.dev