Le Premier Délai d’Entrée (FID) : Comprendre et Améliorer l’Interactivité des Pages Web
Les premières impressions se forment en seulement 7 secondes dans les relations humaines, selon la science, mais pour un site web, le temps pour faire une impression est encore plus court ; de plus, on ne nous donne jamais "une deuxième chance de faire une bonne première impression", pour paraphraser Oscar Wilde. En bref, il est plus important que jamais de travailler sur l'amélioration du Premier Délai d'Entrée (FID), l'élément qui mesure l'interactivité des pages et qui est essentiel pour offrir une excellente expérience en ligne, ainsi qu'un critère appartenant aux Core Web Vitals de Google, comme l'INP, et un facteur de classement sur le moteur de recherche.
Qu'est-ce que le Premier Délai d'Entrée (FID)
Le délai à la première saisie (FID) est une mesure centrée sur l'utilisateur qui évalue la réactivité du chargement et quantifie l'expérience des utilisateurs lorsqu'ils tentent d'interagir avec des pages qui ne répondent pas. Plus précisément, le FID est une API qui mesure le temps nécessaire à notre site pour réagir après qu'un utilisateur a effectué une interaction avec celui-ci.
Comme le guide de Google et les informations de web.dev l'expliquent, le FID mesure le temps écoulé entre la première interaction d'un utilisateur avec une page (clic sur un lien, touche d'un bouton, utilisation d'un contrôle JavaScript personnalisé) et le moment où le navigateur répond réellement à l'interaction.
Comprendre le FID
Pour comprendre le FID, on peut imaginer mesurer le temps entre quelqu'un sonne à la porte et la réponse à la porte. Il peut y avoir de nombreuses raisons de ce retard : par exemple, "peut-être que la personne est éloignée de la porte ou ne peut pas se déplacer rapidement". De même, les pages web peuvent être occupées par d'autres tâches ou l'appareil de l'utilisateur peut être lent.
De plus, il convient de préciser que le FID ne mesure que le "retard" dans le traitement des événements, et non le temps de traitement de l'événement lui-même ni le temps nécessaire au navigateur pour mettre à jour l'interface utilisateur après l'exécution des gestionnaires d'événements - des facteurs qui influent sur l'expérience utilisateur, mais qui, s'ils étaient inclus, pourraient "inciter les développeurs à répondre aux événements de manière asynchrone, ce qui améliorerait les métriques mais rendrait probablement l'expérience moins satisfaisante".
L'importance du délai à la première saisie
En résumé, le délai à la première saisie peut être considéré comme la "première impression" que le site offre aux utilisateurs. Bien que - techniquement - la première impression d'un visiteur avec la page soit représentée par la Première apparition de Contenu (FCP), "peindre des pixels sur l'écran n'est qu'une partie de l'histoire, et tout aussi importante est la réactivité de votre site lorsque les utilisateurs essaient d'interagir avec ces pixels", déclare Philip Walton, ingénieur chez Google.
Sur le Web, une bonne première impression peut faire la différence entre un visiteur qui devient un utilisateur fidèle ou qui part et ne revient jamais, et bientôt, il deviendra une métrique officielle pour déterminer si le site crée de bonnes expériences, en particulier pour mesurer la première impression de l'utilisateur sur l'interactivité et la réactivité du site.
Travailler sur le Premier Délai d'Entrée nous permet de gérer la sensation désagréable que les utilisateurs pourraient ressentir lors du chargement de la page, et son optimisation aura également un impact positif sur divers autres aspects des performances web, ainsi que sur les options de placement sur Google, dans un avenir proche.
Explications sur le FID
L'article de Philip Walton se penche également sur les raisons qui ont poussé Google à prioriser le Premier Délai d'Entrée en tant que signal web essentiel - à la suite de considérations déjà exprimées au cours des mois précédents sur cet ensemble de métriques.
Le délai de la première interaction mesure l'écart entre "le moment où un événement d'entrée est reçu et le moment où le thread principal est inactif", et ainsi le FID est mesuré même dans les cas où un écouteur d'événement n'a pas été enregistré, car "de nombreuses interactions utilisateur ne nécessitent pas un écouteur d'événement, mais nécessitent que le thread principal soit inactif pour fonctionner".
Quand se produit le délai d'entrée
En général, le délai d'entrée (c'est-à-dire la latence d'entrée) se produit "parce que le thread principal du navigateur est occupé à faire autre chose, il ne peut donc pas (encore) répondre à l'utilisateur". Une raison courante pour cela est que votre navigateur est occupé "à analyser et à exécuter un gros fichier JavaScript téléchargé par votre application ; pendant ce temps, il ne peut pas exécuter d'écouteur d'événements, car le JavaScript qu'il télécharge pourrait lui dire de faire autre chose".
Séquence temporelle d'un chargement typique d'une page web
Cette image (de web.dev, comme toutes les autres sur la page) représente la séquence temporelle typique du chargement d'une page web : une page effectue quelques requêtes réseau pour des ressources (probablement des fichiers CSS et JavaScript) et, une fois le téléchargement de ces ressources terminé, elles sont traitées sur le thread principal. Cela crée des périodes pendant lesquelles le thread principal est momentanément occupé, ce qui est indiqué par des blocs d'activité beige.
Délais avec FCP et TTI
En général, il y a de longs retards lors de la première interaction entre la Première Peinture de Contenu (FCP) et le Temps d'Interactivité (TTI) "parce que la page a créé une partie de son contenu mais n'est pas encore réellement interactive", et cette autre illustration avec l'ajout à la chronologie de FCP et de TTI le montre clairement. On voit qu'il y a "un certain laps de temps (y compris trois longues activités) entre FCP et TTI, et si un utilisateur essaie d'interagir avec la page pendant cette période (par exemple, en cliquant sur un lien), il y aura un délai entre la réception du clic et la réponse du thread principal".
FID et interaction de l'utilisateur
Cette autre image indique ce qui se passe si un utilisateur essaie d'interagir avec la page près du début de la plus longue activité : comme l'interaction se produit pendant qu'un navigateur exécute une activité, l'utilisateur doit attendre que la tâche soit terminée avant de pouvoir répondre à l'interaction. Le temps que vous devez attendre correspond à la valeur du FID pour cet utilisateur sur cette page.
Quels sont les premières interactions et pourquoi nous considérons la première réaction
Étant donné que le FID est une métrique qui mesure la réactivité de la page lors du chargement, il se concentre uniquement sur les événements d'entrée issus d'actions discrètes telles que les clics, les touches et les frappes, tandis que d'autres interactions, comme le défilement et le zoom, sont des "actions continues et ont des contraintes de performance totalement différentes" (et, en plus, les navigateurs sont souvent capables de masquer leur latence en les exécutant sur un thread séparé).
En termes techniques, "le FID se concentre sur R (réactivité) dans le modèle de performance RAIL, tandis que le défilement et le zoom sont plus liés à A (animation) et leurs qualités de performance doivent être évaluées séparément", explique l'ingénieur de Google.
En résumé
Pas toutes les interactions sont pertinentes pour le FID ; de plus, tous les utilisateurs n'interagiront pas avec le site à chaque visite et "les premières interactions de certains utilisateurs auront lieu à des moments difficiles (lorsque le thread principal est occupé pendant une longue période) tandis que celles d'autres utilisateurs auront lieu à des moments favorables (quand le thread principal est complètement inactif)".
Cela signifie que certains utilisateurs n'auront pas de valeurs de FID, certains auront des valeurs de FID faibles et d'autres auront probablement des valeurs de FID élevées, c'est pourquoi il est important d'apprendre à surveiller et à analyser le Premier Délai d'Entrée avec des modes et des outils spécifiques.
Comment mesurer le Premier Délai d'Entrée
Le FID est également une métrique qui ne peut être mesurée que sur le terrain - nous avons déjà parlé de la manière de mesurer les Web Vitals - car il "nécessite qu'un utilisateur réel interagisse avec votre page" et ne peut donc pas être mesuré en laboratoire.
En fait, le guide révèle que la métrique du Temps de Blocage Total (TBT) "est mesurable en laboratoire, est bien corrélée avec le FID sur le terrain et capture également des problèmes qui affectent l'interactivité", et "les optimisations qui améliorent le TBT en laboratoire devraient également améliorer le FID pour vos utilisateurs".
Cependant, nous pouvons mesurer le FID avec quatre outils :
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Rapport Core Web Vitals)
- Bibliothèque JavaScript web-vitals
En raison de la variance prévue des valeurs de FID, il est crucial de "regarder la distribution des valeurs dans un rapport FID et de se concentrer sur les percentiles les plus élevés". Bien que le choix du percentile pour tous les seuils de données vitales clés soit de 75 %, en fait, pour le FID en particulier, Google "recommande vivement de prendre en compte les percentiles de 95 % et de 99 %, car ils correspondent aux premières expériences particulièrement négatives que les utilisateurs ont avec votre site et vous montreront les domaines qui nécessitent plus d'améliorations".
Comment améliorer le Premier Délai d'Entrée
Parmi les différentes interventions qui peuvent nous permettre de réduire le temps de retard de la première interaction, citons :
- Réduire l'impact du code tiers.
- Réduire le temps d'exécution de JavaScript.
- Minimiser le travail sur le thread principal.
- Réduire le nombre de demandes et la taille du transfert.
En général, la principale cause d'un mauvais FID est l'exécution intensive de JavaScript, et donc l'optimisation de la manière dont JavaScript est analysé, compilé et exécuté sur votre page web réduira directement le FID. Pour optimiser cet aspect et réduire l'occupation du thread principal (ce qui empêche le navigateur de répondre aux interactions de l'utilisateur), nous pouvons suivre quelques bonnes pratiques, telles que :
- Diviser les tâches longues en tâches plus petites et asynchrones.
- Optimiser la page pour l'accessibilité à l'interaction.
- Utiliser un web worker, qui vous permet d'exécuter du JavaScript sur un thread en arrière-plan.
- Réduire le temps d'exécution de JavaScript, en supprimant le JavaScript inutilisé et en minimisant les polyfills inutilisés.
Les interventions pour optimiser le Premier Délai d'Entrée sur nos pages
Patrick Kettner de Google donne des conseils pratiques, avec une vidéo YouTube dans laquelle il nous guide à travers les techniques de mesure et d'amélioration du FID.
Dans son discours, Kettner explique qu'il est important de s'assurer que les utilisateurs de notre site subissent et ressentent le moins de retard possible, car les retards "nous interrompent, perturbent notre processus de réflexion et rendent plus difficile la concentration ou l'accomplissement de nos objectifs", créant une expérience frustrante lorsque nous essayons de naviguer sur un site, d'utiliser une application ou simplement de regarder une vidéo.
Pour renforcer ce concept, dans le cadre de l'expérience sur la page, il y a la métrique du Premier Délai d'Entrée (FID), une API web qui fait partie du groupe inaugural des Core Web Vitals identifiés par Google en 2020 avec LCP (Largest Contentful Paint) et CLS (Cumulative Layout Shift).
En particulier, le FID "mesure combien de temps, en millisecondes, votre site a besoin pour réagir après qu'une personne a interagi avec lui", c'est-à-dire le temps qui s'écoule depuis qu'un utilisateur clique sur un bouton ou touche un champ de texte jusqu'à ce que le navigateur commence effectivement à réagir. Avec cette métrique, "nous mesurons le délai dans le traitement des données et des interactions, pas le temps réel nécessaire pour traiter ces données", et en fait la métrique Interaction to Next Paint, qui mesure toutes les interactions de la page et la latence d'interaction complète, semble accomplir une tâche similaire de manière plus efficace, comme nous l'avons dit dans nos articles.
Selon le porte parole Développeur de Google, nous pouvons considérer le premier délai d'entrée comme donné sur "combien de temps il faut pour que votre page paraisse interactive et réactive à l'utilisateur la première fois qu'il l'utilise".
Mesurer le Premier Délai d'Entrée
Tout comme chaque partie de l'Expérience sur la Page, chaque URL du site est évaluée en fonction du FID de manière indépendante, en s'appuyant directement sur les données de vrais utilisateurs qui visitent votre site. Quel que soit le score de la page, nous pouvons donc être sûrs que les chiffres que nous lisons reflètent ce que les utilisateurs vivent réellement, car les scores de FID proviennent du rapport mensuel sur l'expérience des utilisateurs de Chrome, comme nous l'avons déjà dit dans cet article sur les mesures des Core Web Vitals.
Un autre aspect sur lequel Kettner nous invite à réfléchir est que "la page d'accueil peut avoir des valeurs fantastiques, mais la page de produit ou les articles peuvent être un peu éloignés de la perfection", mais le résultat de performance d'une page - quelle qu'elle soit, positif ou négatif - n'a pas d'impact sur celui d'une autre page car dans l'expérience sur la page, "chaque URL est une île".
Comment trouver et lire les valeurs du Premier Délai d'Entrée
Étant donné que le FID est une métrique intrinsèquement construite sur le moment où un site réagit aux interactions, pour obtenir une mesure précise du Premier Délai d'Entrée, nous ne pouvons nous fier qu'à des mesures d'utilisateurs réels qui viennent du monde réel, à des analyses internes et à des données que nous pouvons consulter dans le rapport Core Web Vitals de la Search Console. Vous pouvez également vérifier rapidement les performances de nos pages avec l'outil Pagespeed Insights - une version hébergée en ligne du même outil que Lighthouse, qui fait partie des outils de développement Chrome - montrant les performances des pages dans un environnement de test configuré pour se rapprocher de la vitesse de connexion et des performances de l'appareil d'un utilisateur moyen sur le Web aujourd'hui. Si une URL est en ligne depuis plus d'un mois, enfin, elle peut être incluse dans le rapport d'expérience utilisateur de Chrome, qui indique directement les résultats réels pour les trois paramètres des Core Web Vitals.
Quels sont les scores du FID
Donc, maintenant que nous avons la valeur du Premier Délai d'Entrée des pages de notre site, comment devrions-nous interpréter ce nombre ? Kettner l'explique de nouveau, en rappelant que pour les Vitals Web Cores dans le cadre de l'Expérience sur la Page, "il n'y a pas de réussite ou d'échec", car ces paramètres sont tous utilisés comme des guides que la recherche Google utilise pour créer "des différences de performance relatives entre les URL, afin de vérifier comment elles se comportent les unes par rapport aux autres".
En général, cependant, il existe des valeurs de référence : "Un bon objectif est que environ 75% des visiteurs de votre site vivent un délai de la première entrée de moins de 100 millisecondes" ; cet intervalle de temps de 100 millisecondes est depuis longtemps considéré comme le point où les gens perçoivent les interfaces utilisateur comme si elles agissaient instantanément. Les problèmes commencent à devenir problématiques lorsque le délai s'étend entre 100 et 300 millisecondes, tandis que "tout ce qui dépasse 300 millisecondes est un retard considérable et provoquera probablement une expérience moins bonne pour vos utilisateurs".
De plus, il convient de préciser que pour avoir une valeur de FID, vous devez offrir une interaction à la page : sinon, si votre page n'offre rien à interagir ou si les gens ne cliquent jamais sur des boutons ou des champs, il n'y aura pas de valeur de FID enregistrée.
Comment mesurer manuellement le Premier Délai d'Entrée
Si nous voulons calculer manuellement le Premier Délai d'Entrée de nouvelles pages ou d'URL non incluses dans le Chrome User Experience Report, il suffit de "faire un petit effort supplémentaire", car vous pouvez "comprendre le FID par vous-même en utilisant les mêmes API, car toutes les données de terrain des Core Web Vitals viennent de vos vrais utilisateurs réels".
En général, nous pouvons tous calculer manuellement le FID en "ajoutant un peu de JavaScript à notre page" : toutes les données vitales du Web sont en fait disponibles via l'API JavaScript et, en particulier, par le biais de PerformanceObserver. Ces observateurs nous donnent un événement ou une liste d'événements qui correspondent au type d'événements de performance qui nous intéressent. Lorsque le navigateur détermine qu'une première entrée a eu lieu, il exécutera la fonction que nous avons définie, en nous transmettant la liste des événements qui correspondent à ce que nous avons demandé ; bien que la première entrée ait probablement un seul événement, le PerformanceObserver nous donnera toujours une liste d'événements à notre rappel, de sorte que notre code itérera sur les réponses en appelant getEntries.
Pour chaque élément, nous regardons le début du traitement et soustrayons l'heure de début : la différence nous permet de quantifier le délai de la première entrée. Nous pouvons prendre ces chiffres et les envoyer à notre infrastructure d'analyse pour commencer à avoir une bonne idée de ce à quoi ressembleront nos résultats de FID. L'utilisation d'outils d'analyse nous permet de réaliser un suivi beaucoup plus détaillé des données, par exemple en mettant en évidence des données vitales en fonction des pages, des périodes de temps et des comportements des utilisateurs, en reliant ces informations à des éléments tels que l'exploration, le ciblage, la première conversion, les sources de trafic et de nombreuses autres informations".
Dans un avenir proche, des outils d'analyse pourraient également être utiles pour la surveillance des performances du FID.
Comment résoudre les problèmes de FID
Pour résoudre des problèmes de Premier Délai d'Entrée, il est nécessaire de "chercher du côté des dépendances tierces" et de regarder "en particulier les étapes critiques pour les retards qui se produisent après le chargement de la page".
Pour résoudre un problème de FID, nous pouvons effectuer des recherches "en mettant en évidence les dépendances de code tiers", "en cherchant les dépendances de code qui sont souvent "bloquantes" et "en particulier celles qui entraînent la suppression du thread principal".
Pour résoudre les problèmes de code tiers, vous devrez peut-être également vous rapprocher du propriétaire de la dépendance ou de l'API du code tiers pour "discuter des problèmes et des options de correction", ou envisager de mettre à jour ou de supprimer les bibliothèques de code tiers si elles posent des problèmes de performance.
Pour améliorer les performances JavaScript, nous pouvons minimiser la quantité de JavaScript que nous utilisons et nous assurer d'utiliser des pratiques de codage performantes pour réduire la quantité de temps que le navigateur passe à traiter le JavaScript.
Parmi les principales recommandations pour améliorer les performances JavaScript, il y a les suivantes :
- Utilisez des modules JavaScript pour organiser votre code et limiter l'impact du code inutilisé.
- Assurez-vous d'utiliser le code minimal et nécessaire pour l'interaction, et de différer ou d'éliminer le code inutilisé ou non utilisé.
- Utilisez des fichiers minifiés et réduits au minimum, et minimisez le code non exécuté.
- Désactivez le JavaScript non essentiel pour les visiteurs initiaux de votre page (peut être utile si votre site a des retards de chargement pour les visiteurs initiaux).
Pour minimiser le travail sur le thread principal, il est conseillé d'utiliser la navigation préchargée, une technique qui "signale au navigateur que l'URL peut être préchargée en arrière-plan, avant qu'un utilisateur n'ait demandé la page, pour accélérer l'accès à la page".
Pour réduire le nombre de demandes et la taille du transfert, il est possible d'utiliser l'API d'indexation hors ligne ou d'autres techniques de chargement instantané de pages.
Les pages web AMP (Accelerated Mobile Pages) peuvent également aider à améliorer le Premier Délai d'Entrée, car elles sont "conçues pour maximiser la réactivité en garantissant que la bibliothèque AMP, nécessaire pour le rendu de la page, est téléchargée et exécutée de manière très efficace".
Dans le cas de pages AMP, il est important de noter que "la mesure de l'expérience de la première interaction est toujours basée sur l'API de premier contenu interactif (CI)."
Pour conclure, le FID, une opportunité d’optimiser le code JavaScript sur le site.
L'expérience de la première interaction est le cœur de votre application et un point clé pour le retour de vos utilisateurs, "le FID est un facteur de classement sur le moteur de recherche", et comme le note l'ingénieur de Google, "la première expérience de l'utilisateur avec votre site aura un impact sur la perception qu'ils auront de votre site à l'avenir".
Il convient de rappeler qu'une bonne première impression est un élément essentiel pour convertir les visiteurs en utilisateurs fidèles, et il est important de travailler sur le Premier Délai d'Entrée, car il est essentiel pour améliorer l'interactivité des pages web et offrir une excellente expérience en ligne, mais aussi pour être en règle avec les paramètres des Core Web Vitals de Google, dont le respect deviendra obligatoire dans un avenir proche pour figurer dans les résultats de recherche.