Comment améliorer le délai de première entrée (FID) sur votre site WordPress

Nous avons récemment lancé une nouvelle série sur les métriques Core Web Vitals de Google avec un article sur Largest Contentful Paint. Ici, nous voulons continuer avec le prochain candidat en ligne : First Input Delay ou FID en abrégé et comment l'améliorer dans WordPress.

Dans ce qui suit, nous allons approfondir ce qu'est le FID et comment optimiser votre site Web WordPress pour cela. Vous apprendrez à comprendre et à mesurer le premier délai d'entrée, quelle valeur viser et comment l'améliorer si nécessaire.

Notez que cet article suppose que vous êtes déjà familiarisé avec Google Core Web Vitals et leur impact sur l'expérience utilisateur et l'optimisation des moteurs de recherche. Si vous n'êtes pas sûr de tout cela, consultez le premier article de cette série ou notre article autonome sur Core Web Vitals .

Qu'est-ce que le premier délai d'entrée ? Une définition

Ainsi, comme déjà mentionné, le FID est l'une des trois mesures de mesure de l'expérience utilisateur du site Web que Google considère comme des valeurs fondamentales pour juger de la convivialité d'un site Web. Cela fait également partie de leur algorithme de recherche, donc si vous obtenez un mauvais score, votre classement de recherche en souffrira.

Cependant, qu'est-ce que le premier délai d'entrée ?

En bref, le FID quantifie le délai entre le moment où un utilisateur interagit avec une page Web (comme cliquer sur un bouton) et le moment où le navigateur est capable de répondre à cette interaction. Cela reflète la réactivité d'une page Web.

Alors que Largest Contentful Paint calcule le temps qu'il faut pour qu'une page Web devienne utile à un visiteur, FID mesure dans quelle mesure elle reste utile en effectuant l'action souhaitée par le visiteur, même pendant le chargement. Naturellement, si votre site est plus réactif, cela améliore l'expérience utilisateur.

Vous le savez probablement grâce à votre propre utilisation d'Internet. Avez-vous déjà été sur un site qui a mis trop de temps à réagir à votre contribution ? Vous n'avez pas aimé ça, n'est-ce pas ? Eh bien, les visiteurs de votre site Web non plus.

Comment le FID est-il calculé ?

Le FID est mesuré en millisecondes (ms). Pour le calculer, le navigateur suit le moment où une interaction de l'utilisateur se produit sur une page et le temps nécessaire au fil principal du navigateur pour traiter cette interaction. Le score FID représente le délai entre les deux événements. Par conséquent, un faible score FID indique que la page est hautement interactive et répond rapidement aux entrées de l'utilisateur.

À ce stade, vous devez probablement vous poser des questions : quel est le "fil principal" ? Et qu'est-ce qui compte comme une interaction ?

Voici la réponse.

Le thread principal est essentiellement le pipeline de travail du navigateur. Tous les processus nécessaires au rendu et à l'exécution d'un site Web le traversent. S'il est constamment occupé, il lui faut plus de temps pour réagir à une nouvelle entrée.

Quant à ce qui compte comme une interaction, cela peut être un clic sur un lien, une pression sur un bouton, l'utilisation d'un menu déroulant, d'un champ de texte, de cases à cocher ou de boutons radio, ainsi qu'une pression sur une touche de votre clavier (par exemple Échap pour fermer une fenêtre contextuelle).

Qu'est-ce qui cause le FID ?

