Qu’est-ce que First Contentful Paint (FCP) ?<\/h2>\n
Le First Contentful Paint, souvent abr\u00e9g\u00e9 en FCP, est un indicateur de performance ax\u00e9 sur l’exp\u00e9rience utilisateur qui mesure le temps n\u00e9cessaire pour que la premi\u00e8re partie de la page soit visible sur l’\u00e9cran de l’utilisateur.<\/p>\n
Le FCP est un indicateur important parce qu’il affecte la performance per\u00e7ue<\/em>. Lorsqu’un internaute visite votre site pour la premi\u00e8re fois, son navigateur affiche un \u00e9cran vide, ce qui n’est pas une bonne exp\u00e9rience pour lui.<\/p>\n Une fois que le contenu commence \u00e0 se charger, le visiteur aura au moins l’impression qu’il se passe \u00ab quelque chose \u00bb et que le contenu complet de la page se chargera bient\u00f4t. Ainsi, un temps de chargement rapide peut donner \u00e0 l’utilisateur l’impression que votre site web est rapide, m\u00eame si le chargement du reste du contenu prend un peu plus de temps.<\/p>\n \u00c0 l’inverse, un temps de chargement lent est frustrant pour les utilisateurs, car il met en \u00e9vidence le fait que la page prend beaucoup de temps \u00e0 se charger. Il n’y a rien de pire que de voir les visiteurs rester assis devant leur \u00e9cran vide et se demander si votre site web fonctionne.<\/p>\n Le Largest Contentful Paint (LCP)<\/a> est une autre mesure populaire ax\u00e9e sur l’exp\u00e9rience utilisateur qui fonctionne de la m\u00eame mani\u00e8re que le First Contentful Paint.<\/p>\n En raison de la similitude des mesures, il peut \u00eatre difficile de comprendre les diff\u00e9rences entre First Contentful Paint et Largest Contentful Paint.<\/p>\n Voici la diff\u00e9rence fondamentale entre les deux :<\/p>\n En raison de cette diff\u00e9rence, le temps FCP de votre page doit toujours \u00eatre au moins un peu plus rapide que le temps LCP de votre page. D’apr\u00e8s la d\u00e9finition 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 \u00eatre \u00e9gaux si le \u00ab premier \u00bb \u00e9l\u00e9ment \u00e0 charger est le m\u00eame que l’\u00e9l\u00e9ment \u00ab principal \u00bb, cela ne se produira pas sur la plupart des pages<\/em>.<\/p>\n Pour illustrer cela, voici une chronologie visuelle d’une analyse WebPageTest que nous avons effectu\u00e9e sur la page d’accueil de Kinsta.<\/p>\n Google recommande de viser un d\u00e9lai de 1,8 seconde ou moins pour les pages de votre site.<\/p>\n Google consid\u00e8re que les temps d’affichage compris entre 1,8 et 3,0 secondes sont \u00ab \u00e0 am\u00e9liorer \u00bb, tandis que les temps d’affichage sup\u00e9rieurs \u00e0 3,0 secondes sont \u00ab m\u00e9diocres \u00bb<\/p>\n Le moyen le plus simple de mesurer le temps de premi\u00e8re peinture d’une page de votre site est d’utiliser l’outil PageSpeed Insights de Google<\/a>, mais il existe \u00e9galement d’autres outils que vous pouvez utiliser<\/a>.<\/p>\n L’avantage de PageSpeed Insights est qu’il vous donnera \u00e0 la fois des r\u00e9sultats de tests simul\u00e9s et des donn\u00e9es FCP provenant d’utilisateurs r\u00e9els (si votre site a suffisamment de trafic pour \u00eatre inclus dans le rapport sur l’exp\u00e9rience utilisateur de Chrome<\/em>).<\/p>\n Il couvre \u00e9galement les performances des ordinateurs de bureau et des t\u00e9l\u00e9phones portables, car le temps d’affichage de votre page varie en fonction de l’appareil et de la vitesse de connexion de l’utilisateur.<\/p>\n Voici comment tester une page :<\/p>\n Apr\u00e8s une courte attente, vous devriez voir vos r\u00e9sultats.<\/p>\n Si votre site a suffisamment de trafic pour \u00eatre inclus dans le rapport sur l’exp\u00e9rience utilisateur de Chrome, vous verrez 2<\/em> temps de FCP diff\u00e9rents :<\/p>\n Vous pouvez \u00e9galement basculer entre les r\u00e9sultats pour mobiles et pour ordinateurs de bureau en utilisant les onglets en haut de la page.<\/p>\n Pour tester d’autres pages de votre site, vous pouvez r\u00e9p\u00e9ter le m\u00eame processus.<\/p>\n Les temps de r\u00e9ponse varient en fonction de la page, c’est pourquoi nous vous recommandons de tester plusieurs pages pour vous faire une id\u00e9e pr\u00e9cise des performances de votre site.<\/p>\n 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\u00e9es pour les mobiles et les ordinateurs de bureau.<\/p>\n Bien que PageSpeed Insights offre l’un des moyens les plus simples de voir les temps de FCP r\u00e9els et simul\u00e9s pour votre site, il existe \u00e9galement d’autres outils de test des performances<\/a> que vous pouvez utiliser en compl\u00e9ment ou en remplacement de PageSpeed Insights.<\/p>\n Voici quelques bons points de d\u00e9part :<\/p>\n \u00c0 un niveau \u00e9lev\u00e9, il y a deux \u00ab groupes \u00bb de probl\u00e8mes qui peuvent ralentir le FCP :<\/p>\n En fonction de votre site, vous pouvez rencontrer des probl\u00e8mes dans un seul domaine ou dans les deux.<\/p>\n Maintenant que vous savez ce qu’est le First Contentful Paint et pourquoi il est important, passons \u00e0 des conseils pratiques que vous pouvez mettre en \u0153uvre pour am\u00e9liorer les temps de votre site.<\/p>\n L’avantage de ces conseils est qu’ils am\u00e9lioreront toutes les<\/em> mesures de performance de votre site<\/a>, et pas seulement le FCP.<\/p>\n Voici un r\u00e9sum\u00e9 rapide de la liste – nous les examinerons en d\u00e9tail ci-dessous :<\/p>\n Il y a un fait incontournable lorsqu’il s’agit du FCP :<\/p>\n Si l’h\u00e9bergement sous-jacent de votre site est lent, votre FCP le sera \u00e9galement, m\u00eame si votre site est parfaitement optimis\u00e9.<\/p>\n La mise en \u0153uvre des autres conseils de cette liste am\u00e9liorera les<\/em> temps de FCP de votre site, mais les performances de votre site seront toujours limit\u00e9es par la qualit\u00e9 de votre h\u00e9bergement.<\/p>\n Vous pouvez donc commencer par mettre en \u0153uvre les autres conseils de cette liste. Mais si vous \u00eates toujours aux prises avec des temps de r\u00e9ponse trop lents apr\u00e8s avoir fait tout ce qu’il fallait, il se peut que vous deviez passer \u00e0 un h\u00e9bergement plus rapide<\/a>.<\/p>\n Si vous ne savez pas par o\u00f9 commencer, l’h\u00e9bergement WordPress infog\u00e9r\u00e9 de Kinsta<\/a> est un excellent choix.<\/p>\n Non seulement l’infrastructure sous-jacente est optimis\u00e9e pour les performances, mais Kinsta peut \u00e9galement vous aider \u00e0 mettre en \u0153uvre automatiquement un grand nombre des autres strat\u00e9gies de cette liste, y compris la mise en cache, le r\u00e9seau de diffusion de contenu (CDN), les DNS optimis\u00e9s, les images optimis\u00e9es, et plus encore.<\/p>\n Si vous avez cr\u00e9\u00e9 votre site avec WordPress, il devra traiter dynamiquement le code c\u00f4t\u00e9 serveur pour chaque visiteur (par d\u00e9faut).<\/p>\n Lorsqu’une personne visite votre page, votre serveur d’h\u00e9bergement devra ex\u00e9cuter le PHP<\/a> de WordPress et interroger la base de donn\u00e9es de votre site<\/a> afin de g\u00e9n\u00e9rer le document HTML final \u00e0 transmettre au navigateur de l’utilisateur.<\/p>\n Cela prend du temps, en particulier sur un h\u00e9bergement peu puissant, ce qui peut avoir un effet important sur les d\u00e9lais d’ex\u00e9cution de votre site.<\/p>\n Avec la mise en cache des pages<\/a>, vous pouvez \u00ab mettre en cache \u00bb la version HTML finie de chaque page. Au lieu de devoir traiter le code c\u00f4t\u00e9 serveur \u00e0 chaque visite, votre serveur r\u00e9pondra imm\u00e9diatement avec la version HTML finie dans son cache.<\/p>\n Si vous utilisez l’h\u00e9bergement Kinsta, Kinsta impl\u00e9mentera automatiquement la mise en cache des pages pour vous via sa fonctionnalit\u00e9 de cache edge.<\/p>\n La particularit\u00e9 de l’approche de cache edge de Kinsta<\/a> est qu’elle peut servir les pages mises en cache \u00e0 partir du r\u00e9seau mondial de Cloudflare<\/a>. Nous verrons ce qu’est un r\u00e9seau 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\u00e8s rapides<\/a>.<\/p>\n Si vous \u00eates h\u00e9berg\u00e9 ailleurs, vous pouvez v\u00e9rifier si votre h\u00e9bergeur 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.<\/p>\n Un r\u00e9seau de diffusion de contenu (CDN)<\/a> est un r\u00e9seau mondial de serveurs qui stockent une copie de tout ou partie du contenu\/fichier de votre site.<\/p>\n Lorsqu’une personne visite votre site, le CDN lui transmet automatiquement les fichiers de votre site \u00e0 partir de l’emplacement physiquement le plus proche du visiteur.<\/p>\n Comme la distance physique joue encore un r\u00f4le dans les temps de chargement (nous n’avons pas encore vaincu la vitesse de la lumi\u00e8re !<\/em>), le navigateur du visiteur recevra les fichiers de votre site plus rapidement<\/a>, ce qui am\u00e9liorera votre temps de chargement.<\/p>\n Si vous utilisez l’h\u00e9bergement Kinsta, Kinsta impl\u00e9mente automatiquement un CDN gratuit aliment\u00e9 par Cloudflare<\/a> pour l’ensemble des pages de votre site, ce qui offre les performances globales les plus rapides.<\/p>\n Si vous \u00eates h\u00e9berg\u00e9 ailleurs, vous pouvez mettre en place un CDN vous-m\u00eame en utilisant des fournisseurs tels que Cloudflare, Amazon CloudFront, Fastly et d’autres.<\/p>\n Avant que le navigateur d’un utilisateur puisse se connecter au serveur de votre site web, il doit d’abord utiliser le syst\u00e8me de noms de domaine (DNS)<\/a> pour trouver le serveur web associ\u00e9 au nom de domaine de votre site.<\/p>\n Le fournisseur de DNS que vous avez configur\u00e9 pour votre nom de domaine affectera la dur\u00e9e de ce processus, ce qui affectera le FCP de votre site.<\/p>\n Par exemple, selon DNSPerf<\/a>, la diff\u00e9rence entre le fournisseur le plus rapide et le fournisseur le plus lent est de plus de 130 ms, ce qui est assez significatif.<\/p>\n Si vous \u00eates h\u00e9berg\u00e9 chez Kinsta<\/a>, vous avez d\u00e9j\u00e0 acc\u00e8s \u00e0 un DNS premium aliment\u00e9 par Amazon Route53<\/a> lorsque vous utilisez les serveurs de noms<\/a> de Kinsta.<\/p>\n Si vous \u00eates h\u00e9berg\u00e9 ailleurs, Cloudflare offre l’un des meilleurs services DNS gratuits.<\/p>\n Maintenant que vous avez r\u00e9solu les probl\u00e8mes de temps de r\u00e9ponse du serveur, il est temps d’optimiser le code de votre site, en commen\u00e7ant par son CSS.<\/p>\n Les feuilles de style CSS contr\u00f4lent la conception et le style<\/a> des \u00e9l\u00e9ments de votre page. Bien qu’il s’agisse d’un \u00e9l\u00e9ment essentiel de tout site web<\/a>, votre CSS peut ralentir les temps de r\u00e9ponse de votre FCP s’il se charge de mani\u00e8re non optimis\u00e9e et\/ou si vous chargez des CSS inutiles sur des pages qui n’en ont pas besoin.<\/p>\n Nous avons consacr\u00e9 un article entier \u00e0 l’optimisation des feuilles<\/a> de style CSS, mais passons en revue les tactiques les plus importantes pour acc\u00e9l\u00e9rer le FCP.<\/p>\n Tout d’abord, vous devez supprimer les feuilles de style CSS inutilis\u00e9es des pages qui n’en ont pas besoin.<\/p>\n Pour cela, vous pouvez utiliser la m\u00e9thode manuelle. Un outil comme PurifyCSS<\/a> peut analyser vos pages \u00e0 la recherche de CSS inutilis\u00e9s, puis vous pouvez supprimer manuellement ce code. PageSpeed Insights signale \u00e9galement les feuilles de style CSS inutilis\u00e9es dans la section \u00ab Reduce unused CSS \u00bb de ses diagnostics.<\/p>\n 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\u00e9veloppeurs). WP Rocket<\/a>, FlyingPress<\/a> et Perfmatters<\/a> sont de bonnes options \u00e0 consid\u00e9rer.<\/p>\n Toutes ces extensions sont des outils premium. Cependant, nous pensons qu’elles valent la peine d’\u00eatre investies car elles peuvent \u00e9galement vous aider \u00e0 mettre en \u0153uvre un grand nombre des autres conseils de cette liste.<\/p>\n Par d\u00e9faut, votre site attendra probablement d’avoir charg\u00e9 tout le<\/em> code CSS avant de commencer \u00e0 rendre le contenu au-dessus du pli. Cependant, ce n’est pas totalement optimal du point de vue de l’exp\u00e9rience utilisateur car vous n’avez vraiment besoin que du CSS n\u00e9cessaire pour le contenu au-dessus du pli – tout le reste peut attendre jusqu’\u00e0 plus tard.<\/p>\n La feuille de style CSS pour le contenu sup\u00e9rieur d’une page est appel\u00e9e CSS critique<\/strong>.<\/p>\n Pour acc\u00e9l\u00e9rer le FCP de votre page et d’autres mesures de performance, vous pouvez placer ce CSS critique directement dans la section Pour les utilisateurs plus exp\u00e9riment\u00e9s, vous pouvez g\u00e9n\u00e9rer manuellement le CSS critique d’une page \u00e0 l’aide d’un outil tel que celui-ci<\/a>.<\/p>\n Mais encore une fois, sur WordPress, vous pouvez automatiser ce processus pour chaque page individuelle de votre site en utilisant FlyingPress ou WP Rocket.<\/p>\n Une fois que vous avez int\u00e9gr\u00e9 le CSS critique sur une page, vous pouvez en toute s\u00e9curit\u00e9 reporter le chargement du reste du CSS de la page \u00e0 plus tard dans le processus de chargement de la page(apr\u00e8s que le contenu au-dessus du pli a d\u00e9j\u00e0 \u00e9t\u00e9 rendu<\/em>).<\/p>\n WP Rocket et FlyingPress le feront automatiquement pour vous dans le cadre de leur fonctionnalit\u00e9 CSS critique, ce qui est une autre raison de les utiliser.<\/p>\n Enfin, une autre fa\u00e7on d’ajouter un peu<\/em> de performance au code CSS de votre site est de le minifier. Lorsque vous minifiez le code CSS, vous supprimez les caract\u00e8res et les espaces inutiles, ce qui permet de r\u00e9aliser des \u00e9conomies de taille encore plus marginales.<\/p>\n Des extensions comme WP Rocket et FlyingPress peuvent le faire pour vous. Vous pouvez \u00e9galement trouver des extensions sp\u00e9cifiques \u00e0 la minification comme Fast Velocity Minify<\/a>.<\/p>\n Outre le CSS, le JavaScript<\/a> de votre site est un autre domaine dans lequel vous devriez passer du temps \u00e0 optimiser le code de votre site.<\/p>\n Comme pour les feuilles de style CSS, il existe plusieurs strat\u00e9gies diff\u00e9rentes que vous pouvez mettre en \u0153uvre pour r\u00e9duire l’impact de JavaScript sur les temps de r\u00e9ponse de votre site.<\/p>\n Si vous utilisez JavaScript pour des fonctionnalit\u00e9s importantes en amont, comme le menu de navigation de votre site<\/a> (c’est particuli\u00e8rement fr\u00e9quent pour la version mobile d’un site, car de nombreux menus mobiles reposent sur JavaScript<\/em>), cela peut ralentir votre temps de FCP, car les navigateurs des utilisateurs doivent charger le JavaScript lourd avant de pouvoir commencer \u00e0 rendre la page.<\/p>\n Si vous utilisez WordPress, le choix d’un th\u00e8me aux performances optimis\u00e9es<\/a> devrait vous aider \u00e0 \u00e9viter ce probl\u00e8me, car les bons d\u00e9veloppeurs \u00e9viteront de s’appuyer sur JavaScript pour ces fonctions.<\/p>\n Vous pouvez \u00e9galement essayer d’\u00e9viter d’utiliser des duaporama<\/a> et d’autres \u00e9l\u00e9ments aliment\u00e9s par JavaScript dans les zones situ\u00e9es au-dessus du pli.<\/p>\n Bien que vous souhaitiez mettre l’accent sur la r\u00e9duction de l’utilisation de JavaScript dans les \u00e9l\u00e9ments situ\u00e9s au-dessus du pli, c’est aussi une bonne id\u00e9e de supprimer le plus possible de JavaScript inutile de chaque page.<\/p>\n Pour commencer, vous devez supprimer toutes les extensions WordPress<\/a> qui n’apportent pas d’am\u00e9lioration significative \u00e0 votre site, car de nombreuses extensions WordPress s’appuient sur JavaScript pour fonctionner.<\/p>\n Une autre option consiste \u00e0 utiliser une extension de gestion de scripts comme Asset CleanUp<\/a> ou Perfmatters<\/a> pour d\u00e9sactiver JavaScript page par page, ce qui vous permet de d\u00e9sactiver les scripts sur les pages o\u00f9 ils ne sont pas n\u00e9cessaires tout en les laissant activ\u00e9s sur d’autres pages.<\/p>\n Vous trouverez \u00e9galement un guide plus technique sur la mani\u00e8re de d\u00e9sactiver les extensions<\/a> page par page.<\/p>\n 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\u00e8re pas avec le chargement du contenu au-dessus du pli, il existe deux strat\u00e9gies courantes que vous pouvez mettre en \u0153uvre :<\/p>\n Vous pouvez mettre en \u0153uvre l’une ou l’autre de ces tactiques sur WordPress gr\u00e2ce \u00e0 des extensions telles que WP Rocket ou FlyingPress.<\/p>\n Nous avons \u00e9galement des guides sur la fa\u00e7on de diff\u00e9rer l’analyse de JavaScript<\/a> et sur la fa\u00e7on d’\u00e9liminer les ressources bloquant le rendu<\/a>.<\/p>\n Enfin, vous pouvez minifier le reste du code JavaScript de votre site<\/a> pour obtenir de petits avantages suppl\u00e9mentaires en termes de performances en supprimant les caract\u00e8res inutiles.<\/p>\n 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 \u00e9galement utiliser une extension cibl\u00e9e comme Fast Velocity Minify.<\/p>\n Avec le chargement diff\u00e9r\u00e9<\/a> des images, vous pouvez retarder le chargement des images de votre site<\/a> jusqu’\u00e0 ce qu’elles soient n\u00e9cessaires (par exemple, lorsqu’un utilisateur fait d\u00e9filer la page vers le bas).<\/p>\n Normalement, c’est une bonne chose pour les performances si vous chargez de mani\u00e8re diff\u00e9r\u00e9e des images qui se trouvent sous le<\/em> pli. Toutefois, l’utilisation du chargement diff\u00e9r\u00e9 pour les images situ\u00e9es au-dessus du<\/em> pli peut en fait avoir un effet n\u00e9gatif sur les temps de chargement et de d\u00e9chargement de votre site.<\/p>\n Par cons\u00e9quent, vous devez vous assurer que vous excluez toutes les images situ\u00e9es au-dessus du pli du chargement diff\u00e9r\u00e9.<\/p>\n Si vous utilisez la fonction principale de chargement diff\u00e9r\u00e9 de WordPress, WordPress devrait<\/em> le faire automatiquement. Mais si vous rencontrez des probl\u00e8mes, vous pouvez ajuster manuellement ce comportement en utilisant la fonction wp_omit_loading_attr_threshold<\/a>.<\/p>\n Si vous utilisez une extension pour le chargement diff\u00e9r\u00e9, l’extension devrait<\/em> 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\u00e9cifiques si n\u00e9cessaire.<\/p>\n Si votre extension ne propose pas cette fonctionnalit\u00e9, envisagez de passer \u00e0 une extension qui la propose.<\/p>\n Pour garantir que le contenu textuel est visible pendant le chargement (ce qui peut avoir une incidence sur les d\u00e9lais de traitement et l’exp\u00e9rience utilisateur), il est important d’optimiser \u00e9galement le chargement des polices si vous utilisez des polices personnalis\u00e9es<\/a> (telles que des polices <\/em>trouv\u00e9es sur Google Fonts<\/a><\/em>).<\/p>\n Pour \u00e9viter tout probl\u00e8me, vous pouvez utiliser les options Font-Display: <\/strong>Optional<\/strong> ou Font-Display : Swap<\/strong><\/a>.<\/p>\n Avec Font-Display : Optional<\/strong>, vous pouvez indiquer aux navigateurs des utilisateurs d’utiliser une police de secours si la police personnalis\u00e9e ne se charge pas assez rapidement.<\/p>\n 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.<\/p>\n Selon Mozilla<\/a>, le Document Object Model (DOM) est \u00ab la repr\u00e9sentation en donn\u00e9es des objets qui constituent la structure et le contenu d’un document sur le web \u00bb<\/p>\n Bien que les visiteurs humains n’interagissent pas directement avec le DOM, le DOM d’une page est important pour aider les navigateurs web \u00e0 comprendre et \u00e0 afficher le contenu d’une page.<\/p>\n En r\u00e8gle g\u00e9n\u00e9rale, un DOM plus grand et plus complexe entrainera des temps de traitement plus lents qu’une structure DOM plus courte et optimis\u00e9e.<\/p>\n Voici quelques conseils pour r\u00e9duire la taille du DOM de votre site :<\/p>\n 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<\/strong> de votre site vers la version HTTPS<\/strong>.<\/p>\n Cependant, comme la redirection doit \u00eatre termin\u00e9e avant que le navigateur de l’utilisateur ne puisse charger la page, chaque redirection ajoute g\u00e9n\u00e9ralement des centaines de millisecondes de retard au temps FCP de votre site (et \u00e0 d’autres indicateurs de performance).<\/p>\n Voici quelques conseils pour \u00e9viter les redirections inutiles :<\/p>\n Pour trouver les probl\u00e8mes de redirection, vous pouvez utiliser l’outil gratuit Kinsta redirect checker<\/a>. Nous avons \u00e9galement publi\u00e9 un article sur les meilleures pratiques en mati\u00e8re de redirection WordPress<\/a>.<\/p>\n Par exemple, vous pouvez voir ici que le v\u00e9rificateur de redirections de Kinsta a d\u00e9tect\u00e9 plusieurs redirections lorsque nous avons saisi http:\/\/www.wordpress.org comme URL :<\/p>\nFirst Contentfu Paint vs Largest Contentful Paint<\/h3>\n
\n
\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/first-contentful-paint-vs-largest-contentful-paint-example-1024x450.jpg\")
Qu’est-ce qu’un bon temps de First Contentful Paint ?<\/h2>\n
![\"Lignes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/good-fcp-time-1024x269.jpg\")
Comment mesurer le temps de First Contentful Paint d’une page ?<\/h2>\n
\n
\n
![\"Temps](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fcp-time-pagespeed-insights-683x1024.jpg\")
Autres moyens de mesurer le temps de First Contentful Paint<\/h3>\n
\n
Qu’est-ce qui peut influer sur le temps de r\u00e9ponse de votre site ?<\/h2>\n
\n
Comment acc\u00e9l\u00e9rer le First Contentful Paint : 10 astuces qui fonctionnent<\/h2>\n
1. Passer \u00e0 un h\u00e9bergement plus rapide<\/h3>\n
2. Utiliser la mise en cache des pages (id\u00e9alement au niveau du serveur)<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-page-caching-edge-1024x771.jpg\")
3. Mettre en place un r\u00e9seau de diffusion de contenu (CDN)<\/h3>\n
![\"Cloudflare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/cloudflare-global-network-1024x645.jpg\")
4. Utiliser un fournisseur de DNS plus rapide<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-dns-management-1024x663.jpg\")
5. Optimiser le CSS de votre site<\/h3>\n
Supprimer les feuilles de style CSS inutilis\u00e9es<\/h4>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-remove-unused-css-1024x847.jpg\")
Inline CSS critique et reporter le CSS non critique<\/h4>\n
<head><\/code> de la page (en d’autres termes, vous pouvez le placer <\/em>en ligne<\/em><\/strong>) plut\u00f4t que de la charger dans une feuille de style externe.<\/p>\n![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-css-delivery-1024x705.jpg\")
Minifier le code CSS<\/h4>\n
6. Optimiser le JavaScript de votre site<\/h3>\n
Ne pas utiliser d’\u00e9l\u00e9ments d\u00e9pendant de JavaScript au-dessus du pli<\/h4>\n
Supprimer le JavaScript inutile<\/h4>\n
\u00c9liminer le JavaScript qui bloque le rendu (defer ou delay)<\/h4>\n
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-javascript-optimization-1024x986.jpg\")
Minifier le code JavaScript<\/h4>\n
7. D\u00e9sactiver le chargement diff\u00e9r\u00e9 (lazy loading) pour les images au-dessus du pli<\/h3>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/perfmatters-optimize-lazy-loading-1024x822.jpg\")
8. Optimiser la diffusion des polices<\/h3>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-fonts-1024x721.jpg\")
9. Essayer de r\u00e9duire la taille du DOM autant que possible<\/h3>\n
\n
10. \u00c9viter les redirections (en particulier les redirections multiples)<\/h3>\n
\n
![\"Redirections](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-redirect-tool-1024x812.jpg\")