Qu'est-ce que le premier délai d'entrée (FID) ? Comment le réduire dans WordPress

Il y a un nom pour ce moment gênant lorsque vous essayez d'interagir avec une page pour la première fois et qu'il faut un certain temps pour qu'elle réponde. C'est ce qu'on appelle le premier délai d'entrée (FID) et c'est une mesure qui vous donne une idée de la qualité de l'expérience utilisateur (UX) d'un site Web.

Un FID faible vous indique qu'un site Web est correctement optimisé. Cela signifie que les navigateurs de vos visiteurs ne sont pas bloqués lors du chargement d'éléments et de scripts même après qu'il semble qu'une page soit rendue. Si vous pouvez obtenir votre score FID aussi bas que possible, cela rendra les visites des utilisateurs beaucoup plus agréables.

Dans cet article, nous allons parler de ce que signifie le premier délai d'entrée et pourquoi c'est une mesure si importante. Ensuite, nous passerons en revue quatre façons de réduire les scores FID dans WordPress. Allons-y !

Table des matières:

• Qu'est-ce que le premier délai d'entrée ?
• Comment mesurer le premier délai de saisie pour votre site Web
• Façons de réduire les scores de premier délai d'entrée dans WordPress

Qu'est-ce que le premier délai d'entrée (et pourquoi c'est une mesure importante)

Chaque fois que vous visitez un site Web, il se passe beaucoup de choses en arrière-plan. Avant de pouvoir voir une page, votre navigateur doit interroger son serveur, envoyer et traiter des requêtes, charger des éléments, etc. Pour un site Web moderne, vous pouvez avoir des dizaines de requêtes que votre navigateur doit satisfaire avant de voir une page entièrement rendue avec laquelle vous pouvez interagir.

Dans certains cas, il arrive qu'une page semble prête, mais votre navigateur traite toujours les requêtes et charge les scripts en arrière-plan. Lorsque vous essayez d'interagir avec cette page, vous pouvez constater qu'il y a un léger délai entre l'exécution d'une action et la réception d'une réponse.

Par exemple, si vous cliquez sur un lien, votre navigateur peut ne pas traiter la demande instantanément. Si vous appuyez sur un bouton, il se peut qu'il ne fasse rien à première vue. Cela peut se produire avec pratiquement n'importe quel élément interactif de votre site, et votre objectif est de réduire autant que possible ce premier délai de saisie.

Idéalement, le premier délai d'entrée de votre site doit être inférieur à 100 millisecondes. C'est la norme que Google juge acceptable pour les sites Web :

Nous mentionnons Google spécifiquement parce que le FID est l'une des trois mesures qu'il utilise pour évaluer les expériences utilisateur positives ou négatives sur un site Web. Ces trois métriques sont appelées Core Web Vitals et elles incluent également les deux métriques suivantes :

1. Largest Contentful Paint (LCP) : cette métrique mesure le temps nécessaire au chargement du plus grand élément d'une page.
2. Décalage de mise en page cumulé (CLS) : cela mesure à quel point une page "se décale" visuellement lors de son chargement. Si les éléments bougent trop pendant leur chargement, vous aurez un mauvais score CLS. Nous avons un guide sur la correction du changement de mise en page cumulatif pour WordPress.

Il y a deux raisons principales pour lesquelles Core Web Vitals est important. La première est qu'ils fournissent une mesure du degré d'optimisation de votre site. Si votre site Web a d'excellents scores, cela signifie qu'il se charge rapidement, qu'il est visuellement stable et que les utilisateurs n'ont pas à attendre trop longtemps pour interagir avec.

La deuxième raison pour laquelle les Core Web Vitals sont importants est qu'ils ont un impact sur l'optimisation des moteurs de recherche (SEO) de votre site. Google utilise ces mesures comme un petit signal lors de la détermination des classements. En fait, le géant des moteurs de recherche a clairement indiqué que Core Web Vitals est important en matière de référencement, mais pas au même degré que le contenu et les backlinks.

Comment mesurer le premier délai de saisie pour votre site Web

Le premier délai d'entrée peut être difficile à mesurer car vous devez collecter des données basées sur les visiteurs réels de votre site, contrairement à d'autres mesures de performances où vous pouvez simplement exécuter des tests simulés à l'aide d'un ordinateur.

Le moyen le plus simple de mesurer le premier délai de saisie pour votre site Web consiste à utiliser PageSpeed ​​Insights. Cependant, PageSpeed ​​Insights n'affichera les délais de première saisie que si votre site a suffisamment de trafic pour être inclus dans le rapport sur l'expérience utilisateur de Chrome.

Parlons d'abord du fonctionnement de PageSpeed ​​Insights, puis nous partagerons quelques alternatives que vous pouvez essayer si PageSpeed ​​Insights n'offre pas de mesures de délai de première saisie pour votre site :

Pour utiliser PageSpeed ​​Insights, entrez l'URL de la page que vous souhaitez tester. PageSpeed ​​Insights prendra quelques instants pour l'analyser, puis il renverra un rapport qui ressemble à ceci :

Dans l'ensemble, ce site Web n'a pas les meilleurs scores Core Web Vital. Cependant, vous pouvez voir qu'il se débrouille très bien en ce qui concerne la métrique First Input Delay, avec un temps moyen inférieur à 100 ms.

Cependant, comme nous l'avons mentionné ci-dessus, tous les sites ne verront pas cette métrique. Si vous avez un site à faible trafic, vous pourriez voir quelque chose comme ceci :

Dans cette situation, vous avez deux options :

1. Simple : vous pouvez utiliser la métrique Total Blocking Time de la section Lab Data comme approximation approximative de votre premier délai d'entrée. Ce n'est pas une représentation parfaite, mais la métrique Total Blocking Time est très similaire à First Input Delay. Généralement, si vous améliorez votre temps de blocage total, vous verrez également des améliorations similaires à votre temps de premier délai d'entrée.
2. Avancé : Vous pouvez utiliser un véritable outil de suivi des performances des utilisateurs tel que Request Metrics. Avec ces outils, vous devrez ajouter un script de suivi à votre site pour collecter des données utilisateur réelles.

Ci-dessous, vous pouvez voir où trouver la métrique Total Blocking Time dans PageSpeed ​​Insights :

Maintenant que vous savez comment mesurer le FID et les autres Core Web Vitals, parlons de la façon de les améliorer.

Façons de réduire les scores de premier délai d'entrée dans WordPress

Pour cette section, nous allons nous concentrer sur les optimisations WordPress qui amélioreront vos scores de premier délai d'entrée. Certaines de ces optimisations auront également un impact positif sur d'autres Core Web Vitals, ce qui les rendra d'autant plus utiles.

1. Supprimez les scripts inutiles de votre site Web

L'une des principales raisons pour lesquelles votre site Web WordPress peut prendre trop de temps à charger est qu'il doit exécuter une grande liste de scripts. Par scripts, nous entendons JavaScript et CSS, entre autres options possibles. Si vous utilisez un thème WordPress "complexe" ou un large éventail de plugins, il y a de fortes chances que vous ayez un peu trop de scripts exécutés en arrière-plan.

Déterminer quels scripts sont utiles et lesquels ne le sont pas peut être un défi, mais c'est là qu'intervient PageSpeed ​​Insights. Si vous exécutez un test pour l'une des pages de votre site, le rapport PageSpeed ​​Insights comprendra également une section Opportunités :

Cette section indiquera quels fichiers JavaScript et CSS votre site n'utilise pas. La suppression de ces scripts devrait diminuer vos scores FID en conséquence.

Dans de nombreux cas, ces scripts proviennent de plugins. Cela signifie que vous devez examiner longuement votre liste de plugins et déterminer les outils dont vous n'avez pas vraiment besoin. L'élimination de vos plugins est un excellent moyen de maintenir le chargement de votre site Web aussi rapidement que possible.

2. Différer le code non critique pendant le chargement

Il est courant de rencontrer des scripts ou du code spécifiques qui prennent trop de temps à charger. Le problème est que, dans certains cas, votre navigateur ne pourra pas finir de charger le reste des éléments d'une page tant qu'il n'aura pas traité ces scripts.

Si ces scripts ne sont pas "critiques", vous pouvez simplement dire à votre navigateur de les laisser jusqu'à la fin afin qu'ils ne ralentissent pas les choses pour tout le monde. C'est ce que nous appelons "différer du code non critique".

Votre premier arrêt pour déterminer quels scripts vous pouvez différer devrait être PageSpeed ​​Insights. Une fois que vous avez généré un rapport pour une page, PageSpeed ​​Insights inclura des recommandations sur la façon d'améliorer ses scores.

Parmi ces recommandations, vous trouverez une option qui lit Éliminer les ressources bloquant le rendu . Si vous cliquez dessus, il vous montrera une liste de scripts que vous pouvez différer :

Il existe deux façons de gérer les scripts de blocage de rendu dans WordPress. La première méthode consiste à utiliser async . Cela permet aux navigateurs de continuer à charger votre site Web pendant qu'ils analysent le script que vous spécifiez. Vous pouvez également différer le code afin qu'il se charge une fois que les navigateurs ont rendu le reste du document HTML.

Pour le configurer sur WordPress, vous pouvez utiliser le plugin JavaScript Async gratuit. Ou, de nombreux plugins de performance WordPress incluent des fonctionnalités pour différer le code. Si vous êtes prêt à payer pour un plugin premium, WP Rocket dispose de fonctionnalités pour différer automatiquement les CSS et JavaScript non critiques.

3. Utilisez les outils de minification CSS et JavaScript

Bien que nous soyons tous favorables à la suppression des CSS et JavaScript inutilisés, il existe certains scripts que vous ne voudrez pas éliminer. Par exemple, vous ne voudriez pas supprimer la feuille de style CSS d'une page à moins que vous ne vouliez un site Web qui semble avoir été extrait du siècle dernier.

Pour les scripts que vous ne pouvez pas supprimer, votre meilleur pari est de les réduire. Cela signifie supprimer les espaces et les caractères inutiles du code pour réduire la taille de chaque script. Il existe plusieurs outils qui réduiront automatiquement les scripts pour vous dans WordPress, tels que Autoptimize et Fast Velocity Minify :

De manière générale, la plupart des plugins d'optimisation et de mise en cache WordPress incluent également des outils de minification de script. Cependant, certains d'entre eux nécessitent beaucoup de travail de configuration, nous vous recommandons donc de vous en tenir à des options telles que l'optimisation automatique en matière de minification.

4. Utilisez un réseau de diffusion de contenu (CDN)

L'utilisation d'un CDN est un excellent moyen d'améliorer les performances de votre site Web. Avec un CDN, vous avez accès à un réseau de centres de données dans le monde entier qui peut mettre en cache le contenu de votre site. Lorsqu'un visiteur tente d'accéder à votre site Web, le CDN traitera cette demande et en fournira une version en cache.

Dans la plupart des cas, l'utilisation d'un CDN améliorera les temps de chargement et les scores FID de votre site Web. L'intégration de WordPress avec un CDN est simple et le plus grand défi consiste probablement à décider quel service utiliser.

Si vous recherchez des options CDN gratuites, nous vous recommandons d'opter pour l'une des options suivantes :

1. Cloudflare : C'est l'un des CDN les plus populaires du marché. Il est facile à intégrer à WordPress et offre un plan gratuit.
2. Jetpack : Le plugin Jetpack offre une fonctionnalité appelée Site Accelerator , qui utilise les serveurs WordPress.com pour mettre en cache les éléments statiques de votre site Web. Bien que Jetpack nécessite un compte WordPress.com, vous pouvez également l'utiliser sur des sites WordPress auto-hébergés.

Cependant, pour de meilleures performances, vous pouvez envisager un CDN premium tel que KeyCDN, StackPath ou Bunny CDN.

Réduisez dès aujourd'hui le premier délai de saisie de votre site

Mesurer quelque chose d'aussi abstrait peut être compliqué, c'est pourquoi chaque élément vital se concentre sur une situation spécifique qui peut avoir un impact négatif sur l'expérience des visiteurs. Tous les Core Web Vitals sont essentiels, mais le FID, en particulier, peut entraîner beaucoup de frustration si le délai est trop élevé.

Si vous cherchez des moyens d'améliorer votre score FID dans WordPress, voici ce que vous devez faire :

1. Supprimez les scripts inutiles de votre site Web.
2. Différez les CSS et JavaScript non critiques pendant le chargement.
3. Utilisez les outils de minimisation CSS et JavaScript, tels que Autoptimize et Fast Velocity Minify.
4. Utilisez un CDN, comme Cloudflare ou Jetpack.

Avez-vous des questions sur la façon de réduire les scores FID dans WordPress ? Parlons d'eux dans la section des commentaires ci-dessous!