First Contentful Paint (FCP) mesure le temps qu'une page prend entre le chargement initial et le premier contenu rendu affiché à l'écran.
En 2019, Google a annoncé qu'il classerait les sites Web sur la base de deux autres mesures de performance : First Contentful Paint et First Input Delay.
Plus tard, Google a introduit trois Vitaux Web de base: Premier délai d'entrée, Décalage de mise en page cumulé.
Dans cet article, nous parlerons de First Contentful Paint car il a continué d'être une mesure importante de l'expérience utilisateur et représente le score de performance global d'un site Web.
Qu'est-ce que le premier score de contenu ?
La première peinture de contenu d'un site Web correspond au moment où le navigateur récupère et affiche le premier élément DOM de la page. Les éléments canvas, images ou tex, les éléments non blancs et les SVG sont considérés comme du contenu DOM.
En termes simples, le FCP est le temps qu'il faut à un utilisateur de site Web pour voir tout contenu sur son navigateur une fois qu'il a cliqué sur le lien du site Web.
Par conséquent, un FCP extrêmement rapide garantit que les utilisateurs trouvent quelque chose d'utile dès qu'ils arrivent sur la page.
Nous avons récemment publié un article sur le premier délai d'entrée. Si vous l'avez lu, vous vous demandez peut-être quelle est la différence entre First Contentful Paint et First Input Delay ?
Différence entre la première peinture contente et le premier délai d'entrée :
Premier délai d'entrée (FID)
Le FID mesure l'interactivité : le temps qu'un site Web met à répondre après que le visiteur a interagi (par exemple, en cliquant sur un bouton ou un lien) avec lui.
Première peinture de contenu (FCP) :
Le FCP mesure le temps qu'une page prend entre le chargement initial et le premier contenu affiché à l'écran.
Certains d'entre vous peuvent se demander en quoi la première peinture est différente de la première peinture de contenu. Nous allons jeter un coup d'oeil:
Première peinture vs première peinture contente :
Pour les non-initiés, la première peinture correspond à la détection d'un rendu par le navigateur. Ce rendu peut être aussi subtil que la couleur d'arrière-plan.
- Premières peintures :
Les premières peintures sont déclenchées très tôt dans le chargement de la page, mais elles ne fournissent aucune information ou « contenu » aux utilisateurs. La couleur d'arrière-plan est généralement peinte rapidement, alors que le contenu réel met plus de temps à apparaître à l'écran.
Le premier temps de peinture n'est donc pas aussi utile puisque le site n'affiche pas vraiment d'informations utiles.
- Première peinture contente :
First Contentful Paint signifie le chargement de tout «contenu» informatif pour les utilisateurs finaux. Il est déclenché lorsqu'un contenu est peint ; rendu de texte, d'image ou de canevas.
Le temps de First Contentful Paint donne un aperçu utile de la rapidité avec laquelle vos utilisateurs découvrent votre site Web, car il représente le temps de chargement du contenu réel sur la page. Étant donné que l'accent est mis sur le «contenu», il s'agit d'une mesure plus utile par rapport à la première peinture.
Comment mesurer la première peinture contente ?
Les webmasters ou éditeurs peuvent mesurer le First Contentful Paint de leur site web grâce à de multiples outils dont :
Qu'est-ce qu'un bon score FCP ?
Selon les directives de Google, la première peinture de contenu d'une page Web doit se produire dans les 1.8 secondes. Lorsqu'une page Web se charge dans les 2 secondes, elle garantit une bonne expérience utilisateur aux visiteurs car ils peuvent accéder aux informations plus rapidement.
Si la première peinture de contenu d'un site Web prend plus de 3 secondes à se charger, elle est considérée comme lente.
Google classe le timing FCP dans trois catégories différentes :
- Bon – entre 0 seconde et 1.8 seconde
- Besoin d'amélioration - entre 1.8 seconde et 3 secondes
- Médiocre – plus de 3 secondes
Comment améliorer le temps de First Contentful Paint (FCP):
Maintenant que nous avons compris ce qu'est le FCP et pourquoi est-ce important, regardons comment on peut améliorer le timing du FCP :
- Éliminer les ressources bloquant le rendu :
Les ressources de blocage de rendu sont les fichiers qui doivent être rendus sur un site Web. Ceux-ci peuvent inclure des polices, des fichiers CSS, JavaScript et HTML. Ces fichiers sont appelés "blocage du rendu" car ils ont priorité sur les autres éléments de la page (par exemple, les images, le texte ou tout autre contenu destiné à l'utilisateur).
Ce retard crée une augmentation soudaine du FCP puisque les fichiers de blocage de rendu sont généralement de grande taille et qu'ils ne contiennent même pas de contenu de site.
Le temps FCP peut être réduit si vous supprimez les ressources de rendu du chemin de rendu critique, différez les ressources non critiques ou supprimez le JS inutile. - Réduisez le temps de réponse du serveur :
TTFB ou Time to first byte est le temps total qu'il faut à un navigateur pour recevoir le premier octet du contenu d'une page. Si TTFB est inférieur, le timing FCP sera également inférieur.
Voici comment,
FCP = TTFB + Temps de rendu + Temps de chargement du contenu
Comme vous pouvez le voir, le FCP dépend du TTFB. Par conséquent, l'optimisation du TTFB améliorerait automatiquement le score FCP. Vous pouvez réduire le TTFB en utilisant un CDN de qualité, en activant la mise en cache pour votre site Web et en choisissant un fournisseur d'hébergement rapide. - Supprimer le CSS inutile
Si vous avez des fichiers dans vos feuilles de style qui ne sont pas utilisés, mais qui prennent beaucoup de vitesse, il est inutile de les conserver. Par conséquent, tout code inutilisé ou ancien doit être supprimé afin qu'il n'affecte pas le temps de chargement de votre site.
- Minifier HTML, JavaScript et CSS
La minification de HTML, JavaScript et CSS peut réduire considérablement le temps FCP de votre site Web. La minification supprime tous les caractères supplémentaires tels que les espaces des fichiers CSS, HTML et JavaScript de votre site. Bien que l'espacement améliore la lisibilité, les navigateurs n'en ont pas besoin. Ces espaces occupent en fait des octets et les minimiser réduirait la taille de la page et améliorerait le temps de peinture du premier contenu.
En résumé :
Étant donné que Google considère la vitesse des pages comme une mesure de performance importante, First Contentful Paint continuera d'être une mesure importante pour les sites Web.
Avoir une chronologie FCP faible non seulement permet aux utilisateurs de rester sur votre site, mais améliore également l'expérience utilisateur globale.
Nous sommes d'accord, le FCP peut être une mesure difficile à cerner, mais une petite optimisation de la réduction du FCP augmentera certainement l'UX et les temps de chargement globaux de votre site.
Questions fréquentes
First Contentful Paint (FCP) mesure la rapidité avec laquelle les visiteurs peuvent voir le contenu réel (texte, images, vidéos, etc.) sur votre page. Nos anciens rapports suivaient déjà le FCP, qui est lié à la vitesse de chargement de votre page.
Lors du First Contentful Paint (FCP), le navigateur restitue le premier bit de contenu du DOM, donnant à l'utilisateur la première indication que la page est en cours de chargement.
Sur la base des données de l'archive HTTP, votre score FCP compare le temps FCP de votre page à celui de sites Web réels. FCP s'affiche en 1.2 seconde pour les sites dont les performances se situent dans le quatre-vingt-dix-neuvième centile, par exemple. Votre score FCP est de 99 si le FCP de votre site Web est de 1.2 seconde.
Shubham est un spécialiste du marketing numérique possédant une riche expérience de travail dans le secteur des technologies publicitaires. Il possède une vaste expérience dans le secteur du programmatique, dans la conduite de stratégies commerciales et de fonctions de mise à l'échelle, y compris, mais sans s'y limiter, la croissance et le marketing, les opérations, l'optimisation des processus et les ventes.
