Vous avez du mal à respecter les temps du First Contentful Paint (FCP) sur votre site ?
Que vous ne sachiez même pas ce qu’est le First Contentful Paint ou que vous recherchiez des conseils spécifiques pour accélérer les temps de First Contentful Paint sur votre site, cet article est fait pour vous.
Nous commencerons par expliquer ce qu’est le First Contentful Paint et comment vous pouvez le mesurer sur votre site.
Ensuite, nous partagerons une série de tactiques que vous pouvez utiliser pour accélérer les temps FCP sur votre site. Et pour rendre cet article aussi accessible que possible, nous essaierons de présenter des outils non techniques et des extensions WordPress pour vous aider à mettre tout cela en œuvre.
Allez, on s’y met !
Qu’est-ce que First Contentful Paint (FCP) ?
Le First Contentful Paint, souvent abrégé en FCP, est un indicateur de performance axé sur l’expérience utilisateur qui mesure le temps nécessaire pour que la première partie de la page soit visible sur l’écran de l’utilisateur.
Le FCP est un indicateur important parce qu’il affecte la performance perçue. Lorsqu’un internaute visite votre site pour la première fois, son navigateur affiche un écran vide, ce qui n’est pas une bonne expérience pour lui.
Une fois que le contenu commence à se charger, le visiteur aura au moins l’impression qu’il se passe « quelque chose » et que le contenu complet de la page se chargera bientôt. Ainsi, un temps de chargement rapide peut donner à l’utilisateur l’impression que votre site web est rapide, même si le chargement du reste du contenu prend un peu plus de temps.
À l’inverse, un temps de chargement lent est frustrant pour les utilisateurs, car il met en évidence le fait que la page prend beaucoup de temps à se charger. Il n’y a rien de pire que de voir les visiteurs rester assis devant leur écran vide et se demander si votre site web fonctionne.
First Contentfu Paint vs Largest Contentful Paint
Le Largest Contentful Paint (LCP) est une autre mesure populaire axée sur l’expérience utilisateur qui fonctionne de la même manière que le First Contentful Paint.
En raison de la similitude des mesures, il peut être difficile de comprendre les différences entre First Contentful Paint et Largest Contentful Paint.
Voici la différence fondamentale entre les deux :
- FCP – mesure le temps nécessaire à l’apparition du premier objet. Il peut s’agir de n’importe quoi, à condition qu’un certain type de contenu apparaisse sur la page.
- LCP – mesure le temps nécessaire à l’apparition du contenu principal de la page.
En raison de cette différence, le temps FCP de votre page doit toujours être au moins un peu plus rapide que le temps LCP de votre page. D’après la définition des mesures, il est impossible que le temps d’affichage du LCP soit plus rapide que le temps d’affichage du FCP. Bien qu’ils puissent techniquement être égaux si le « premier » élément à charger est le même que l’élément « principal », cela ne se produira pas sur la plupart des pages.
Pour illustrer cela, voici une chronologie visuelle d’une analyse WebPageTest que nous avons effectuée sur la page d’accueil de Kinsta.
- Le FCP apparait dans la bande de 1,0 seconde (0,924 seconde, pour être exact). C’est la première fois que l’on passe d’une page blanche à un contenu visuel.
- Le LCP apparait dans la bande de 1,3 seconde (1,217 seconde exactement). C’est à ce moment-là que le contenu « principal » de la page est visible.
Qu’est-ce qu’un bon temps de First Contentful Paint ?
Google recommande de viser un délai de 1,8 seconde ou moins pour les pages de votre site.
Google considère que les temps d’affichage compris entre 1,8 et 3,0 secondes sont « à améliorer », tandis que les temps d’affichage supérieurs à 3,0 secondes sont « médiocres »
Comment mesurer le temps de First Contentful Paint d’une page ?
Le moyen le plus simple de mesurer le temps de première peinture d’une page de votre site est d’utiliser l’outil PageSpeed Insights de Google, mais il existe également d’autres outils que vous pouvez utiliser.
L’avantage de PageSpeed Insights est qu’il vous donnera à la fois des résultats de tests simulés et des données FCP provenant d’utilisateurs réels (si votre site a suffisamment de trafic pour être inclus dans le rapport sur l’expérience utilisateur de Chrome).
Il couvre également les performances des ordinateurs de bureau et des téléphones portables, car le temps d’affichage de votre page varie en fonction de l’appareil et de la vitesse de connexion de l’utilisateur.
Voici comment tester une page :
- Ouvrez la page PageSpeed Insights.
- Saisissez l’URL de la page de votre site que vous souhaitez tester.
- Cliquez sur le bouton Analyser.
Après une courte attente, vous devriez voir vos résultats.
Si votre site a suffisamment de trafic pour être inclus dans le rapport sur l’expérience utilisateur de Chrome, vous verrez 2 temps de FCP différents :
- Le temps indiqué dans la section « Découvrez ce que vivent vos utilisateurs réels » est le temps de FCP moyen des visiteurs humains réels de votre site.
- Le temps indiqué dans la section « Diagnostiquer les problèmes de performance » est basé sur un test simulé. Vous pouvez voir les conditions de la simulation dans l’encadré gris situé sous les chiffres.
Vous pouvez également basculer entre les résultats pour mobiles et pour ordinateurs de bureau en utilisant les onglets en haut de la page.
Pour tester d’autres pages de votre site, vous pouvez répéter le même processus.
Les temps de réponse varient en fonction de la page, c’est pourquoi nous vous recommandons de tester plusieurs pages pour vous faire une idée précise des performances de votre site.
Par exemple, vous pouvez tester la page d’accueil, la page de liste des blogs, un seul article de blog, etc. Et encore une fois, assurez-vous d’examiner les données pour les mobiles et les ordinateurs de bureau.
Autres moyens de mesurer le temps de First Contentful Paint
Bien que PageSpeed Insights offre l’un des moyens les plus simples de voir les temps de FCP réels et simulés pour votre site, il existe également d’autres outils de test des performances que vous pouvez utiliser en complément ou en remplacement de PageSpeed Insights.
Voici quelques bons points de départ :
- WebPageTest – vous permet d’effectuer des tests simulés en utilisant différentes vitesses de connexion, différents appareils et différents lieux.
- Chrome Developer Tools – vous permet d’effectuer des tests de performance directement à partir de votre navigateur.
- DebugBear – vous permet d’effectuer des tests simulés à partir d’un ordinateur de bureau ou d’un appareil mobile et inclut des tonnes de données en plus du FCP.
- GTmetrix – vous permet d’effectuer des tests simulés à partir de différents endroits. Vous pouvez voir le temps de FCP dans l’onglet Performance – notre guide complet sur les tests GTmetrix le couvre plus en détail.
Qu’est-ce qui peut influer sur le temps de réponse de votre site ?
À un niveau élevé, il y a deux « groupes » de problèmes qui peuvent ralentir le FCP :
- Temps de réponse lent du serveur – si votre serveur met trop de temps à fournir les données de votre site aux navigateurs des utilisateurs, votre page aura un temps de FCP lent. Il peut s’agir de problèmes tels qu’un hébergement ou un DNS lent, la non-utilisation de la mise en cache (qui demande au serveur de faire plus de travail avant de pouvoir servir une page), la non-utilisation d’un réseau de diffusion de contenu (CDN), etc.
- Code de site web mal optimisé – même si votre serveur réagit rapidement, le temps de réponse du FCP peut être lent si le code de votre site est mal optimisé. Par exemple, votre page peut contenir des tonnes de JavaScript qui empêchent le chargement du contenu visible. Il peut également y avoir des problèmes avec les CSS, les images ou d’autres parties du code de votre site.
En fonction de votre site, vous pouvez rencontrer des problèmes dans un seul domaine ou dans les deux.
Comment accélérer le First Contentful Paint : 10 astuces qui fonctionnent
Maintenant que vous savez ce qu’est le First Contentful Paint et pourquoi il est important, passons à des conseils pratiques que vous pouvez mettre en œuvre pour améliorer les temps de votre site.
L’avantage de ces conseils est qu’ils amélioreront toutes les mesures de performance de votre site, et pas seulement le FCP.
Voici un résumé rapide de la liste – nous les examinerons en détail ci-dessous :
1. Passer à un hébergement plus rapide
Il y a un fait incontournable lorsqu’il s’agit du FCP :
Si l’hébergement sous-jacent de votre site est lent, votre FCP le sera également, même si votre site est parfaitement optimisé.
La mise en œuvre des autres conseils de cette liste améliorera les temps de FCP de votre site, mais les performances de votre site seront toujours limitées par la qualité de votre hébergement.
Vous pouvez donc commencer par mettre en œuvre les autres conseils de cette liste. Mais si vous êtes toujours aux prises avec des temps de réponse trop lents après avoir fait tout ce qu’il fallait, il se peut que vous deviez passer à un hébergement plus rapide.
Si vous ne savez pas par où commencer, l’hébergement WordPress infogéré de Kinsta est un excellent choix.
Non seulement l’infrastructure sous-jacente est optimisée pour les performances, mais Kinsta peut également vous aider à mettre en œuvre automatiquement un grand nombre des autres stratégies de cette liste, y compris la mise en cache, le réseau de diffusion de contenu (CDN), les DNS optimisés, les images optimisées, et plus encore.
2. Utiliser la mise en cache des pages (idéalement au niveau du serveur)
Si vous avez créé votre site avec WordPress, il devra traiter dynamiquement le code côté serveur pour chaque visiteur (par défaut).
Lorsqu’une personne visite votre page, votre serveur d’hébergement devra exécuter le PHP de WordPress et interroger la base de données de votre site afin de générer le document HTML final à transmettre au navigateur de l’utilisateur.
Cela prend du temps, en particulier sur un hébergement peu puissant, ce qui peut avoir un effet important sur les délais d’exécution de votre site.
Avec la mise en cache des pages, vous pouvez « mettre en cache » la version HTML finie de chaque page. Au lieu de devoir traiter le code côté serveur à chaque visite, votre serveur répondra immédiatement avec la version HTML finie dans son cache.
Si vous utilisez l’hébergement Kinsta, Kinsta implémentera automatiquement la mise en cache des pages pour vous via sa fonctionnalité de cache edge.
La particularité de l’approche de cache edge de Kinsta est qu’elle peut servir les pages mises en cache à partir du réseau mondial de Cloudflare. Nous verrons ce qu’est un réseau de diffusion de contenu dans la section suivante, mais l’avantage principal est qu’il vous permet d’obtenir des temps de chargement globaux très rapides.
Si vous êtes hébergé ailleurs, vous pouvez vérifier si votre hébergeur dispose d’une fonction de mise en cache au niveau du serveur ou utiliser l’une des nombreuses extensions WordPress de mise en cache, telles que WP Rocket et FlyingPress.
3. Mettre en place un réseau de diffusion de contenu (CDN)
Un réseau de diffusion de contenu (CDN) est un réseau mondial de serveurs qui stockent une copie de tout ou partie du contenu/fichier de votre site.
Lorsqu’une personne visite votre site, le CDN lui transmet automatiquement les fichiers de votre site à partir de l’emplacement physiquement le plus proche du visiteur.
Comme la distance physique joue encore un rôle dans les temps de chargement (nous n’avons pas encore vaincu la vitesse de la lumière !), le navigateur du visiteur recevra les fichiers de votre site plus rapidement, ce qui améliorera votre temps de chargement.
Si vous utilisez l’hébergement Kinsta, Kinsta implémente automatiquement un CDN gratuit alimenté par Cloudflare pour l’ensemble des pages de votre site, ce qui offre les performances globales les plus rapides.
Si vous êtes hébergé ailleurs, vous pouvez mettre en place un CDN vous-même en utilisant des fournisseurs tels que Cloudflare, Amazon CloudFront, Fastly et d’autres.
4. Utiliser un fournisseur de DNS plus rapide
Avant que le navigateur d’un utilisateur puisse se connecter au serveur de votre site web, il doit d’abord utiliser le système de noms de domaine (DNS) pour trouver le serveur web associé au nom de domaine de votre site.
Le fournisseur de DNS que vous avez configuré pour votre nom de domaine affectera la durée de ce processus, ce qui affectera le FCP de votre site.
Par exemple, selon DNSPerf, la différence entre le fournisseur le plus rapide et le fournisseur le plus lent est de plus de 130 ms, ce qui est assez significatif.
Si vous êtes hébergé chez Kinsta, vous avez déjà accès à un DNS premium alimenté par Amazon Route53 lorsque vous utilisez les serveurs de noms de Kinsta.
Si vous êtes hébergé ailleurs, Cloudflare offre l’un des meilleurs services DNS gratuits.
5. Optimiser le CSS de votre site
Maintenant que vous avez résolu les problèmes de temps de réponse du serveur, il est temps d’optimiser le code de votre site, en commençant par son CSS.
Les feuilles de style CSS contrôlent la conception et le style des éléments de votre page. Bien qu’il s’agisse d’un élément essentiel de tout site web, votre CSS peut ralentir les temps de réponse de votre FCP s’il se charge de manière non optimisée et/ou si vous chargez des CSS inutiles sur des pages qui n’en ont pas besoin.
Nous avons consacré un article entier à l’optimisation des feuilles de style CSS, mais passons en revue les tactiques les plus importantes pour accélérer le FCP.
Supprimer les feuilles de style CSS inutilisées
Tout d’abord, vous devez supprimer les feuilles de style CSS inutilisées des pages qui n’en ont pas besoin.
Pour cela, vous pouvez utiliser la méthode manuelle. Un outil comme PurifyCSS peut analyser vos pages à la recherche de CSS inutilisés, puis vous pouvez supprimer manuellement ce code. PageSpeed Insights signale également les feuilles de style CSS inutilisées dans la section « Reduce unused CSS » de ses diagnostics.
Cependant, si vous utilisez WordPress, il existe des extensions utiles qui peuvent automatiser l’ensemble du processus pour vous, ce qui est beaucoup plus facile (en particulier pour les non-développeurs). WP Rocket, FlyingPress et Perfmatters sont de bonnes options à considérer.
Toutes ces extensions sont des outils premium. Cependant, nous pensons qu’elles valent la peine d’être investies car elles peuvent également vous aider à mettre en œuvre un grand nombre des autres conseils de cette liste.
Inline CSS critique et reporter le CSS non critique
Par défaut, votre site attendra probablement d’avoir chargé tout le code CSS avant de commencer à rendre le contenu au-dessus du pli. Cependant, ce n’est pas totalement optimal du point de vue de l’expérience utilisateur car vous n’avez vraiment besoin que du CSS nécessaire pour le contenu au-dessus du pli – tout le reste peut attendre jusqu’à plus tard.
La feuille de style CSS pour le contenu supérieur d’une page est appelée CSS critique.
Pour accélérer le FCP de votre page et d’autres mesures de performance, vous pouvez placer ce CSS critique directement dans la section <head> de la page (en d’autres termes, vous pouvez le placer en ligne) plutôt que de la charger dans une feuille de style externe.
Pour les utilisateurs plus expérimentés, vous pouvez générer manuellement le CSS critique d’une page à l’aide d’un outil tel que celui-ci.
Mais encore une fois, sur WordPress, vous pouvez automatiser ce processus pour chaque page individuelle de votre site en utilisant FlyingPress ou WP Rocket.
Une fois que vous avez intégré le CSS critique sur une page, vous pouvez en toute sécurité reporter le chargement du reste du CSS de la page à plus tard dans le processus de chargement de la page(après que le contenu au-dessus du pli a déjà été rendu).
WP Rocket et FlyingPress le feront automatiquement pour vous dans le cadre de leur fonctionnalité CSS critique, ce qui est une autre raison de les utiliser.
Minifier le code CSS
Enfin, une autre façon d’ajouter un peu de performance au code CSS de votre site est de le minifier. Lorsque vous minifiez le code CSS, vous supprimez les caractères et les espaces inutiles, ce qui permet de réaliser des économies de taille encore plus marginales.
Des extensions comme WP Rocket et FlyingPress peuvent le faire pour vous. Vous pouvez également trouver des extensions spécifiques à la minification comme Fast Velocity Minify.
6. Optimiser le JavaScript de votre site
Outre le CSS, le JavaScript de votre site est un autre domaine dans lequel vous devriez passer du temps à optimiser le code de votre site.
Comme pour les feuilles de style CSS, il existe plusieurs stratégies différentes que vous pouvez mettre en œuvre pour réduire l’impact de JavaScript sur les temps de réponse de votre site.
Ne pas utiliser d’éléments dépendant de JavaScript au-dessus du pli
Si vous utilisez JavaScript pour des fonctionnalités importantes en amont, comme le menu de navigation de votre site (c’est particulièrement fréquent pour la version mobile d’un site, car de nombreux menus mobiles reposent sur JavaScript), cela peut ralentir votre temps de FCP, car les navigateurs des utilisateurs doivent charger le JavaScript lourd avant de pouvoir commencer à rendre la page.
Si vous utilisez WordPress, le choix d’un thème aux performances optimisées devrait vous aider à éviter ce problème, car les bons développeurs éviteront de s’appuyer sur JavaScript pour ces fonctions.
Vous pouvez également essayer d’éviter d’utiliser des duaporama et d’autres éléments alimentés par JavaScript dans les zones situées au-dessus du pli.
Supprimer le JavaScript inutile
Bien que vous souhaitiez mettre l’accent sur la réduction de l’utilisation de JavaScript dans les éléments situés au-dessus du pli, c’est aussi une bonne idée de supprimer le plus possible de JavaScript inutile de chaque page.
Pour commencer, vous devez supprimer toutes les extensions WordPress qui n’apportent pas d’amélioration significative à votre site, car de nombreuses extensions WordPress s’appuient sur JavaScript pour fonctionner.
Une autre option consiste à utiliser une extension de gestion de scripts comme Asset CleanUp ou Perfmatters pour désactiver JavaScript page par page, ce qui vous permet de désactiver les scripts sur les pages où ils ne sont pas nécessaires tout en les laissant activés sur d’autres pages.
Vous trouverez également un guide plus technique sur la manière de désactiver les extensions page par page.
Éliminer le JavaScript qui bloque le rendu (defer ou delay)
Quoi qu’il en soit, vous aurez probablement toujours besoin de charger au moins un peu de JavaScript sur votre page. Pour vous assurer que ce JavaScript n’interfère pas avec le chargement du contenu au-dessus du pli, il existe deux stratégies courantes que vous pouvez mettre en œuvre :
- Différer le JavaScript bloquant le rendu – vous pouvez éviter de bloquer le chargement d’autres contenus en reportant le chargement du JavaScript à un stade ultérieur du processus de rendu de la page. Vous pouvez utiliser defer ou async, et il existe des extensions WordPress pour automatiser ce processus.
- Retarder le chargement de JavaScript jusqu’à l’interaction avec l’utilisateur : vous pouvez complètement attendre le chargement de tout ou partie du JavaScript de votre site jusqu’à ce que l’utilisateur interagisse avec la page (par exemple, en cliquant ou en faisant défiler la page). Cette méthode offre la meilleure amélioration des performances, mais vous devrez peut-être exclure manuellement certains scripts pour éviter de causer des problèmes.
Vous pouvez mettre en œuvre l’une ou l’autre de ces tactiques sur WordPress grâce à des extensions telles que WP Rocket ou FlyingPress.
Nous avons également des guides sur la façon de différer l’analyse de JavaScript et sur la façon d’éliminer les ressources bloquant le rendu.
Minifier le code JavaScript
Enfin, vous pouvez minifier le reste du code JavaScript de votre site pour obtenir de petits avantages supplémentaires en termes de performances en supprimant les caractères inutiles.
Comme pour la minification du CSS, la plupart des extensions de mise en cache et de performance (y compris WP Rocket et FlyingPress) peuvent le faire pour vous. Vous pouvez également utiliser une extension ciblée comme Fast Velocity Minify.
7. Désactiver le chargement différé (lazy loading) pour les images au-dessus du pli
Avec le chargement différé des images, vous pouvez retarder le chargement des images de votre site jusqu’à ce qu’elles soient nécessaires (par exemple, lorsqu’un utilisateur fait défiler la page vers le bas).
Normalement, c’est une bonne chose pour les performances si vous chargez de manière différée des images qui se trouvent sous le pli. Toutefois, l’utilisation du chargement différé pour les images situées au-dessus du pli peut en fait avoir un effet négatif sur les temps de chargement et de déchargement de votre site.
Par conséquent, vous devez vous assurer que vous excluez toutes les images situées au-dessus du pli du chargement différé.
Si vous utilisez la fonction principale de chargement différé de WordPress, WordPress devrait le faire automatiquement. Mais si vous rencontrez des problèmes, vous pouvez ajuster manuellement ce comportement en utilisant la fonction wp_omit_loading_attr_threshold.
Si vous utilisez une extension pour le chargement différé, l’extension devrait vous donner une option pour faire cela. Par exemple, Perfmatters vous permet d’exclure automatiquement un certain nombre d’images principales et d’exclure manuellement des images spécifiques si nécessaire.
Si votre extension ne propose pas cette fonctionnalité, envisagez de passer à une extension qui la propose.
8. Optimiser la diffusion des polices
Pour garantir que le contenu textuel est visible pendant le chargement (ce qui peut avoir une incidence sur les délais de traitement et l’expérience utilisateur), il est important d’optimiser également le chargement des polices si vous utilisez des polices personnalisées (telles que des polices trouvées sur Google Fonts).
Pour éviter tout problème, vous pouvez utiliser les options Font-Display: Optional ou Font-Display : Swap.
Avec Font-Display : Optional, vous pouvez indiquer aux navigateurs des utilisateurs d’utiliser une police de secours si la police personnalisée ne se charge pas assez rapidement.
Si vous ne souhaitez pas utiliser votre propre CSS, il existe un certain nombre d’extensions WordPress qui peuvent optimiser le chargement des polices pour vous, notamment WP Rocket, FlyingPress et Perfmatters.
9. Essayer de réduire la taille du DOM autant que possible
Selon Mozilla, le Document Object Model (DOM) est « la représentation en données des objets qui constituent la structure et le contenu d’un document sur le web »
Bien que les visiteurs humains n’interagissent pas directement avec le DOM, le DOM d’une page est important pour aider les navigateurs web à comprendre et à afficher le contenu d’une page.
En règle générale, un DOM plus grand et plus complexe entrainera des temps de traitement plus lents qu’une structure DOM plus courte et optimisée.
Voici quelques conseils pour réduire la taille du DOM de votre site :
- Utiliser un thème WordPress optimisé pour les performances – sur WordPress, votre thème jouera un rôle important dans la taille du DOM de votre site. Consultez nos articles sur les thèmes WordPress les plus rapides et les thèmes WooCommerce les plus rapides.
- Utiliser le bloc Saut de page – vous pouvez découper une longue page à l’aide du bloc de saut de page.
- Optimiser la pagination – vous pouvez utiliser la pagination dans WordPress pour diviser les pages qui listent vos articles de blog (ou d’autres types de publication personnalisés).
- Afficher des extraits – au lieu d’afficher le texte complet sur les pages de liste, envisagez d’afficher un extrait.
- Limiter ou éviter d’utiliser des constructeurs de pages « lourds » – si les constructeurs de pages visuels, par glisser-déposer, peuvent être très agréables du point de vue de la conception, ils peuvent aussi ajouter beaucoup de poids au DOM. Du point de vue des performances, il est préférable de s’en tenir à l’éditeur natif. Il se peut que vous trouviez que le compromis de performance d’un constructeur visuel en vaille la peine pour la puissance de conception ajoutée, et c’est généralement correct tant que vous mettez en œuvre les autres conseils.
10. Éviter les redirections (en particulier les redirections multiples)
Les redirections vous permettent d’envoyer du trafic d’une URL vers une autre URL avant le chargement de la page. Par exemple, vous pouvez rediriger une personne qui visite la version HTTP de votre site vers la version HTTPS.
Cependant, comme la redirection doit être terminée avant que le navigateur de l’utilisateur ne puisse charger la page, chaque redirection ajoute généralement des centaines de millisecondes de retard au temps FCP de votre site (et à d’autres indicateurs de performance).
Voici quelques conseils pour éviter les redirections inutiles :
- Mettez à jour les URL codées en dur si vous passez de HTTP à HTTPS – si vous passez votre site à HTTPS, vous devez mettre à jour toutes les URL dans la base de données de votre site pour utiliser HTTPS au lieu de vous fier aux redirections.
- Faîtes pointez les URL vers les versions WWW ou non WWW correctes – assurez-vous que toutes vos URL utilisent la bonne version afin d’éviter les redirections de WWW vers non WWW (ou vice versa).
- Réparez les liens internes cassés – mettez à jour tous les liens internes cassés au lieu de compter sur les redirections pour envoyer les utilisateurs au bon endroit.
- Demandez à d’autres sites de réparer les liens externes brisés (si cela en vaut la peine) – si vous recevez beaucoup de trafic vers un lien brisé provenant d’un site tiers, vous pouvez contacter le propriétaire du site et lui demander de réparer le lien au lieu de recourir à des redirections.
Pour trouver les problèmes de redirection, vous pouvez utiliser l’outil gratuit Kinsta redirect checker. Nous avons également publié un article sur les meilleures pratiques en matière de redirection WordPress.
Par exemple, vous pouvez voir ici que le vérificateur de redirections de Kinsta a détecté plusieurs redirections lorsque nous avons saisi http://www.wordpress.org comme URL :
- Une redirection de HTTP vers HTTPS.
- Une deuxième redirection de WWW vers non-WWW.
Si vous constatez des redirections multiples de ce type, vous devez les corriger.
Résumé
First Contentful Paint est une mesure de performance axée sur l’expérience utilisateur qui vous permet de voir combien de temps il faut pour que le premier élément de contenu devienne visible sur votre page. Il est similaire, mais légèrement différent, du Largest Contentful Paint.
Si vous optimisez le temps du First Contentful Paint de votre site, cela aura pour effet naturel d’améliorer également le temps du Largest Contentful Paint, ainsi que la plupart des autres mesures de performance de votre site.
Pour accélérer vos délais, vous devez vous concentrer sur l’optimisation du code frontend de votre site et du temps de réponse du serveur.
Si vous mettez un site avec un code optimisé sur un hébergement WordPress rapide comme Kinsta, vous devriez être en mesure d’obtenir les temps de FCP de votre site bien en dessous de la marque de 1,8 secondes que Google considère comme « bon »
Laisser un commentaire