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

Au fur et à mesure que le trafic de votre site augmente, vous voudrez vous assurer que les choses continuent de fonctionner correctement. Si les visiteurs doivent attendre plus de quelques secondes pour que votre page se charge, ils quitteront probablement votre site et ne reviendront peut-être jamais.

Heureusement, il existe quelques tests simples pour évaluer vos performances et, si des améliorations sont nécessaires, il existe des solutions qui peuvent améliorer presque immédiatement vos temps de chargement.

Dans cet article, nous aborderons un aspect des performances du site : le premier délai d'entrée. Vous apprendrez ce que c'est, pourquoi c'est important et comment vous pouvez mesurer et améliorer le score FID sur votre site WordPress.

Une introduction au premier délai d'entrée

Le premier délai d'entrée (FID) est le temps de chargement qu'un visiteur subit après avoir interagi avec votre site Web pour la première fois. Essentiellement, lorsque quelqu'un clique sur un lien ou appuie sur un bouton, il doit attendre que son navigateur réponde. Si votre site a un score FID élevé, les visiteurs attendent plus longtemps.

Le FID est l'une des principales métriques de Core Web Vitals. Créé par Google, ce rapport mesure les performances des pages Web.

Voici les trois principales mesures de performance incluses dans le rapport Core Web Vitals :

• Largest Contentful Paint (LCP) : cela mesure le temps qu'il faut à votre site Web pour se charger après qu'un utilisateur a demandé l'URL.
• First Input Delay (FID) : c'est le temps qu'il faut à votre site web pour répondre après qu'un visiteur interagit avec une page.
• Cumulative Layout Shift (CLS) : cela mesure tous les changements de mise en page qui se produisent pendant le chargement d'une page.

Bien que toutes ces mesures évaluent l'expérience utilisateur de votre site Web, votre score FID est l'un des plus importants. Si votre page ne se charge pas rapidement, elle peut laisser une mauvaise première impression. En fait, un retard d'une seconde peut diminuer la satisfaction des visiteurs de 16 %.

Voici quelques avantages de l'amélioration de votre score FID :

• Une augmentation du temps moyen passé sur la page de vos visiteurs
• Une réduction de votre taux de rebond
• Une augmentation des conversions

Causes potentielles d'un mauvais score FID

Lorsque vous exécutez un test Core Web Vitals, le rapport vous donne un score de premier délai d'entrée. Un FID acceptable est de 100 millisecondes ou moins.

Un mauvais score FID est supérieur à 300 ms. Cela peut être causé par quelques facteurs différents.

L'une des causes les plus courantes d'un délai de première entrée élevé est le code JavaScript lourd. Si un navigateur doit exécuter un gros fichier JavaScript, il peut être trop occupé pour exécuter d'autres requêtes.

Avoir trop de plugins basés sur JavaScript peut affecter négativement vos temps de chargement. De même, certains thèmes peuvent avoir des fichiers complexes qui causent le même problème.

Un autre facteur peut être les scripts tiers. Si votre site Web contient de nombreux codes et balises d'analyse tiers, cela peut augmenter la latence de votre page. Parfois, les navigateurs peuvent donner la priorité à ces scripts, retardant le chargement d'autres contenus sur votre site.

Comment mesurer le score FID de votre site Web

Maintenant que vous savez ce qu'est le premier délai d'entrée, il est temps de tester votre site Web.

Il existe plusieurs outils Core Web Vitals que vous pouvez utiliser pour vérifier votre FID. Si vous recevez un mauvais rapport de l'un de ces outils, vous pouvez prendre des mesures pour améliorer votre site Web.

1. Aperçus de vitesse de page

Un outil bien connu que vous pouvez utiliser est PageSpeed ​​Insights. Cela vous permet d'évaluer les performances de votre site Web sur une variété de facteurs.

Après avoir entré l'URL de votre site Web, PageSpeed ​​Insights vous fournira une analyse détaillée des performances. En haut de la page, vous pouvez voir si votre site a réussi l'évaluation Core Web Vitals.

