Le délai de première entrée est une mesure essentielle à suivre et à améliorer sur votre page Web.
Offrir une expérience utilisateur rapide aux visiteurs de votre site Web est essentiel au succès de votre site. Mais comment savoir si votre site atteint les vitesses souhaitées ?
C'est là qu'intervient le First Input Delay (FID).
Dans cet article, nous vous expliquerons ce qu'est le FID, comment le mesurer et ce qu'est un bon score FID. Nous vous révélerons également quelques moyens d'optimiser votre FID pour obtenir de meilleurs résultats.
Plongeons-nous dedans.
Qu'est-ce que le premier délai d'entrée (FID) ?
Le First Input Delay (FID) est une mesure des performances Web et de l'expérience utilisateur qui suit le temps écoulé entre la première interaction d'un visiteur avec une page Web et le moment où le navigateur commence à traiter l'interaction. Ce délai est parfois appelé latence d'entrée.
Le premier délai d'entrée mesure la durée en millisecondes (ms).
Pour le dire plus simplement, le FID est le délai entre l'interaction de l'utilisateur, par exemple lorsque vous cliquez ou appuyez sur quelque chose comme un lien ou un bouton, et le moment où le navigateur répond à votre action et commence à la traiter.
Considérez cela comme la mesure du temps écoulé entre le moment où vous sonnez à la porte de quelqu'un et celui où cette personne ouvre à la porte.
Ce qu'il faut savoir sur le FID, c'est que Google l'utilise comme facteur de classement. Il s'agit de l'un des Core Web Vitals , qui sont les mesures que Google utilise pour déterminer la qualité de l'expérience utilisateur de votre site et, par conséquent, son classement.
De plus, les améliorations apportées aux performances du site et à l'expérience utilisateur entraînent généralement une augmentation des conversions, des ventes et des revenus publicitaires . En améliorant votre FID, vous pouvez surmonter ce sentiment de frustration que les utilisateurs peuvent ressentir pendant le chargement de votre page.
C'est ce qui fait du First Input Delay l'une des mesures de performance Web les plus intéressantes : c'est l'une des mesures les plus pures Il s'agit de mesures réelles des utilisateurs, et non d'une mesure de laboratoire. Elles ne peuvent pas être simulées dans le cadre d'un test en laboratoire. Elles nécessitent une intervention réelle de l'utilisateur pour être mesurées. Le FID mesure l'expérience réelle des utilisateurs réels qui accèdent à votre page.
Il y a quelques éléments qui sont importants lors de la mesure des délais de première entrée.
Le FID ne mesure que les interactions finies
Les événements considérés comme des interactions utilisateur doivent être discrets ou finis. Cela signifie qu'il ne peut s'agir que d'un événement ayant un début et une fin clairs, comme appuyer sur un bouton, cliquer sur un lien ou cocher une case.
Les types continus d'interaction utilisateur, comme le défilement de votre page Web ou le zoom, ne peuvent pas être correctement mesurés à l'aide de cette mesure, car aucune réponse n'est attendue du site lui-même - et l'objectif du First Input Delay est de mesurer la réactivité d'un site pendant son chargement.
Pour résumer, la saisie de l’utilisateur inclut les clics et non les défilements.
Le FID mesure uniquement la première interaction de l'utilisateur
La première fois qu'un utilisateur interagit avec votre page, c'est sa première impression, et la première impression est primordiale. Elle détermine la façon dont il perçoit et expérimente les performances de votre site Web (et donc s'il va rester ou partir).
La plupart des blocages du thread principal du navigateur se produisent dans les premiers instants du cycle de vie d'une page, car c'est à ce moment-là que les ressources critiques se chargent.
En mesurant le délai de première entrée, vous pouvez vous assurer que ces ressources critiques se chargent rapidement et ne donnent pas à votre site Web une impression de maladresse, de lenteur et de manque de réactivité.
Le délai de première entrée est différent du temps d'interactivité
Le délai d'interaction (TTI) est une autre mesure de performance Web utile et peut être confondu avec le délai de première entrée.
Le TTI mesure le temps nécessaire à une page pour être entièrement interactive, c'est-à-dire lorsqu'un contenu utile est déjà affiché sur la page, que l'interaction de l'utilisateur est traitée dans les 50 ms et que les gestionnaires d'événements sont enregistrés pour la plupart des éléments de la page.
Le délai de première saisie n'est pas le même. Le délai de première saisie est utilisé pour suivre la saisie utilisateur qui se produit avant que la page ne soit entièrement interactive. Ainsi, un utilisateur peut cliquer sur un lien qui apparaît avant que les gestionnaires d'événements ne soient enregistrés pour la plupart des éléments de la page, et le délai de première saisie vous permet de capturer ces premières interactions.
La cause du premier retard d'entrée
Plusieurs facteurs différents peuvent affecter la mesure du délai de première entrée :
Charges utiles JavaScript lourdes en amont
Les bundles JavaScript lourds sont la principale cause des longs délais de première entrée - à la fois au niveau de la charge utile initiale et de l'exécution en cours.
Le navigateur peut mettre beaucoup de temps à analyser et évaluer ces bundles. Les entrées sont retardées car elles doivent attendre que la page charge tout le JavaScript référencé. En d'autres termes, si vous avez beaucoup d'images ou de scripts qui se chargent dans un ordre aléatoire, cela peut ralentir l'ensemble du processus et retarder la réponse de l'utilisateur.
Les gros bundles sont généralement causés par des dépendances excessives de tiers ou lorsque du code est inclus qui n'est pas nécessaire à la page actuelle.
La bonne nouvelle est que vous pouvez contrôler la taille et la complexité des pages Web et, plus précisément, vous pouvez contrôler la quantité de JavaScript utilisée par votre site Web.
JavaScript à long terme
Des délais de première saisie longs se produisent également même après le chargement complet de JavaScript.
Pourquoi ? Parce que toute tâche longue en JavaScript s'exécute sur le thread principal et les entrées utilisateur sont bloquées jusqu'à ce que la tâche soit terminée et que le thread principal soit libre de gérer les entrées.
Ce problème est causé par un code mal optimisé.
Vitesse et puissance de traitement de l'appareil de l'utilisateur
Cela peut avoir un impact sur votre FID, mais vous ne pouvez pas le contrôler.
Quel est un bon score FID ?
N'oubliez pas que le FID est mesuré en millisecondes (ms), donc moins votre score est élevé, mieux c'est. Vous ne voulez pas de longs délais d'entrée.
Selon les seuils FID dans PageSpeed Insights :
- Un FID de 100 ms ou moins est bon
- Le FID entre 100 et 300 ms doit être amélioré
- Un FID supérieur à 300 ms est médiocre.
Selon une étude menée par NN Group, 0,1 seconde est la limite à laquelle l'utilisateur a l'impression que le système réagit instantanément. Essayez donc de maintenir votre FID en dessous de 100 ms.
Dans certains cas, votre FID peut être inférieur à 100 ms et être noté comme « bon », mais la page peut toujours sembler peu réactive. Cela est dû au fait que le navigateur doit encore exécuter la tâche associée à la saisie de l'utilisateur, et cela n'est pas mesuré par le FID.
Comment mesurer le First Input Delay sur votre page ?
Essayez ces outils pour mesurer votre premier délai d’entrée :
Ils mesurent tous le FID ainsi que de nombreuses autres mesures clés. Le choix dépend donc des autres mesures de performance que vous souhaitez suivre et de votre méthode de mesure préférée.
Parlons de la manière d’utiliser les outils pour mesurer le FID.
Rapport sur l'expérience utilisateur de Chrome
Si vous êtes à l'aise avec l'utilisation de JavaScript, vous pouvez également expérimenter le rapport d'expérience utilisateur Chrome (CrUX).
Le rapport sur l'expérience utilisateur de Chrome fournit des mesures de l'expérience utilisateur sur la façon dont les utilisateurs du monde réel expérimentent votre site Web.
Le projet public Google BigQuery regroupe les mesures de l'expérience utilisateur par origine, si elles sont connues des robots d'exploration Web de Google, et réparties sur plusieurs dimensions. Pour accéder à BigQuery, vous avez besoin d'un compte Google et d'un projet Google Cloud. Google propose un guide étape par étape et une visite guidée pratique sur la façon d'interroger le projet.
Alternativement, le tableau de bord CrUX sur Data Studio peut être configuré par les développeurs Web pour suivre les tendances de l'expérience utilisateur d'une origine.
Pour commencer, rendez-vous sur g.co/chromeuxdash où vous pourrez fournir l'origine pour laquelle le tableau de bord sera généré.
Sur le tableau de bord, vous pouvez configurer les performances mensuelles des indicateurs Web essentiels de l'origine. Les indicateurs Web essentiels sont les indicateurs UX les plus importants sur lesquels Google vous recommande de vous concentrer, notamment le délai de première entrée.
Informations sur PageSpeed
L'un des outils les plus simples à utiliser pour effectuer un test de délai d'entrée est PageSpeed Insights de Google.
Il s'agit d'un outil gratuit qui teste les performances de votre site de plusieurs manières et montre comment votre site se classe avec certaines mesures clés, notamment le délai de première entrée.
N'oubliez pas que le délai de première saisie nécessite un événement de saisie réel. Mais tant que votre site a récemment connu une interactivité utilisateur, vous devriez pouvoir trouver votre score sur PageSpeed Insights. Google désigne ce score comme des données de terrain , car il est basé sur l'interaction réelle de l'utilisateur et non sur des tests en laboratoire.
Entrez simplement l'URL de votre site dans le champ de texte et cliquez sur Analyser .
Une fois que l'outil a terminé d'analyser votre page, les résultats s'affichent. Votre site obtient un score global, mais c'est sur la section Données de terrain que vous souhaitez vous concentrer.
This shows how real users experience your site, and is where you will find the First Input Delay (FID) metric.
Ensuite, accédez à Opportunités pour voir des suggestions pour optimiser votre page et améliorer vos scores.
Google Search Console
Vous pouvez également utiliser le rapport Core Web Vitals dans Google Search Console (GSC) pour mesurer le FID.
Ouvrez GSC et accédez au menu Expérience, puis cliquez sur « Core Web Vitals ».
Vous pouvez choisir de mesurer le FID pour les utilisateurs mobiles ou de bureau - sélectionnez simplement l'un des rapports « Mobile » ou « Bureau ».
Le rapport vous montre toutes les pages qui présentent des problèmes similaires.
Optimisation du FID
Une fois que vous avez mesuré le First Input Delay de votre site, comment pouvez-vous l'optimiser ?
Jetez un œil aux tactiques ci-dessous. Beaucoup de ces optimisations impliquent que vous devez optimiser le code JS manuellement, ce qui nécessite dans la plupart des cas des développeurs Web qualifiés. Mais les gains de performances en valent la peine et votre expérience utilisateur sera grandement améliorée.
Optimiser et minimiser le code CSS et JavaScript
Commencez par compresser et optimiser votre code CSS et JavaScript. Cela permet de supprimer les caractères, espaces et sauts de ligne inutiles, ce qui réduit la taille du fichier. Cela réduit également le nombre de processus qu'un navigateur doit gérer, ce qui augmente la réactivité et la vitesse de la page.
Le résultat ? Un délai de première entrée plus faible.
Un moyen rapide et simple de minifier votre code est d'utiliser un outil en ligne comme Minify Code ou de demander l'aide de votre développeur Web.
Décomposer les longues tâches JavaScript
Le problème avec les longues tâches Javascript est qu'elles peuvent bloquer le thread principal, ne lui permettant pas de traiter les entrées de l'utilisateur et compromettant ainsi la réactivité de votre site.
La solution consiste à diviser ces tâches en tâches plus petites afin que les entrées de l'utilisateur puissent être traitées entre elles. Essayez de limiter la durée de vos tâches à moins de 50 ms.
La meilleure façon d'y parvenir est d'utiliser le fractionnement de code, qui consiste à diviser et à charger des morceaux de code plus petits et nécessaires à la fois, plutôt qu'un seul gros fichier. Des outils comme Webpack vous permettent de le faire.
Réduisez l'impact du code tiers et des scripts non critiques
Trop de scripts tiers, tels que des balises et des analyses, peuvent retarder l'exécution des données de votre site.
Ainsi, afin d'optimiser votre score de délai de première entrée, réduisez l'impact du code tiers, supprimez tous les scripts tiers non critiques et reportez ceux que vous ne pouvez pas supprimer.
Comment décidez-vous quels scripts sont les plus importants ?
Réfléchissez aux scripts qui jouent un rôle important dans l'expérience utilisateur de votre site. Donnez la priorité au chargement de ceux qui offrent la plus grande valeur aux utilisateurs.
Commencez par supprimer ou retarder les publicités ou les fenêtres contextuelles qui ne sont pas nécessaires. Consultez également la section Opportunités de votre rapport PageSpeed Insights pour obtenir des recommandations. Elle répertorie les fichiers et tâches spécifiques qui pourraient bloquer votre thread principal.
Utilisez async ou defer pour que JavaScript soit exécuté uniquement lorsque cela est nécessaire.
Utiliser Idle jusqu'à urgence
Conçu par Philip Walton de Google, Idle until urgent fournit un moyen intelligent d'évaluer votre code afin que le délai de saisie soit minimal.
La stratégie combine deux approches populaires d’évaluation du code :
- Évaluation enthousiaste : tout votre code est exécuté immédiatement, ce qui donne une page qui se charge pendant longtemps jusqu'à ce qu'elle soit entièrement interactive, puis s'exécute sans problème.
- Évaluation paresseuse : votre code est exécuté uniquement lorsque cela est nécessaire.
Idle until urgent vous permet d'exécuter du code pendant les périodes d'inactivité totale afin d'utiliser le thread principal au maximum. Mais cela garantit également que tout code dont vous avez besoin de toute urgence est exécuté immédiatement.
Il s'agit d'un excellent moyen d'améliorer votre délai de première entrée. Étant donné que l'exécution du code ne se produit que pendant les périodes d'inactivité, vous minimisez le temps de blocage du thread principal.
Lisez cet article de Philip Walton pour en savoir plus sur cette approche.
Utiliser les travailleurs Web
Les travailleurs Web vous permettent d'exécuter des scripts en arrière-plan sans impacter le thread principal.
Déplacer les opérations non liées à l'interface utilisateur vers un thread d'arrière-plan est une bonne pratique pour les développeurs Web.
Conclusion
Une première impression positive est très importante pour les visiteurs de votre site Web et vous n'avez qu'une seule chance de réussir. Investir du temps et des efforts dans la mesure du First Input Delay de votre site et l'optimisation de votre score vous aidera à améliorer votre expérience utilisateur à long terme.
Si vous générez plus de 2 000 $ de revenus publicitaires mensuels, contactez-nous dès aujourd'hui pour en savoir plus sur la manière dont Publift peut vous aider à augmenter vos revenus publicitaires et à optimiser au mieux l'espace publicitaire disponible sur votre site Web ou votre application.