Le délai de première entrée est souvent le plus élevé entre First Contentful Paint (lorsque le premier élément de la page apparaît dans la fenêtre du navigateur) et Time to Interactive (lorsque la page devient utilisable pour la première fois et répond aux entrées de l'utilisateur).

Fondamentalement, le délai d'entrée provient du moment où le navigateur est occupé par autre chose pendant que l'utilisateur essaie de faire quelque chose. Dans ce cas, il ne peut pas répondre en temps voulu à l'entrée, ce qui entraîne un temps d'attente pour le visiteur du site.

Sur le plan technique, les coupables courants sont :

• Fichiers JavaScript volumineux que le navigateur doit analyser et exécuter
• Ressources bloquant le rendu qu'il doit attendre
• Calculs lourds, manipulation DOM ou processus gourmands en ressources
• Connexions réseau lentes ou latence élevée pouvant entraîner des retards dans la récupération des fichiers du site Web et d'autres ressources
• Activités qui bloquent le thread principal, telles que les animations lourdes, les transitions CSS de longue durée ou le traitement d'images volumineuses

Une dernière chose qu'il est important de noter à propos du premier délai d'entrée est qu'il sera remplacé par une autre métrique appelée Interaction to Next Paint (INP) en mars 2024. Cependant, pour l'instant, nous travaillons avec FID, il est donc toujours important que vous vous y familiarisez.

Comment mesurer le premier délai d'entrée

Vous pouvez tester le FID de votre site Web avec à peu près les mêmes outils que les autres Core Web Vitals :

• PageSpeed ​​Insights — Entrez simplement l'URL de votre page et recevez un rapport incluant votre valeur FID.
• Rapport sur l'expérience utilisateur de Chrome — Google collecte et compile des données d'expérience utilisateur réelles à partir de nombreux sites Web via son navigateur. Vous pouvez accéder à ces données via différents outils, y compris ceux mentionnés ici.
• Search Console - Le rapport Web Vitals de Google Search Console vous informe des pages avec de mauvaises lectures FID.
• Bibliothèque JavaScript web-vitals - Si vous êtes plus enclin à la technique, vous pouvez intégrer cette bibliothèque JavaScript à votre site Web et obtenir les informations sur Core Web Vitals à partir de là.

La plupart de ces outils affichent simplement la valeur FID dans leurs résultats afin que vous sachiez à quoi vous avez affaire.

Ce qu'il est important de noter, c'est que vous avez besoin d'une véritable interaction de l'utilisateur pour cette métrique. Ce n'est pas quelque chose que vous pouvez simuler dans un environnement de type laboratoire. Par conséquent, vos meilleures sources pour cela sont les données utilisateur réelles, telles que celles du rapport CrUX.

Si vous souhaitez tester votre site dans un environnement de laboratoire au préalable, votre meilleure métrique proxy est le temps de blocage total. Vous pouvez également trouver cela dans PageSpeed ​​Insights, par exemple.

De plus, concentrez-vous sur les pires cas de FID sur votre site, cela vous en dira le plus sur ce qui ne va pas.

Qu'est-ce qu'un bon premier délai d'entrée ?

Cela ne laisse que la question, pour quel nombre devriez-vous viser ? Un bon score FID est généralement inférieur à 100 millisecondes. Les scores entre 100 et 300 millisecondes sont considérés comme nécessitant une amélioration. Tout ce qui dépasse 300 millisecondes indique une mauvaise expérience utilisateur.

Donc, avec ces points de repère à l'esprit, apprenons comment améliorer le premier délai de saisie sur votre site.

Comment améliorer le premier délai de saisie sur votre site WordPress

L'amélioration du FID consiste principalement à optimiser les performances de la page Web et à réduire les tâches de blocage susceptibles de retarder la réponse du navigateur aux entrées de l'utilisateur. Le coupable le plus courant pour ce dernier est l'utilisation intensive ou incorrecte de JavaScript. Pour cette raison, une grande partie des mesures ci-dessous se concentrera sur cela. Cependant, il y a aussi d'autres choses que vous pouvez faire.

Mesures générales d'amélioration des performances

Un grand nombre des techniques que nous avons déjà abordées pour améliorer Largest Contentful Paint s'appliquent également lorsque vous souhaitez améliorer votre FID, notamment :

• Optimisez l'environnement de votre site Web - Plus votre site Web est généralement rapide, plus les ressources peuvent être fournies rapidement, ce qui réduit le temps d'interactivité. Par conséquent, investissez dans un hébergement, des thèmes et des plugins de qualité. De plus, réduisez le nombre de plugins sur votre site et maintenez-le à jour. De plus, implémentez la mise en cache et la compression.
• Implémentez un CDN — Les réseaux de diffusion de contenu vous permettent de raccourcir la distance entre le serveur et l'utilisateur, ce qui se traduit également par une livraison plus rapide des fichiers.
• Éliminer les ressources bloquant le rendu - Toutes les parties d'un site Web qui bloquent le processus de chargement ont un impact négatif sur toutes les parties de l'expérience utilisateur et sur Core Web Vitals. Les éliminer de votre site permet de corriger ce problème. Plus de détails sur JavaScript bloquant le rendu ci-dessous.

Pour plus de conseils, consultez notre article sur la façon d'accélérer WordPress, de réduire les demandes de serveur et de tester la vitesse de votre site Web.

Réduire, différer, asynchroniser et minifier votre JavaScript

Comme mentionné, JavaScript est généralement le principal facteur de mauvais résultats FID. Voici comment vous pouvez optimiser le balisage sur votre site afin qu'il ne devienne pas un problème.

Réduire le balisage global

Bien sûr, la meilleure chose à faire est de réduire le JavaScript global sur la page. Vérifiez l'onglet Couverture dans les outils de développement de votre navigateur pour trouver le code JavaScript inutilisé sur une page Web.

Voyez si cela est nécessaire pour votre site dans son ensemble ou si vous pouvez supprimer complètement le JavaScript inutilisé.

Dans WordPress, un JavaScript excessif est souvent le résultat d'un trop grand nombre de plugins ou de thèmes qui viennent avec beaucoup de cloches et de sifflets provoquant un premier délai d'entrée. Donc, si vous voulez vous en débarrasser, vérifiez s'il existe un moyen d'en éliminer certains ou de passer à une version allégée.

Scripts asynchrones et différés

Après cela, l'étape suivante consiste à optimiser la livraison de JavaScript au navigateur. Le principal problème ici est que, sauf indication contraire, lorsque le navigateur rencontre un script JavaScript dans le balisage de votre site Web, il arrête le rendu HTML jusqu'à ce que le script ait été téléchargé et exécuté. Ceci est également appelé les "ressources bloquant le rendu" mentionnées ci-dessus.

Cependant, il existe des moyens de contourner cela et ils sont basés sur deux mots-clés :

• async - L'ajout de ceci à votre appel de script permet au navigateur de le télécharger en arrière-plan sans interrompre le traitement de la page. Il ne s'exécutera qu'une fois téléchargé, indépendamment du reste de la page.
• defer - Très similaire à async . Il indique au navigateur de ne pas attendre le script et de continuer à construire la page. Cependant, dans ce cas, il chargera le script en dernier, lorsque le reste de la page sera entièrement construit.

Voici à quoi ressemble l'utilisation async et defer dans la pratique :

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

Comme vous pouvez l'imaginer, ces deux méthodes peuvent entraîner un gain de temps considérable lors du chargement de la page. Leur principale différence : defer conserve l'ordre relatif des scripts tels qu'ils apparaissent dans le document, tandis que async utilise l'ordre dans lequel les scripts sont téléchargés.

Vous pouvez utiliser les deux pour effectuer un chargement JavaScript inutilisé et non critique ultérieurement. Cela inclut les scripts tiers tels que les analyses.

Minifier JavaScript pour un téléchargement plus rapide

Enfin, pour le JavaScript qui est chargé, assurez-vous de le réduire. La minification signifie supprimer tout le balisage et le formatage du code qui ne sont là que pour rendre les fichiers lisibles pour les humains.

Cela réduit encore la taille des fichiers et les rend plus rapides à télécharger par le navigateur. Il existe de nombreux outils pour ce faire, y compris les recommandations de plugins ci-dessous.

Décomposez les tâches longues

En plus de réduire le JavaScript global sur votre site et d'améliorer la livraison, vous pouvez optimiser le premier délai d'entrée sur votre site WordPress en décomposant ce qui reste en plus petits morceaux. Ceci est particulièrement adapté si vous avez beaucoup de "tâches longues" sur votre page.

Que sont les tâches longues, demandez-vous ?

Tout ce qui bloque le thread principal pendant plus de 50 ms. Vous pouvez les voir dans les outils de développement Chrome marqués de drapeaux rouges.

Si vous les coupez en parties plus petites, vous pouvez les charger de manière asynchrone, ce qui réduit le travail ininterrompu dans le thread principal.

Comment tu fais ça?

En utilisant le fractionnement de code. Il vous permet de charger des morceaux de JavaScript de manière conditionnelle afin que seul le code d'importance critique soit chargé depuis le début. Le reste n'intervient que lorsque c'est nécessaire. Vous pouvez également diviser les tâches en fonctions distinctes plus petites. Les deux sont des moyens de garder vos pages réactives.

Pour plus de conseils très techniques sur la façon de gérer les tâches longues, consultez cette ressource.

Plugins WordPress utiles pour améliorer le FID

Nous comprenons que l'optimisation des fichiers JavaScript n'est pas la tasse de thé de tout le monde, surtout si vous n'êtes pas développeur. Pour cette raison, nous avons compilé quelques plugins et outils WordPress qui peuvent vous aider à améliorer vos valeurs de premier délai d'entrée.

• Asset Cleanup - Ce plugin vous permet de désactiver les CSS et JavaScript inutilisés, de précharger les polices, de réduire vos fichiers, de différer JavaScript, etc.
• Scripts volants — Vous permet de retarder l'exécution de JavaScript non critique jusqu'à ce qu'il n'y ait plus d'activité de l'utilisateur.
• Organisateur de plugins - Modifiez l'ordre dans lequel les plugins se chargent sur votre site et désactivez-les de manière sélective sur les pages ou les types de contenu choisis.
• Autoptimize - Peut combiner et réduire automatiquement les fichiers CSS et JS, ainsi qu'ajouter async et defer aux scripts. C'est aussi super facile à utiliser.
• WP Rocket - Un plugin de mise en cache payant qui peut faire beaucoup de ce dont nous avons parlé ci-dessus. Généralement, la plupart des plugins de mise en cache offrent des fonctionnalités similaires.

Réflexions finales : premier délai d'entrée dans WordPress

Le FID est l'une des mesures qui composent le triumvirat de Core Web Vitals et il mesure l'interactivité des pages Web. Étant donné que personne n'aime les expériences Web lentes, il s'agit d'une partie importante de l'expérience utilisateur. En se concentrant sur l'amélioration du délai de première saisie, les propriétaires et les développeurs de sites Web peuvent offrir une expérience utilisateur plus réactive et, en fin de compte, améliorer la satisfaction et l'engagement des utilisateurs.

Ci-dessus, nous avons expliqué comment mesurer, tester et améliorer le FID sur votre site Web WordPress. Bien que l'optimisation de JavaScript puisse sembler un peu hors de portée pour les utilisateurs moins techniques, vous pouvez encore faire beaucoup pour améliorer les performances globales de votre site, y compris FID. J'espère que vous vous sentez capable de le faire maintenant.

Avez-vous d'autres conseils pour améliorer le premier délai de saisie sur les sites Web WordPress ? Partagez vos réflexions et recommandations ci-dessous !