À l'aide de ce rapport, vous pouvez consulter le score FID de votre site Web, qui sera mesuré en millisecondes. Comme nous l'avons mentionné précédemment, tout score inférieur à 100 ms réussira le test.

Notez que vous devrez vérifier les performances de votre site pour les navigateurs mobiles et de bureau. Vous remarquerez peut-être de légères différences dans votre score FID sur ces deux appareils.

C'est l'un des moyens les plus rapides de mesurer le premier délai de saisie sur votre site Web. Si vous avez besoin d'un aperçu rapide de vos performances Web, cela pourrait être l'outil qu'il vous faut.

2. Console de recherche Google

Semblable à PageSpeed ​​Insights, Google Search Console est un outil gratuit que vous pouvez utiliser pour évaluer les performances du site. Avec ce service, vous pouvez afficher les données de trafic de votre site et résoudre des problèmes spécifiques tels que le premier délai d'entrée.

Pour commencer à utiliser Google Search Console, vous devrez vérifier la propriété de votre site Web. Il existe plusieurs façons de procéder, mais nous décrirons la méthode de téléchargement de fichier HTML. Commencez par saisir votre domaine ou votre préfixe d'URL.

Ensuite, téléchargez le fichier HTML qui a été généré pour vous. Vous devrez télécharger ce fichier dans le répertoire racine de votre site avant de pouvoir utiliser les fonctionnalités de Google Search Console.

Après vérification, vous pourrez accéder à votre tableau de bord. Ici, vous pouvez accéder à l'onglet Core Web Vitals .

Contrairement à PageSpeed ​​Insights, l'accès à votre rapport peut prendre un certain temps si vous débutez avec cet outil. De plus, vous ne pourrez peut-être pas voir un rapport si votre site ne reçoit pas suffisamment de visiteurs.

Google Search Console peut vous fournir des mesures similaires sur votre score FID. Vous recevrez une évaluation Médiocre , Nécessite une amélioration ou Bonne basée sur des données d'utilisation réelles.

3. Phare

Lighthouse est un outil de développement Web que vous pouvez utiliser pour auditer les performances de n'importe quelle page Web. Bien qu'il ne mesure pas directement le premier délai d'entrée, il vous donnera le temps de blocage total (TBT). Vous pouvez l'utiliser comme proxy pour le FID.

En termes simples, TBT évalue la façon dont votre site répond aux entrées des utilisateurs. Comme le FID, le TBT mesure le délai entre le First Contentful Paint (FCP) et le Time to Interactive (TTI). Comme ils sont si similaires, vous pouvez utiliser TBT pour évaluer votre score FID.

Pour afficher le rapport de Lighthouse sur votre site Web, vous devrez cliquer avec le bouton droit sur votre page Web. Ensuite, choisissez Inspecter .

En haut du code généré, recherchez l'icône à double flèche. Ensuite, cliquez dessus et sélectionnez Phare .

Sur la page suivante, vous verrez une option pour générer un rapport. Lorsque vous cliquez dessus, Lighthouse audite votre site Web.

Une fois l'audit terminé, vous pouvez afficher des analyses détaillées sur les performances de votre site. Vous verrez également des rapports sur votre référencement et votre accessibilité Web.

Ensuite, faites défiler vers le bas jusqu'à ce que vous voyiez Métriques . Dans cette section, vous verrez votre temps de blocage total .

Bien que TBT et FID soient similaires, il est important de noter que FID est une métrique de champ. Puisqu'il est basé sur les utilisateurs en temps réel, il ne peut pas être mesuré en laboratoire.

Lighthouse est un outil de métrique de laboratoire, donc sa métrique de temps de blocage total n'évaluera pas l'interactivité réelle. Heureusement, l'amélioration de votre score TBT peut également améliorer votre premier délai d'entrée.

Comment réduire le premier délai de saisie dans WordPress

Lorsque vous testez votre site Web à l'aide de l'un des outils ci-dessus, vous pouvez recevoir un mauvais score de délai de première entrée. Heureusement, vous pouvez améliorer votre score en mettant en place quelques stratégies efficaces.

Voyons comment réduire le premier délai d'entrée dans WordPress.

1. Installez un plugin d'optimisation

