Délai de première entrée (FID) : qu'est-ce que c'est et comment optimiser votre site Web pour cela

Offrir une expérience rapide aux visiteurs est essentiel au succès de votre site. Cependant, il existe plusieurs façons d'évaluer à quel point il le fait. L'un d'eux est le First Input Delay (FID), qui mesure le temps en millisecondes (ms) entre le moment où un utilisateur interagit pour la première fois avec votre site et le moment où son navigateur répond à cette action.

Dans cet article, nous expliquerons ce qu'est le FID et comment le mesurer. Nous discuterons également de ce qu'est un bon score FID et vous expliquerons comment optimiser le vôtre. Enfin, nous terminerons par quelques questions fréquemment posées. Commençons!

Abonnez-vous à notre chaîne Youtube

Qu'est-ce que le délai de première entrée (FID) ?

Comme nous l'avons mentionné, le FID (également parfois appelé « latence d'entrée ») est la mesure du temps en ms qui s'écoule entre le moment où un visiteur interagit avec votre site et le moment où son navigateur répond. Il s'agit d'une mesure essentielle incluse dans le rapport sur l'expérience utilisateur de Chrome. De plus, c'est l'un des Core Web Vitals. Ce sont les mesures que Google utilise pour déterminer la qualité de l'UX de votre site (et à son tour, son classement de page).

Dans ce contexte, l'entrée ou l'interaction peut faire référence à un large éventail d'actions. Par exemple, il peut s'agir de cliquer sur un lien, d'appuyer sur un bouton ou de sélectionner une case à cocher. Cependant, le FID ne s'applique pas lorsqu'un utilisateur fait défiler ou zoome sur une page, car ceux-ci ne nécessitent pas de nouvelle réponse entre son navigateur et votre site Web.

Quelques facteurs différents peuvent affecter cette métrique. La vitesse et la puissance de traitement de l'appareil de l'utilisateur peuvent avoir un impact. Vous ne pouvez pas contrôler cela. Cependant, vous pouvez contrôler la taille et la complexité de la page Web. Plus précisément, vous pouvez contrôler la quantité de JavaScript utilisée par votre site Web. Par exemple, si vous avez de nombreuses images ou scripts qui se chargent dans un ordre aléatoire, cela peut ralentir l'ensemble du processus et retarder la réponse de l'utilisateur.

Même si votre site dispose d'un FCP et d'un LCP solides, le délai de première entrée peut être suffisamment long pour les faire rebondir. Il peut leur sembler que votre site ne répond pas et est lent.

En un mot, FID est utilisé pour déterminer la réactivité d'une page pendant son chargement. Peut-être évidemment, plus ce processus est rapide, mieux c'est. Par conséquent, il est important de savoir comment mesurer le FID de votre site et comment améliorer votre score.

Comment mesurer le FID

Avant de commencer à optimiser votre score FID, il est essentiel de savoir où il se situe actuellement. Idéalement, pour offrir une expérience utilisateur (UX) solide, vous souhaiterez que votre score FID soit inférieur à 100 ms.

Un score de 100 ms ou moins est considéré comme bon , alors qu'un score compris entre 100 et 300 ms peut être amélioré. Un score FID supérieur à 300 ms est médiocre .

Pour mesurer votre FID, vous pouvez utiliser Google PageSpeed ​​Insights :

Il s'agit d'un outil gratuit de Google qui teste les performances de votre site de plusieurs manières. Avec lui, vous pouvez observer une variété de mesures clés, y compris FID.

Notez que le FID peut parfois être difficile à mesurer. C'est parce qu'il nécessite une entrée de l'utilisateur. Cependant, tant que vous avez récemment eu une interactivité utilisateur sur votre site, vous devriez pouvoir trouver cette métrique via PageSpeed ​​Insights.

Pour commencer, entrez l'URL de votre site dans le champ de texte et cliquez sur le bouton Analyser . Une fois que l'outil a terminé d'analyser votre page, il vous amènera aux résultats et donnera à votre site un score global :

Vous pouvez trouver la métrique First Input Delay (FID) dans la section Field Data . Sous la section Opportunités un peu plus bas, vous pouvez trouver des suggestions pour optimiser votre page et vos scores.

Nous souhaitons également noter que Google désigne ces scores comme des données de terrain . Cela signifie que les informations sont basées sur l'interaction réelle de l'utilisateur, et non sur des tests simulés (appelés données de laboratoire ou trouvés via des outils de laboratoire ). Le FID est assez subjectif et étroitement lié aux interactions réelles de l'utilisateur, il est donc important de s'assurer que vous utilisez des données de terrain. Les simulations ne peuvent expliquer que tant de choses.

