Table des matières
Mis à jour le
Google a récemment ajouté le rapport expérimental de vitesse Search Console, comme il l’avait annoncé début 2019. Chez WP Rocket, nous avons noté un intérêt grandissant chez nos clients pour les mesures au coeur de ce nouveau rapport : le First Contentful Paint (FCP) et le First Input Delay (FID).
Google précise bien que ce nouveau rapport de vitesse est pour l’instant “expérimental” car il a encore besoin d’être révisé et amélioré. Pourtant, la nouvelle section Search Console apparaît maintenant sur tous les comptes. C’est la raison pour laquelle beaucoup de personnes se posent des questions au sujet de ce rapport.
Dans cet article, nous verrons comment fonctionne ce rapport de vitesse pour la Search Console. Nous verrons également en détails ce que sont le First Contentful Paint et le First Input Delay. Le but est de vous familiariser avec leur signification, et avoir de meilleurs outils pour interpréter les conseils de Google.
Le rapport de vitesse dans Google Search Console
Si vous utilisez des outils de test de performance et de vitesse de Google, comme PageSpeed Insights et Lighthouse, il est fort probable que vous vous sentiez à l’aise avec le rapport de vitesse de la Search Console.
Elle a pour but de mesurer les performances via l’état de vitesse (la légende vert-jaune-rouge que nous connaissons maintenant si bien !), et d’autres URL similaires.
Les URL de votre site web sont classées par groupes : lentes, moyennes ou rapides sur des types d’appareils spécifiques (ordinateur de bureau et mobile).
La console utilise les données prélevées dans le rapport d’expérience utilisateur Chrome (CrUX). Ces données d’expérience utilisateur viennent de vrais utilisateurs de Chrome.
Il faut garder à l’esprit que le rapport d’expérience utilisateur Chrome collecte des données de performances anonymisées uniquement sur de vrais utilisateurs de Chrome qui ont visité la page dans différentes conditions système et réseau.
Cela veut dire que, si une URL n’atteint pas le seuil minimal de données pour les mesures analysées par Google, cette mesure ne sera pas inclue dans le rapport.
Les mesures dans le rapport de vitesse de Google Search Console
Le rapport Search Console Speed repose sur deux mesures : le First Contentful Paint (FCP) et le First Input Delay (FID), qui ne sont pas deux nouveaux indicateurs.
Si vous connaissez le fonctionnement de PageSpeed Insights et Chrome Lighthouse, vous les avez probablement déjà vus dans les audits de performance.
Faire une bonne première impression
Pour vous donner une idée globale de ce que sont le FCP et le FID, pensez à l’importance de faire une bonne première impression lorsque vous rencontrez une nouvelle personne, en particulier dans des conditions professionnelles. Grâce à cette première impression, vous pourriez obtenir de nouveaux projets, étendre votre réseau et vos affaires.
C’est la même chose pour votre site : il doit donner une bonne première impression pour que les utilisateurs qui arrivent sur vos pages se sentent bien et continuent de lire (ou d’acheter, ou d’interagir avec vous).
Si, dans la vraie vie, la première impression de nous se base sur des choses que nous ne pouvons pas forcément contrôler (les traits du visage, le langage corporel, l’attitude générale, etc.), notre site web a plus de chance.
Il y a plusieurs facteurs que nous pouvons ajuster afin que notre site donne une bonne première impression, et nous avons même les outils pour mesurer le résultat final.
Le First Contentful Paint (FCP) et le First Input Delay (FID) sont deux des mesures de performance que nous pouvons utiliser.
Elles nous aident à répondre aux questions comme “combien de temps doit attendre un utilisateur avant de voir le contenu de mon site ?” ou “combien de temps doivent-ils attendre avant de pouvoir interagir avec les éléments de la page ?”
Voyons ce que ces mesures signifient et comment en tirer le meilleur parti.
Que signifie First Contentful Paint (FCP) ?
Le First Contentful Paint, ou FCP, mesure le temps écoulé entre le moment où la navigation commence et celui où le navigateur affiche le premier contenu à l’écran.
Voici comment l’équipe de Google le décrit :
“Le FCP mesure combien de temps il faut au navigateur pour afficher le premier élément du contenu DOM après qu’un utilisateur s’est rendu sur votre page. Les images, les éléments <canvas> autres que blanc, et SVG sur votre page sont considérés comme du contenu DOM; Tout ce qui se trouve dans un iframe n’est pas inclu.“
Dans le cadre des mesures de performances spécifiques aux utilisateurs, le FCP, avec le First Paint, sont les premières étapes pour mesurer la phase “est ce que ça commence” : Est ce que la navigation a commencé sans problème ? Est ce que le serveur a répondu ?
Comment améliorer le First Contentful Paint sur votre site WordPress ?
Il n’y a pas de secret, pour améliorer le FCP, vous avez deux solutions (compatibles) :
– Accélérer le temps de chargement de vos ressources;
– Eviter les blocages que votre navigateur rencontre lorsqu’il affiche le contenu DOM.
En utilisant un plugin de mise en cache, vous donnerez le premier boost au FCP de votre site WordPress.
Avec WP Rocket, par exemple, votre site bénéficiera de la mise en cache de page, ce qui réduira immédiatement le temps de chargement des éléments statiques de vos pages (HTML, images, CSS, et fichier JS).
Grâce à ses options d’optimisation de fichiers, vous pourrez également :
- Gérer des optimisations de performance avancées avec le CSS asynchrone / déféré et le chemin CSS critique;
- Minimiser le nombre de fichiers Javascript bloquant le rendu;
- Minifier et compresser les fichiers CSS et Javascript;
- Créer une version cache locale de Google Analytics, des fichiers Google Tag Manager et des tracking scripts de Facebook afin d’en améliorer la mise en cache navigateur.
Que signifie First Input Delay (FID) ?
Maintenant que vous savez ce qu’est le FCP, nous pouvons passer à la mesure suivante : le First Input Delay, ou FID. Cette mesure représente le moment où l’interaction se fait entre l’utilisateur et le navigateur.
Il n’y a que dans certains cas spécifiques qu’un site n’a pas de First Input Delay : cela arrive, par exemple, quand les utilisateurs ont besoin d’interagir avec le site en scrollant ou zoomant (ces actions ne sont pas couvertes par le FID).
Le First Input Delay (FID) mesure le temps entre le moment ou un utilisateur interagit avec votre site (par exemple, en cliquant sur un lien, en appuyant sur un bouton, ou en utilisant une fonction personnalisée avec JavaScript), et celui ou le navigateur est capable de répondre à cette interaction.
L’expérience utilisateur qualifie ce moment avec la question “est ce qu’on peut l’utiliser ?” Les utilisateurs peuvent-ils interagir avec la page ou est-elle encore occupée à se charger ?
De manière générale, il y a un input delay (ou input latency) lorsque le fil principal du navigateur est occupé à faire autre chose. Il ne peut pas répondre immédiatement à l’utilisateur. Cela arrive souvent à cause de JavaScript.
Une fois chargé, le JS doit être lu (analysé et compilé) par le navigateur. C’est seulement après cette phase que le navigateur peut l’exécuter. Plus les fichiers JS à charger sur vos pages sont lourds, plus le navigateur prendra de temps pour les analyser, compiler et exécuter.
S’il fallait placer le FID sur le RAIL, le modèle de performance spécifique à l’utilisateur, on le trouverait à la première étape : R (responsiveness).
Dans un test PageSpeed Insights, le FID est noté comme Max Potential First Input Delay : c’est le temps, en millisecondes, de la tâche la plus longue après le First Contentful Paint que vos utilisateurs peuvent expérimenter.
Comment améliorer le FID sur votre site WordPress ?
Pour optimiser votre score Max Potential FID, vous devez réduire la durée de vos tâches les plus longues. De manière générale, vous pouvez améliorer cette mesure en cherchant des moyens d’optimiser votre JavaScript.
Si vous utilisez WP Rocket, par exemple, vous pouvez activer la minification JS et tirer parti des add-ons Google Tracking et Facebook Pixel. Avec ces deux dernières fonctionnalités, vous pouvez héberger localement les fichiers JS de Google Analytics’ et Facebook Pixel, et WP Rocket peut leurs appliquer la mise en cache navigateur.
Ces options de WP Rocket n’auront pas un impact direct sur le FID, mais plus une page s’affiche rapidement, plus vite le fil principal du navigateur sera disponible pour permettre à l’utilisateur d’interagir avec la page.
Toutes les autres techniques pour optimiser le JavaScript nécessitent des compétences en personnalisation de code ou l’utilisation d’un plugin tiers spécifique.
Par exemple, vous pouvez essayer de réduire le temps d’exécution de JS en retirant tout le JavaScript qui n’est pas nécessaire sur la page. Pour ce faire, vous pouvez désactiver certains fichiers JS spécifiques de vos plugins ou de votre thème.
WP Rocket ne peut pas vous aider avec ça, mais d’autres plugins pourraient s’avérer utiles, comme Plugin Organizer, Asset CleanUp: Speed Booster, ou le Gonzales plugin.
Faites attention de toujours les gérer avec précaution, et de demander l’avis d’un développeur si vous ne savez pas par où commencer.
En revanche, si vous êtes développeur, nous vous recommandons d’aller voir la stratégie d’attendre jusqu’à ce que ça soit urgent par Philip Walton, un ingénieur chez Google.
En résumé
Le First Contentful Paint (FCP) et le First Input Delay (FID) sont deux mesures au coeur du rapport de vitesse de la nouvelle Search Console.
Il est important d’apprendre à mieux les connaître et d’avoir les outils pour interpréter au mieux les recommandations de Google. C’est pourquoi, dans cet article, nous avons appris ce qu’elles mesurent :
- Le First Contentful Paint, ou FCP, mesure le temps écoulé entre le moment où l’utilisateur commence à naviguer sur votre site, et celui où le navigateur commence à afficher le contenu à l’écran.
- Le First Input Delay, ou FID, mesure le temps écoulé entre le moment où un utilisateur interagit avec votre site (en cliquant sur un lien, en appuyant sur un bouton ou en utilisant n’importe quelle fonction personnalisée qui utilise JavaScript) et celui où le navigateur commence à répondre à cette interaction.
À travers cet article, nous avons pu comprendre ces mesures et voir comment les améliorer. Parfois, vous pouvez obtenir de meilleurs résultats grâce à un plugin comme WP Rocket, dont les fonctionnalités aident à réduire l’impact de tâches JavaScript à initialisation longue.
Quelle est votre expérience avec le FCP et le FID? Avez-vous essayé de les optimiser sur votre site ? N’hésitez- pas à nous donner vos impressions dans les commentaires !