Un moyen simple de commencer consiste à installer un plugin qui se concentre sur Core Web Vitals. En faisant cela, vous pouvez améliorer votre premier délai d'entrée sans soulever de lourdes charges.

Jetpack Boost est un plugin puissant et facile à utiliser que vous pouvez utiliser pour optimiser vos Core Web Vitals. Il offre de nombreuses façons d'augmenter vos performances Web et d'améliorer votre score FID.

Après avoir activé Jetpack Boost, l'outil attribuera automatiquement à votre site un score de performance. Vous pouvez voir à quelle vitesse vos pages se chargent sur les vues mobiles et de bureau.

Ensuite, vous pouvez personnaliser ses paramètres pour optimiser vos fichiers pour un chargement rapide. En optimisant CSS, en différant JavaScript et en mettant en œuvre le chargement différé, vous pouvez améliorer votre score FID.

Jetpack Boost est un plugin gratuit. Si Jetpack est déjà installé sur votre site WordPress, vous pouvez activer Jetpack Boost depuis le tableau de bord.

2. Différer le JavaScript bloquant le rendu

Un autre moyen efficace d'optimiser votre score FID consiste à différer le JavaScript bloquant le rendu. Par défaut, tout le JavaScript de votre site Web bloque le rendu. Cela signifie qu'un navigateur arrêtera de charger une certaine page jusqu'à ce qu'il puisse télécharger et exécuter ces scripts.

Dans ce cas, vous pouvez différer l'exécution de JavaScript. Cela indiquera au navigateur de rendre le contenu le plus pertinent en premier.

Pour identifier ce JavaScript bloquant le rendu, vous pouvez utiliser PageSpeed ​​Insights. Tout d'abord, saisissez l'URL de votre site Web dans la barre de recherche.

Ensuite, faites défiler jusqu'à la section Opportunités . Ici, vous verrez des suggestions pour améliorer vos performances Web. Trouvez où il est écrit Eliminer les ressources bloquant le rendu .

Lorsque vous développez cette section, il y aura une liste de ressources que vous pouvez différer ou éliminer complètement. Sur le côté droit, PageSpeed ​​Insights vous montrera comment ces changements peuvent affecter votre temps de chargement.

Une fois que vous décidez de différer le JavaScript non essentiel sur votre site Web, vous pouvez utiliser un plugin pour simplifier ce processus. Avec Jetpack Boost, vous pouvez le faire en une seule étape.

Dans votre tableau de bord WordPress, accédez à Jetpack → Boost . Ensuite, recherchez le paramètre intitulé Defer Non-Essential JavaScript .

Enfin, activez cette fonctionnalité. Une fois mis en œuvre, le commutateur deviendra vert. Maintenant, essayez à nouveau d'exécuter votre site Web via PageSpeed ​​Insights pour voir si votre score FID s'est amélioré.

3. Différer les CSS non critiques

Lorsque vous évaluez votre site Web dans PageSpeed ​​Insights, vous pouvez également voir d'autres ressources bloquant le rendu. Semblable à JavaScript, certains codages peuvent empêcher le chargement de votre page pendant que le navigateur les lit.

Tout comme avec JavaScript, vous pouvez différer les CSS non critiques. Commencez par exécuter votre site Web via un outil de performance pour voir si votre CSS doit être optimisé.

Ensuite, vous pouvez utiliser le plugin Jetpack Boost pour optimiser votre CSS. Dans votre tableau de bord WordPress, accédez à Jetpack → Boost . Ensuite, recherchez le paramètre intitulé Optimize CSS Loading .

Après avoir cliqué sur cette option, le plugin générera automatiquement le CSS critique pour votre site Web. Il déplacera ces informations importantes au début de la page, ce qui peut aider votre contenu à se charger plus rapidement.

Différer les CSS non critiques peut améliorer vos performances globales. Cela devrait également améliorer votre score FID sur PageSpeed ​​Insights.

4. Éliminez le JavaScript inutile

Si vous avez installé de nombreux plugins ou un thème complexe, votre site Web pourrait exécuter trop de scripts. Si un navigateur doit exécuter une longue liste de scripts pour charger votre site Web, cela peut entraîner des vitesses lentes.

