Comment améliorer First Contentful Paint (FCP) dans WordPress

Une introduction à First Contentful Paint

First Contentful Paint est une mesure utile qui surveille la vitesse de chargement de votre page. Il existe une variété de mesures similaires qui mesurent les performances d'un site. FCP, en particulier, se concentre sur le temps nécessaire pour que le premier élément de contenu apparaisse sur une page. Une fois le FCP généré, l'utilisateur sait que le reste est en route.

Il est similaire à la métrique LCP (Largest Contentful Paint) des Core Web Vitals de Google. Mais alors que le LCP mesure le temps de chargement du contenu « principal » d'un site, le FCP se concentre uniquement sur le premier élément de contenu, qui peut ou non être le contenu principal.

De nombreux facteurs contribuent à votre score FCP. Les fichiers JavaScript et le code HTML mal optimisé sont des causes courantes de ralentissement des performances, car de nombreuses ressources sont nécessaires pour les traiter. De plus, les scripts bloquant le rendu peuvent avoir un impact sur votre score FCP, car ils doivent être traités avant que toute autre opération puisse être effectuée.

Votre score FCP est important car il s'agit d'un indicateur de la vitesse globale de votre site Web. Non seulement les performances sont vitales pour votre UX, mais c'est aussi un facteur que les moteurs de recherche comme Google prennent en compte lorsqu'ils décident du classement de vos pages. De mauvaises performances peuvent conduire à des classements de recherche inférieurs. Cela signifie que si vous ne savez pas comment améliorer First Contentful Paint, cela peut avoir un impact sur la visibilité de votre site Web.

Comment mesurer First Contentful Paint

Bien que le FCP vous donne une fenêtre sur la perception des utilisateurs, il s'agit toujours d'une mesure qui peut être mesurée objectivement grâce à des tests en laboratoire et des données de terrain. Par exemple, PageSpeed ​​Insights est un outil qui vous permet de voir ce que vivent vos utilisateurs réels ( tant que votre site a suffisamment de trafic pour être inclus dans le rapport Chrome User Experience ).

Même si votre site ne dispose pas de suffisamment de données pour voir des expériences utilisateur réelles, PageSpeed ​​Insights peut toujours vous aider à collecter des données FCP dans ses tests de laboratoire simulés.

Pour l'utiliser, entrez simplement votre URL et obtenez un résultat immédiat :

Vous pouvez également basculer entre les vues mobile et bureau pour voir la réactivité de votre site Web sur divers appareils.

Un autre outil utile pour mesurer le FCP est WebPageTest, qui prend un peu plus de temps mais peut fournir une analyse plus approfondie.

Qu'est-ce qu'un bon moment FCP ?

Selon Chrome, votre site a un bon score FCP s'il est inférieur à 1,8 seconde. Lorsque votre score FCP dépasse trois secondes, c'est une source de préoccupation.

Cependant, même si votre site a actuellement un bon score FCP, il y a toujours place à l'amélioration.

Comment améliorer First Contentful Paint dans WordPress (6 techniques)

Maintenant que vous en savez un peu plus sur le FCP, voyons comment améliorer First Contentful Paint sur votre site via six méthodes efficaces :

1. Utiliser un réseau de diffusion de contenu (CDN)
2. Optimiser et compresser les images
3. Éliminer les ressources bloquant le rendu
4. Réduisez la taille de votre DOM
5. Améliorer le temps de réponse du serveur
6. Évitez trop de redirections de pages

1. Utiliser un réseau de diffusion de contenu (CDN)

Un réseau de diffusion de contenu (CDN) est un moyen simple d'augmenter les temps de chargement globaux. Sans un, lorsqu'un utilisateur visite votre site Web, il devra attendre pendant que les données nécessaires sont transférées entre le serveur principal de votre site et son emplacement. Cela peut entraîner des temps d'attente plus longs pour les utilisateurs géographiquement éloignés des serveurs de votre hébergeur.