Comment optimiser votre score FID

Maintenant que vous comprenez ce qu'est un score FID et comment vous pouvez le mesurer, il est temps de voir comment vous pouvez réellement l'améliorer. Vous trouverez ci-dessous quelques conseils et stratégies que vous pouvez utiliser pour réduire votre délai de première entrée.

Optimisez et minimisez votre code CSS et JavaScript

L'un des meilleurs moyens d'optimiser votre score FID consiste à compresser et à optimiser votre code CSS et JavaScript. Cela peut réduire la taille de vos fichiers et ainsi améliorer la réactivité. En supprimant les caractères, les espaces et les sauts de ligne inutiles, vous réduisez la taille du fichier, ce qui augmente la vitesse de la page et réduit le nombre de processus qu'un navigateur doit gérer. Ainsi, vous avez un FID inférieur.

Les utilisateurs de Divi doivent également savoir que le thème minimise automatiquement HTML, JavaScript et CSS dès le départ. Le simple fait d'activer le thème compressera tout ce code afin que votre FID soit dans une meilleure position qu'auparavant.

Si vous n'êtes pas un utilisateur de Divi, vous avez quelques options pour minifier votre code. Une approche simple et rapide consiste à utiliser un outil en ligne tel que Minify Code. Copiez votre code en taille réelle, collez-le sur le site, le site le minimise, puis vous copiez/collez les résultats dans votre site.

Vous pouvez également minifier votre code manuellement à l'aide d'un éditeur de code, bien que cela puisse être un peu plus compliqué. Cependant, si vous avez l'habitude de travailler avec du code, cette méthode peut vous donner plus de contrôle.

Une autre stratégie consiste à utiliser un plugin tel que Autoptimize ou W3 Total Cache (ou un certain nombre d'autres).

Cela peut être une solution viable pour les utilisateurs de WordPress si vous n'êtes pas habitué au code et que vous souhaitez implémenter cette modification sur votre site automatiquement. De plus, ces plugins offrent tous deux une variété de fonctionnalités axées sur l'optimisation telles que la mise en cache d'images et de contenu.

Divisez les longues tâches JavaScript en plus petites

Les tâches longues ont tendance à bloquer le fil principal et peuvent entraîner un gonflement de JavaScript, nuisant à la réactivité de votre site. Pour éviter que cela ne se produise et améliorer votre score FID dans le processus, vous pouvez essayer de diviser ces tâches en tâches asynchrones plus petites.

L'un des moyens les plus efficaces d'y parvenir est le fractionnement de code. En un mot, il s'agit d'une technique utilisée pour décomposer et charger uniquement des morceaux de code plus petits et nécessaires, plutôt qu'un seul gros fichier à la fois. Vous pouvez le faire à l'aide d'un outil tel que Webpack.

Les utilisateurs de Divi bénéficient également d'un avantage dans ce domaine, car la grande mise à jour des performances sépare la grande bibliothèque JavaScript des thèmes et ne les charge que si nécessaire. Cela devrait réduire le FID sur presque tous les sites Divi. Les thèmes WordPress ont tendance à être livrés avec leurs propres bibliothèques JS, et les utilisateurs peuvent ne pas avoir l'expertise ou les autorisations nécessaires pour séparer le code et l'optimiser eux-mêmes. Nous voulions en faire un non-problème avec Divi.

Réduisez l'impact du code tiers et des scripts non critiques

Si vous avez trop de scripts tiers, cela peut retarder l'exécution des propres données de votre site. Par conséquent, afin d'optimiser votre score FID, il est également judicieux de réduire l'impact du code tiers et de supprimer tous les scripts tiers non critiques. Et de reporter ceux que vous ne pouvez pas supprimer.

Lorsque vous décidez quels scripts sont les plus importants, demandez-vous lesquels jouent un rôle important dans l'UX du site. Par exemple, vous pouvez peut-être supprimer ou retarder certaines publicités ou pop-ups qui ne sont pas vraiment nécessaires. Vos utilisateurs ont-ils besoin de voir cette option de courrier électronique dès le début, ou pouvez-vous la retarder jusqu'à ce qu'ils interagissent avec le site d'une manière ou d'une autre ?

Vous pouvez également consulter la section Opportunités de vos rapports PageSpeed ​​Insights pour plus d'informations sur la réduction de JavaScript et CSS inutilisés :

Si vous cliquez pour développer l'une de ces sections, elle répertorie les fichiers et les tâches spécifiques qui pourraient bloquer votre fil principal. Vous pouvez également trouver du JavaScript et du CSS inutilisés à l'aide de Chrome DevTools.

Dans de nombreux cas, ces ressources de « blocage du rendu » empêchent la page de se charger aussi rapidement, ce qui affecte également votre FID. Les supprimer et/ou les reporter peut non seulement améliorer l'interactivité de votre site, mais aussi la réactivité et la vitesse perçues.

Divi a des bascules pour différer les scripts non critiques comme celui-ci. Dans les options du thème, vous pouvez choisir de différer les scripts jQuery et d'adopter le report CSS en ligne qui, combiné à la fonctionnalité CSS critique du thème, supprime tous les CSS bloquant le rendu. Vous pouvez également activer ou désactiver le report de la feuille de style de l'éditeur Google Fonts et Gutenberg. Tous ces éléments sont considérés comme « bloquant le rendu », de sorte que les membres d'Elegant Themes verront un score FID amélioré presque immédiatement.

Foire aux questions sur le délai de première entrée (FID)

À ce stade, vous avez probablement une solide compréhension de ce qu'est le FID et de son importance sur l'UX de votre site Web, ainsi que de la façon de l'améliorer. Dans cet esprit, nous voulons nous assurer que nous avons couvert tous les points clés. Passons donc en revue quelques questions fréquemment posées sur le FID.

Comment FID s'intègre-t-il dans les performances globales de mon site Web ?

Essentiellement, FID mesure la première interaction que les visiteurs ont avec votre site Web. Il s'agit à la fois d'une mesure quantitative et d'une mesure perçue, car elle a un impact sur la première impression d'un utilisateur sur votre site. Vous pouvez objectivement voir quand le site réagit aux entrées de l'utilisateur, mais en fonction des interactions de l'utilisateur avec le site, vous pouvez voir quand il le perçoit également.

Le FID mesure le temps entre la première interaction d'un utilisateur et le temps nécessaire au navigateur pour répondre à cette action. En d'autres termes, la métrique évalue le degré de réactivité de votre site pendant son chargement . Plus il est rapide, meilleure sera l'expérience de vos visiteurs.

De plus, en tant que Core Web Vital (aux côtés de Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS)), FID joue un rôle important dans la façon dont Google classe votre site Web. Par conséquent, en plus de l'expérience de vos utilisateurs, cela peut également avoir un impact sur l'optimisation des moteurs de recherche (SEO) de votre site. Bon nombre des mêmes stratégies d'amélioration du FID réduiront également considérablement les performances globales de votre site.