De nombreux scripts sont nécessaires pour afficher votre site Web, mais il y a de fortes chances que vous ayez du CSS et du JavaScript inutiles. Si vous ne savez pas comment faire la différence, vous pouvez revenir à PageSpeed ​​Insights.

Comme vous l'avez fait avec les trois premières méthodes, faites défiler jusqu'à la section Opportunités . Cette fois, recherchez JavaScript et CSS inutilisés.

À côté de chaque script inutilisé, il y aura une URL qui vous indiquera d'où il vient. Dans cet exemple, Google Analytics et Google Tag Manager créaient du JavaScript inutile.

Si vous savez quel thème ou quels plugins sont à l'origine du problème, vous pouvez envisager de les supprimer. Ensuite, vous pouvez installer différentes versions bien codées et plus légères.

Alternativement, vous pouvez utiliser un plugin comme Asset CleanUp pour supprimer les CSS et JavaScript inutilisés. Cet outil peut éliminer les ressources bloquant le rendu pour réduire le nombre de requêtes HTTP de votre site.

Une fois que vous avez installé et activé Asset Cleanup sur votre site, accédez à Asset CleanUp → CSS/JS Manager dans votre tableau de bord. Sur cette page, vous pouvez sélectionner différents éléments de votre site Web pour afficher son CSS et son JavaScript.

Par exemple, vous pouvez cliquer sur la page d' accueil et tous les fichiers chargés seront affichés sur cette page.

Ces informations seront répertoriées en fonction de l'emplacement. Vous pouvez faire défiler la page pour voir les scripts de vos plugins, thèmes, logiciels de base et sources tierces.

Il existe deux façons de supprimer un morceau de script. Vous pouvez le décharger sur cette page spécifique ou sur l'ensemble du site.

Une fois que vous avez supprimé les scripts inutilisés, cliquez sur Mettre à jour . Après cela, vous pouvez vider votre cache pour appliquer immédiatement ces modifications.

5. Minifier CSS et JavaScript

Bien que vous puissiez facilement supprimer des scripts de votre site, vous ne voudrez supprimer que ceux que vous n'utilisez pas. Pour les CSS et JavaScript nécessaires, vous pouvez simplement les réduire à la place.

Un moyen simple de le faire est d'installer le plugin Autoptimize. Il s'agit d'un outil gratuit qui peut réduire automatiquement vos fichiers CSS et JavaScript après un simple processus d'installation.

Après l'installation, accédez à Paramètres → Optimisation automatique . Sous Options JavaScript , vous pouvez cocher la case en regard de Optimiser le code JavaScript .

Ensuite, vous devrez faire de même pour les CSS Options . En personnalisant ces paramètres, l'outil réduira automatiquement le CSS et le JavaScript existants sur votre site Web.

Lorsque vous avez terminé, enregistrez vos modifications. Vous avez également la possibilité de vider votre cache après ce processus.

6. Retarder le temps d'exécution de JavaScript

Pour optimiser encore plus votre JavaScript, vous pouvez retarder son temps d'exécution. Cela implique de dire au navigateur de ne charger le JavaScript qu'après qu'un utilisateur interagit avec votre contenu. À moins qu'un visiteur ne fasse défiler la page ou ne clique sur un bouton, ces scripts ne seront pas traités.

Pour ce faire, vous pouvez utiliser un plugin comme Flying Scripts. Avec cet outil, vous pouvez retarder l'exécution des fichiers JavaScript jusqu'à ce qu'il y ait une activité des visiteurs sur votre site.

Après avoir activé les Flying Scripts, allez dans Paramètres → Flying Scripts . Cela ouvrira la page des paramètres du plugin, où vous pourrez commencer à implémenter les retards JavaScript.

Commencez par écrire des mots-clés qui identifient les scripts que vous souhaitez retarder. Par exemple, vous pouvez utiliser "gtag" pour un script Google Tag Manager.

Ensuite, vous pouvez implémenter un délai d'attente. Essentiellement, cela exécutera le JavaScript lorsqu'il n'y a pas eu d'activité pendant une certaine période de temps. Vous pouvez régler une minuterie jusqu'à dix secondes. Une fois que vous avez terminé, cliquez sur Enregistrer les modifications.

