{"id":1780810,"date":"2019-12-27T18:02:00","date_gmt":"2019-12-27T17:02:00","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=1780810"},"modified":"2022-03-24T10:49:55","modified_gmt":"2022-03-24T09:49:55","slug":"donner-une-bonne-premiere-impression-grace-au-first-contentful-paint-et-au-first-input-delay","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/fr\/blog\/donner-une-bonne-premiere-impression-grace-au-first-contentful-paint-et-au-first-input-delay\/","title":{"rendered":"Donner une bonne premi\u00e8re impression gr\u00e2ce au First Contentful Paint et au First Input Delay"},"content":{"rendered":"

Google a r\u00e9cemment ajout\u00e9 le rapport exp\u00e9rimental de vitesse Search Console<\/a>, comme il l\u2019avait annonc\u00e9 d\u00e9but 2019. Chez WP Rocket, nous avons not\u00e9 un int\u00e9r\u00eat grandissant chez nos clients pour les mesures au coeur de ce nouveau rapport : le First Contentful Paint <\/strong>(FCP) et le First Input Delay <\/strong>(FID).<\/p>

Google pr\u00e9cise bien que ce nouveau rapport de vitesse est pour l\u2019instant \u201cexp\u00e9rimental\u201d car il a encore besoin d\u2019\u00eatre r\u00e9vis\u00e9 et am\u00e9lior\u00e9. Pourtant, la nouvelle section Search Console appara\u00eet maintenant sur tous les comptes. C\u2019est la raison pour laquelle beaucoup de personnes se posent des questions au sujet de ce rapport.  <\/p>

Dans cet article, nous verrons comment fonctionne ce rapport de vitesse pour la Search Console. Nous verrons \u00e9galement en d\u00e9tails 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\u00e9ter les conseils de Google.  <\/p>

Le rapport de vitesse dans Google Search Console<\/h2>

Si vous utilisez des outils de test de performance et de vitesse de Google, comme PageSpeed Insights et Lighthouse<\/a>, il est fort probable que vous vous sentiez \u00e0 l\u2019aise avec le rapport de vitesse de la Search Console. <\/p>

Elle a pour but de mesurer les performances via l\u2019\u00e9tat de vitesse<\/a> (la l\u00e9gende vert-jaune-rouge que nous connaissons maintenant si bien !), et d\u2019autres URL similaires. <\/p>

Les URL de votre site web sont class\u00e9es par groupes : lentes, moyennes<\/em> ou rapides<\/em> sur des types d\u2019appareils sp\u00e9cifiques (ordinateur de bureau et mobile). 
<\/p>

\"\"\/
Rapport Vitesse dans le Search Console de Google<\/figcaption><\/figure>

La console utilise les donn\u00e9es pr\u00e9lev\u00e9es dans le rapport d\u2019exp\u00e9rience utilisateur Chrome (CrUX). Ces donn\u00e9es d\u2019exp\u00e9rience utilisateur viennent de vrais utilisateurs de Chrome<\/strong>. <\/p>

Il faut garder \u00e0 l\u2019esprit que le rapport d\u2019exp\u00e9rience utilisateur Chrome collecte des donn\u00e9es de performances anonymis\u00e9es uniquement sur de vrais utilisateurs de Chrome<\/strong> qui ont visit\u00e9 la page dans diff\u00e9rentes conditions syst\u00e8me et r\u00e9seau. <\/p>

Cela veut dire que, si une URL n\u2019atteint pas le seuil minimal de donn\u00e9es pour les mesures analys\u00e9es par Google, cette mesure ne sera pas inclue dans le rapport. <\/p>

Les mesures dans le rapport de vitesse de Google Search Console<\/h2>

Le rapport Search Console Speed repose sur deux mesures : le First Contentful Paint (FCP) <\/strong>et le First Input Delay (FID)<\/strong>, qui ne sont pas deux nouveaux indicateurs. <\/p>

Si vous connaissez le fonctionnement de PageSpeed Insights<\/a> et Chrome Lighthouse, vous les avez probablement d\u00e9j\u00e0 vus dans les audits de performance<\/a>.<\/p>

Faire une bonne premi\u00e8re impression<\/h3>

Pour vous donner une id\u00e9e globale de ce que sont le FCP et le FID, pensez \u00e0 l\u2019importance de faire une bonne premi\u00e8re impression<\/strong> lorsque vous rencontrez une nouvelle personne, en particulier dans des conditions professionnelles. Gr\u00e2ce \u00e0 cette premi\u00e8re impression, vous pourriez obtenir de nouveaux projets, \u00e9tendre votre r\u00e9seau et vos affaires. <\/p>

C\u2019est la m\u00eame chose pour votre site : il doit donner une bonne premi\u00e8re impression pour que les utilisateurs qui arrivent sur vos pages se sentent bien et continuent de lire (ou d\u2019acheter, ou d’interagir avec vous).  <\/p>

Si, dans la vraie vie, la premi\u00e8re impression de nous se base sur des choses que nous ne pouvons pas forc\u00e9ment contr\u00f4ler (les traits du visage, le langage corporel, l\u2019attitude g\u00e9n\u00e9rale, etc.), notre site web a plus de chance. <\/p>

Il y a plusieurs facteurs que nous pouvons ajuster afin que notre site donne une bonne premi\u00e8re impression, et nous avons m\u00eame les outils pour mesurer le r\u00e9sultat final. <\/p>

Le First Contentful Paint (FCP) et le First Input Delay (FID) sont deux des mesures de performance que nous pouvons utiliser<\/a>. <\/p>

Elles nous aident \u00e0 r\u00e9pondre aux questions comme \u201ccombien de temps doit attendre un utilisateur avant de voir le contenu de mon site ?\u201d ou \u201ccombien de temps doivent-ils attendre avant de pouvoir interagir avec les \u00e9l\u00e9ments de la page ?\u201d <\/em><\/p>

Voyons ce que ces mesures signifient et comment en tirer le meilleur parti. <\/p>

Que signifie First Contentful Paint (FCP) ?<\/h2>

Le First Contentful Paint, ou FCP, mesure le temps \u00e9coul\u00e9 entre le moment o\u00f9 la navigation commence et celui o\u00f9 le navigateur affiche le premier contenu \u00e0 l\u2019\u00e9cran. <\/p>

Voici comment l\u2019\u00e9quipe de Google le d\u00e9crit :<\/a><\/p>

\u201cLe FCP mesure combien de temps il faut au navigateur pour afficher le premier \u00e9l\u00e9ment du contenu DOM apr\u00e8s qu\u2019un utilisateur s\u2019est rendu sur votre page. Les images, les \u00e9l\u00e9ments <canvas> autres que blanc, et SVG sur votre page sont consid\u00e9r\u00e9s comme du contenu DOM; Tout ce qui se trouve dans un iframe n\u2019est pas <\/em>inclu.\u201c<\/p>

Dans le cadre des mesures de performances sp\u00e9cifiques aux utilisateurs<\/a>, le FCP, avec le First Paint, sont les premi\u00e8res \u00e9tapes pour mesurer la phase \u201cest ce que \u00e7a commence<\/em>\u201d : Est ce que la navigation a commenc\u00e9 sans probl\u00e8me ? Est ce que le serveur a r\u00e9pondu ? <\/p>

\"First
Le First Paint se produit quand n\u2019importe quel rendu est d\u00e9tect\u00e9 dans le navigateur, tandis que le First Contentful Paint marque le moment o\u00f9 le first content est affich\u00e9 dans le navigateur.<\/em><\/figcaption><\/figure>

Comment am\u00e9liorer le First Contentful Paint sur votre site WordPress ?<\/h3>

Il n\u2019y a pas de secret, pour am\u00e9liorer le FCP, vous avez deux solutions (compatibles) :<\/p>

– Acc\u00e9l\u00e9rer le temps de chargement de vos ressources;<\/p>

– Eviter les blocages que votre navigateur rencontre lorsqu\u2019il affiche le contenu DOM.<\/p>

En utilisant un plugin de mise en cache, vous donnerez le premier boost au FCP de votre site WordPress. <\/p>

Avec WP Rocket, par exemple, votre site b\u00e9n\u00e9ficiera de la mise en cache de page<\/a>, ce qui r\u00e9duira imm\u00e9diatement le temps de chargement des \u00e9l\u00e9ments statiques de vos pages (HTML, images, CSS, et fichier JS).<\/p>

Gr\u00e2ce \u00e0 ses options d\u2019optimisation de fichiers<\/strong>, vous pourrez \u00e9galement : <\/p>