Comment puis-je mesurer mon FID ?

Il existe différentes manières de mesurer votre score FID. La méthode la plus rapide et la plus simple consiste à exécuter votre site via Google PageSpeed ​​Insights. Le rapport détaillera une gamme de mesures importantes, y compris FID. Il offrira également quelques suggestions sur la façon dont vous pouvez améliorer votre score.

De plus, vous pouvez utiliser quelques autres outils pour accéder à votre score FID. Ils comprennent le rapport sur l'expérience utilisateur de Chrome, le rapport Core Web Vitals de Google Search Console et la bibliothèque JavaScript Web Vitals. Vous pouvez également trouver des outils tels que GT Metrix et Speed ​​Test de Pingdom pour être utiles.

Comment améliorer mon score FID ?

L'amélioration de votre FID peut aider à améliorer les classements UX et SEO de votre site. En règle générale, un mauvais score FID peut être attribué à plusieurs facteurs, notamment :

• JavaScript lourd
• Scripts inutilisés
• Tâches JavaScript longues
• Fichiers de script longs

Pour améliorer votre score, vous pouvez suivre quelques étapes. Il s'agit notamment de réduire le code de votre site, de supprimer ou de retarder les scripts tiers inutilisés et de diviser les longues tâches JavaScript (et les fichiers CSS) en plus petites.

Conclusion

Vous n'avez qu'une seule chance de faire une première impression positive sur les visiteurs de votre site Web. C'est pourquoi il est important de s'assurer que vous prenez toutes les chances que vous pouvez pour optimiser votre score FID. Il est impératif de s'assurer que les premières interactions de vos visiteurs soient rapides.

N'oubliez pas que le score FID idéal est de 100 ms ou moins. Si vous avez besoin d'améliorer le vôtre et de réduire ce temps, les différentes stratégies dont nous discutons ci-dessus (telles que le report de JavaScript inutilisé, l'optimisation de votre code CSS et JavaScript et le report/suppression des ressources bloquant le rendu) réduiront sans aucun doute votre temps là où ils doivent l'être.

Vous avez des questions sur FID ? Faites-nous savoir dans la section commentaires ci-dessous!

Image en vedette via wan wei / shutterstock