7. Mettre en place un réseau de diffusion de contenu

Une autre option efficace pour améliorer votre premier délai d'entrée consiste à utiliser un réseau de diffusion de contenu (CDN). Il s'agit d'un groupe de serveurs connectés qui peuvent distribuer votre contenu en ligne aux utilisateurs du monde entier.

Lorsque vous utilisez un CDN, vous pouvez réduire la distance entre votre serveur et les visiteurs en ligne. En effet, lorsqu'un internaute visite votre site, le contenu est diffusé à partir du serveur le plus proche de son emplacement. Si vous n'avez qu'un seul serveur à un endroit, l'envoi de données aux utilisateurs internationaux peut prendre beaucoup de temps.

Heureusement, les sites qui utilisent Jetpack sont déjà livrés avec un CDN gratuit. Si vous accédez à Jetpack → Paramètres → Performances , vous pouvez activer l'accélérateur de site.

Jetpack optimisera vos images et vos fichiers statiques. Contrairement aux autres fournisseurs de CDN, il n'y a pas de limite de fichiers. De plus, vous n'aurez pas à vous soucier des frais mensuels supplémentaires ou d'un processus de gestion compliqué.

Foire aux questions sur le premier délai d'entrée

Jusqu'à présent, nous avons examiné le fonctionnement du premier délai d'entrée et comment vous pouvez améliorer votre score. Examinons maintenant quelques questions courantes sur le FID.

Comment puis-je mesurer le score FID de mon site WordPress ?

Vous pouvez facilement mesurer le score de premier délai d'entrée de votre site Web à l'aide d'un outil pour Core Web Vitals. PageSpeed ​​Insights est une option facile à utiliser. Il vous suffit d'entrer l'URL de votre site et l'outil générera un rapport détaillé sur les performances de votre site.

Google Search Console fonctionne de manière très similaire. Après avoir vérifié que vous possédez un site Web, vous pouvez afficher votre rapport FID basé sur des données de visiteurs réelles.

Vous pouvez également utiliser Phare. Cet outil vous donne le temps de blocage total (TBT) de votre site. Bien que cela n'affiche pas les résultats des visiteurs réels, cela peut vous donner une meilleure compréhension de la réactivité de votre page.

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

En termes simples, votre site tombera dans l'un des trois scores :

• Bon : 100 millisecondes ou moins
• Besoin d'amélioration : plage de 100 ms à 300 ms
• Médiocre : supérieur à 300 ms

Après avoir mesuré votre score FID, tout résultat supérieur à 100 millisecondes nécessitera quelques ajustements.

Comment puis-je optimiser facilement mon score FID ?

Vous pouvez améliorer votre score FID en optimisant les scripts de votre site Web. Habituellement, les fichiers JavaScript et CSS complexes invitent un navigateur à arrêter de se charger jusqu'à ce qu'il les traite. En supprimant, différant ou minimisant les scripts, vous pouvez augmenter la vitesse de votre site.

Bien que vous puissiez utiliser différents outils pour ce processus, Jetpack Boost peut vous aider à mettre en œuvre plusieurs solutions à la fois. En utilisant ce plugin, vous pouvez optimiser votre structure CSS et différer le JavaScript non essentiel.

Améliorez votre première impression

Lorsqu'un nouveau visiteur interagit avec votre site Web, il s'attend à ce que son navigateur réponde rapidement. Si votre site a un délai de première entrée (FID) élevé, les utilisateurs peuvent quitter la page sans lire votre contenu. En vous concentrant sur le temps de réponse de votre site, vous pouvez améliorer l'expérience utilisateur et fidéliser davantage de visiteurs.

Votre site Web peut avoir un score FID médiocre en raison d'un codage JavaScript et CSS lourd et inefficace. Heureusement, vous pouvez facilement identifier ces problèmes à l'aide d'un outil tel que PageSpeed ​​Insights de Google. Ensuite, vous pouvez installer un plugin comme Jetpack Boost pour minifier ou différer CSS et JavaScript.