D'autre part, un CDN offre un réseau de serveurs répartis dans le monde entier. Par conséquent, le contenu peut être diffusé à partir du serveur physiquement le plus proche de chaque visiteur.

Un exemple populaire de CDN est Cloudflare, qui compte plus de 275 centres de données dans le monde :

Avec Cloudflare, vous pouvez tirer parti d'autres techniques d'optimisation, telles que l'optimisation d'image sans perte.

En règle générale, les CDN utilisent également la mise en cache et d'autres stratégies pour améliorer le FCP. Par exemple, votre fournisseur de CDN peut proposer une minification et une compression de fichiers pour alléger votre site Web. Cela vous aide à réduire la latence, à améliorer l'expérience utilisateur et à alléger la charge sur votre serveur principal.

2. Optimiser et compresser les images

Les images sont rarement le premier élément à charger sur votre site Web. Cependant, si vous gérez un site très médiatisé, comme un portfolio ou une vitrine photographique, il est important d'optimiser et de compresser les images pour améliorer votre score FCP (et vos performances globales).

Une façon d'optimiser vos images consiste à passer à un format de fichier différent. Par exemple, si vous comptez actuellement sur JPG/JPEG ou PNG, vous pouvez passer à un format avec une meilleure compression, comme SVG ou WebP.

Vous devez également redimensionner les images aux dimensions les plus petites qui correspondent à vos besoins et les compresser pour réduire davantage leur taille.

Bien que vous puissiez faire tout cela manuellement à l'aide d'outils en ligne, un moyen beaucoup plus simple pour les utilisateurs de WordPress consiste à utiliser un plugin d'optimisation d'image.

Par exemple, le plugin gratuit Optimole peut automatiquement redimensionner, compresser et convertir vos images. De plus, il peut également les servir à partir de son CDN intégré, qui fait d'une pierre deux coups.

Cet outil vous permet également de fournir des images de haute qualité à des vitesses rapides, quel que soit l'appareil utilisé par les visiteurs pour accéder à votre site. Vous pouvez utiliser des fonctionnalités telles que le chargement différé et le redimensionnement d'image pour perfectionner davantage vos images.

3. Éliminer les ressources bloquant le rendu

Les ressources bloquant le rendu peuvent empêcher votre contenu de se charger rapidement, car le navigateur doit d'abord les traiter, même si elles ne sont pas importantes pour le chargement du contenu initial de votre site. En conséquence, ils peuvent ralentir votre score FCP. Cela peut inclure du code HTML, des feuilles de style CSS et des fichiers JavaScript.

Si vous vous demandez comment améliorer First Contentful Paint, il existe plusieurs façons d'éliminer les ressources bloquant le rendu. Si vous êtes à l'aise avec le développement et que vous trouvez du code qui n'est pas utilisé sur votre page, vous pouvez continuer et le supprimer. Vous pouvez également identifier vos ressources critiques et les « intégrer » dans votre page à l'aide des balises <script> et <style>.

De plus, il est possible de différer JavaScript, afin que votre contenu ne soit pas retardé pendant qu'il attend que le navigateur traite ces fichiers. De plus, vous pouvez générer du CSS critique pour afficher le contenu « au-dessus de la ligne de flottaison » (la partie que les utilisateurs voient immédiatement). Si vous n'êtes pas développeur, un outil comme Jetpack peut vous aider à apporter certaines de ces modifications.

4. Réduisez la taille de votre DOM

Lorsqu'une page Web est chargée, votre navigateur crée un modèle d'objet de document (DOM). Il s'agit d'une représentation de tous les objets qui composent votre page.

S'il y a trop de nœuds DOM (balises HTML) sur votre page, ou s'ils sont imbriqués trop profondément, le navigateur met plus de temps à traiter votre page. Cela peut entraîner des vitesses de chargement plus lentes et un mauvais score FCP.

Par conséquent, vous pouvez améliorer votre FCP en réduisant la taille de votre DOM. Vous pouvez le faire manuellement en supprimant les balises <div> inutiles, en divisant les longues pages en pages plus petites et en limitant le nombre de messages dans vos archives ou sur votre page d'accueil.

En plus de cela, vous pouvez charger paresseux vos éléments HTML à l'aide d'un plugin d'optimisation comme Optimole. Le chargement différé est une technique qui retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire. Plutôt que de tout traiter en même temps, le navigateur peut se concentrer sur la fourniture des éléments immédiatement visibles.

Le choix d'un thème optimisé peut également aider à réduire la taille de votre DOM, car de nombreux thèmes (et constructeurs de pages) utilisent trop de balises <div>. Si vous êtes à la recherche d'un nouveau thème, nous vous suggérons de consulter Neve, qui est rapide, léger et n'utilise que du code de qualité.

5. Améliorer le temps de réponse du serveur

Le temps de réponse du serveur est également appelé temps au premier octet (TTFB). Cette métrique mesure le temps qu'il faut entre le moment où un utilisateur fait une demande et le moment où le serveur envoie le premier octet d'information.

Il existe de nombreuses façons d'améliorer le temps de réponse de votre serveur (et par conséquent, votre score FCP).

Tout d'abord, il est important de choisir un hébergeur de qualité. Il est préférable de rechercher un hébergeur qui s'adresse spécifiquement aux sites Web WordPress et de faire attention à l'emplacement de ses serveurs. Idéalement, votre hôte devrait avoir des serveurs proches de votre public principal.

Si vous souhaitez améliorer les performances de votre hébergeur, vous pouvez choisir un fournisseur parmi notre collection basée sur les données de l'hébergement WordPress le plus rapide.

Cependant, si votre fournisseur d'hébergement ne propose pas de serveurs pratiques, vous pouvez toujours opter pour un CDN, dont nous avons parlé précédemment lors de la discussion sur la façon d'améliorer First Contentful Paint.

La mise en cache est un excellent moyen de réduire vos temps de réponse. Certains hébergeurs proposent une mise en cache intégrée. Alternativement, vous pouvez installer un plugin de mise en cache tel que WP Rocket ou WP Fastest Cache.

6. Évitez trop de redirections de pages

Lorsque vous visitez une page qui vous redirige immédiatement vers un autre site, votre navigateur doit effectuer une autre requête HTTP vers le nouvel emplacement. Cela peut entraîner un mauvais score FCP, car cela retarde le chargement de votre page Web.

Plus vous avez de redirections sur votre page, plus votre score FCP sera probablement mauvais. De plus, trop de redirections de pages peuvent gravement perturber votre UX.

Si le problème se produit sur l'ensemble du site, vous voudrez peut-être examiner comment vous gérez les redirections de www vers non-www (ou vice versa) et/ou de HTTP vers HTTPS.

Par exemple, si vous redirigez de http://www.yoursite.com vers http://yoursite.com , puis de nouveau vers https://yoursite.com , il serait plus efficace de le faire en une seule étape.

Si les redirections n'affectent votre FCP que sur une seule page, vous voudrez peut-être examiner toutes les redirections que vous avez créées pour cette page.

Vous pouvez gérer les redirections manuellement, bien que cela puisse prendre du temps. Il est généralement préférable d'opter pour un plugin WordPress comme Redirection :

Une fois installé, vous pouvez utiliser cet outil pour gérer les redirections facilement et rapidement.

Améliorez le temps FCP de votre site aujourd'hui

Sur les sites Web complexes ou riches en contenu, il peut être difficile de maintenir des temps de chargement rapides. Heureusement, en ciblant des mesures clés telles que First Contentful Paint (FCP), vous pouvez évaluer et améliorer le temps nécessaire aux visiteurs pour voir votre contenu.

Pour récapituler, voici comment améliorer First Contentful Paint dans WordPress :

Pour d'autres façons d'accélérer votre site, consultez notre collection de différentes façons d'accélérer WordPress.

Avez-vous des questions sur l'amélioration de FCP dans WordPress ? Faites-nous savoir dans la section commentaires ci-dessous!