Qu’est-ce que le Largest Contentful Paint (LCP) ? Explication de la signification du Largest Contentful Paint (LCP)<\/h2>\n
Largest Contentful Paint est une mesure de performance qui \u00e9value le temps de chargement du contenu principal d’une page web.<\/p>\n
Largest Contentful Paint fait partie des mesures Core Web Vitals de Google<\/a>, au m\u00eame titre que Cumulative Layout Shift (CLS)<\/a>.<\/p>\n D’un point de vue plus technique, Largest Contentful Paint mesure le temps n\u00e9cessaire entre le moment o\u00f9 l’utilisateur lance le chargement de la page et celui o\u00f9 le plus grand bloc de texte, l’image ou la vid\u00e9o est rendu dans la fen\u00eatre d’affichage.<\/p>\n Que signifie \u00ab contenu principal \u00bb en termes de LCP ?<\/p>\n Eh bien, le contenu principal d\u00e9pend de la page en question, mais il peut s’agir de l’un des \u00e9l\u00e9ments suivants :<\/p>\n Plus loin dans cet article, vous apprendrez comment trouver l’\u00e9l\u00e9ment exact du tableau le plus grand de Contentful pour n’importe quelle page de votre site.<\/p>\n\n Vous vous demandez peut-\u00eatre quelle est la diff\u00e9rence entre Largest Contentful Paint et First Contentful Paint<\/a>, une autre mesure de performance courante.<\/p>\n Bien que les deux termes soient similaires, la diff\u00e9rence essentielle est que Largest Contentful Paint mesure le temps de chargement du \u00ab contenu principal \u00bb de la page, tandis que First Contentful Paint mesure le temps de chargement du \u00ab premier objet \u00bb(qu’il s’agisse ou non du contenu principal)<\/em>.<\/p>\n En gros :<\/p>\n En tant que tel, votre temps LCP sera presque toujours l\u00e9g\u00e8rement sup\u00e9rieur \u00e0 votre temps FCP, car l’\u00e9l\u00e9ment de \u00ab contenu principal \u00bb n’est g\u00e9n\u00e9ralement pas le premier \u00e0 se charger.<\/p>\n Il y a deux raisons principales pour lesquelles les temps de Largest Contentful Paint de votre site sont importants :<\/p>\n La principale raison pour laquelle vous devriez vous int\u00e9resser au LCP de votre site est que cette mesure est un bon indicateur pour comprendre les exp\u00e9riences de vos utilisateurs en ce qui concerne les performances de votre site.<\/p>\n La plupart des utilisateurs ne se soucient pas du temps qu’il faut \u00e0 votre site web pour charger enti\u00e8rement chaque script et \u00e9l\u00e9ment. Ils se soucient plut\u00f4t du temps qu’il leur faut pour commencer \u00e0 tirer profit de votre site web.<\/p>\n Largest Contentful Paint fait un bon travail en essayant de mesurer ce moment de \u00ab valeur \u00bb en voyant combien de temps il faut au contenu principal pour se charger.<\/p>\n Si vous optimisez votre site pour obtenir un temps de chargement rapide de Largest Contentful Paint, vous pouvez \u00eatre certain que vous offrez aux utilisateurs une exp\u00e9rience solide sur votre site, du moins en ce qui concerne les performances (vous voudrez \u00e9galement un design convivial<\/a> et une bonne ergonomie<\/a>).<\/p>\n Bien s\u00fbr, cela ne signifie pas que vous devez ignorer les autres mesures de performance. Nous recommandons toujours d’avoir une vue d’ensemble des performances de votre site et des goulots d’\u00e9tranglement<\/a>, c’est pourquoi nous avons cr\u00e9\u00e9 notre propre outil de surveillance des performances des applications (APM)<\/a> qui est disponible gratuitement si vous utilisez l’h\u00e9bergement Kinsta – Kinsta APM<\/a>.<\/p>\n Sur le front de l’optimisation des moteurs de recherche<\/a>, Largest Contentful Paint fait partie du trio de mesures Core Web Vitals de Google, que Google a commenc\u00e9 \u00e0 utiliser comme facteur de classement SEO<\/a> dans sa mise \u00e0 jour 2022 de l’algorithme Page Experience.<\/p>\n Cela signifie qu’un mauvais temps de Largest Contentful Paint peut nuire aux performances de votre site dans les r\u00e9sultats de recherche de Google.<\/p>\n Bien que d’autres facteurs tels que la qualit\u00e9\/pertinence du contenu<\/a> et les liens retour jouent toujours un r\u00f4le plus important dans le classement de votre site web<\/a>, il est important d’optimiser les temps de Largest Contentful Paint de votre site pour vous assurer que vous tirez le meilleur parti de vos efforts de r\u00e9f\u00e9rencement.<\/p>\n Deux types de probl\u00e8mes \u00ab principaux \u00bb peuvent affecter les temps de Largest Contentful Paint d’une page :<\/p>\n Le premier type de probl\u00e8me concerne le temps de r\u00e9ponse du serveur, alias temps au premier octet (TTFB)<\/a>. Avant que le navigateur d’un utilisateur ne puisse m\u00eame penser \u00e0 charger le contenu principal, il doit d’abord obtenir une r\u00e9ponse du serveur.<\/p>\n Voici quelques-uns des probl\u00e8mes courants qui affectent ce temps :<\/p>\n Apr\u00e8s que le serveur de votre site a livr\u00e9 le document HTML initial, il peut y avoir d’autres goulots d’\u00e9tranglement lorsqu’il s’agit de charger l’\u00e9l\u00e9ment de contenu principal proprement dit.<\/p>\n Voici quelques-uns des probl\u00e8mes courants qui affectent ce processus :<\/p>\n En fonction de votre site, vous pouvez rencontrer des goulots d’\u00e9tranglement dans les deux domaines ou seulement dans l’un d’entre eux. Vous apprendrez comment r\u00e9soudre tous ces probl\u00e8mes un peu plus loin dans ce post.<\/p>\n Google d\u00e9finit un \u00ab bon \u00bb temps de peinture de LCP comme \u00e9tant inf\u00e9rieur \u00e0 2,5 secondes.<\/p>\n Si le temps d’affichage de Largest Contentful Paint de votre page est compris entre 2,5 et 4 secondes, Google le classe dans la cat\u00e9gorie \u00ab \u00e0 am\u00e9liorer \u00bb. Et si le temps de votre page est sup\u00e9rieur \u00e0 4,0 secondes, Google le d\u00e9finit comme \u00ab M\u00e9diocre \u00bb.<\/p>\n Voici un graphique de Google qui montre cela visuellement :<\/p>\n Il existe un certain nombre d’outils que vous pouvez utiliser pour tester les performances de votre site<\/a> en mati\u00e8re de Largest Contentful Paint. Passons en revue les plus utiles..<\/p>\n PageSpeed Insights<\/a> est l’un des meilleurs outils pour \u00e9valuer Largest Contentful Paint car il offre quatre informations utiles :<\/p>\n Voici comment l’utiliser :<\/p>\n Google vous montrera alors les r\u00e9sultats pour les mobiles et les ordinateurs de bureau – assurez-vous de v\u00e9rifier les deux.<\/p>\n Pour trouver l’\u00e9l\u00e9ment principal que Google utilise pour calculer le LCP, vous pouvez faire d\u00e9filer la page jusqu’\u00e0 la section Diagnostics <\/strong>et d\u00e9velopper la section Largest Contentful Paint element <\/strong>:<\/p>\n Encore une fois, assurez-vous de v\u00e9rifier \u00e0 la fois les mobiles et les ordinateurs de bureau, car l’\u00e9l\u00e9ment LCP peut \u00eatre diff\u00e9rent pour chacun.<\/p>\n Vous pouvez \u00e9galement tester le temps de LCP directement \u00e0 partir de Chrome Developer Tools<\/a> en utilisant l’onglet Performance ou sa fonction d’audit Lighthouse. Nous vous recommandons d’utiliser l’onglet Performances <\/strong>car il vous donne plus d’informations.<\/p>\n Voici comment commencer :<\/p>\n Vous devriez maintenant voir une analyse compl\u00e8te de votre site.<\/p>\n Si vous passez la souris sur LCP dans l’onglet R\u00e9seau<\/strong>, vous pouvez voir le temps :<\/p>\n Si vous passez la souris sur LCP dans l’onglet Timings<\/strong>, vous pouvez voir l’\u00e9l\u00e9ment LCP r\u00e9el :<\/p>\n Bien que Google Search Console ne vous permette pas de tester une page individuelle pour son temps de Largest Contentful Paint, elle est vraiment utile pour \u00e9valuer les performances de l’ensemble du site.<\/p>\n Chaque page de votre site aura un temps LCP diff\u00e9rent, vous ne pouvez donc pas vous contenter de tester votre page d’accueil et de l’appeler un jour.<\/p>\n Avec Google Search Console<\/a>, vous pourrez voir o\u00f9 se situe chaque page de votre site dans les cat\u00e9gories \u00ab Bon \u00bb, \u00ab \u00c0 am\u00e9liorer \u00bb et \u00ab M\u00e9diocre \u00bb de Google. Les donn\u00e9es de performance proviennent du rapport Chrome UX, elles sont donc bas\u00e9es sur des donn\u00e9es utilisateur r\u00e9elles.<\/p>\n Si vous ne l’avez pas encore fait, vous devez d’abord v\u00e9rifier votre site avec Google Search Console<\/a>.<\/p>\n Une fois que vous l’avez fait, voici comment acc\u00e9der au rapport LCP :<\/p>\n *Veillez \u00e0 v\u00e9rifier les r\u00e9sultats pour les ordinateurs de bureau et les mobiles, car les donn\u00e9es peuvent \u00eatre diff\u00e9rentes dans chaque cas.<\/em><\/p>\n WebPageTest<\/a> est une autre option pratique pour ex\u00e9cuter des tests de performance simul\u00e9s<\/a>.<\/p>\n Contrairement \u00e0 PageSpeed Insights, WebPageTest vous permet de personnaliser enti\u00e8rement diverses mesures de test telles que l’emplacement du test, la vitesse de connexion, le p\u00e9riph\u00e9rique, etc. C’est le principal avantage de l’utiliser par rapport aux autres outils – il vous donne plus d’options pour configurer le test.<\/p>\n Voici comment ex\u00e9cuter un test :<\/p>\n Sur la page de r\u00e9sultats, vous verrez les donn\u00e9es LCP, ainsi que des tonnes d’autres mesures de performance (y compris une analyse en cascade).<\/p>\n Si vous souhaitez am\u00e9liorer le Largest Contentful Paint, il peut \u00eatre tr\u00e8s utile de savoir exactement quel \u00e9l\u00e9ment Google utilise pour calculer votre temps LCP.<\/p>\n Par exemple, si vous savez que Google utilise votre image de Hero comme \u00e9l\u00e9ment LCP sur votre page d’accueil, vous savez que vous devez trouver des moyens de servir cette image de h\u00e9ros aussi rapidement que possible si vous voulez am\u00e9liorer les temps LCP de votre page d’accueil.<\/p>\n Comme nous l’avons mentionn\u00e9 pr\u00e9c\u00e9demment, vous pouvez trouver votre \u00e9l\u00e9ment LCP (Largest Contentful Paint) en utilisant PageSpeed Insights ou Chrome Developer Tools.<\/p>\n Assurez-vous de v\u00e9rifier les r\u00e9sultats sur mobile et sur ordinateur, car votre \u00e9l\u00e9ment LCP peut \u00eatre diff\u00e9rent sur les diff\u00e9rents appareils.<\/strong><\/p>\n Maintenant que vous savez tout sur Largest Contentful Paint, passons \u00e0 des conseils pratiques pour am\u00e9liorer Largest Contentful Paint sur WordPress.<\/p>\n Bien que nous nous concentrions sur WordPress pour ces conseils, tous les conseils sont universels et s’appliquent \u00e0 d’autres types de sites web.<\/p>\n La mise en cache<\/a> peut am\u00e9liorer le temps de r\u00e9ponse du serveur en r\u00e9duisant le travail de traitement que votre serveur doit effectuer avant de pouvoir livrer le document HTML termin\u00e9 aux navigateurs des visiteurs.<\/p>\n Si vous h\u00e9bergez votre site WordPress avec Kinsta, vous n’avez pas besoin de vous soucier de la configuration de la mise en cache car Kinsta impl\u00e9mente automatiquement une mise en cache optimis\u00e9e pour vous<\/a>.<\/p>\n Si vous h\u00e9bergez votre site ailleurs, vous pouvez activer la mise en cache sur votre site en utilisant une extension gratuite comme WP Super Cache<\/a> ou une extension payante comme WP Rocket<\/a>.<\/p>\n Pour plus d’options, consultez notre article sur les meilleures extensions WordPress de mise en cache<\/a>.<\/p>\n Bien que toutes les tactiques de cette liste puissent vous aider \u00e0 am\u00e9liorer le temps de chargement de votre site, il ne faut pas tourner autour du pot :<\/p>\n Si vous utilisez un h\u00e9bergement WordPress lent et non optimis\u00e9<\/a>, vos temps LCP seront toujours limit\u00e9s par la qualit\u00e9 de votre h\u00e9bergement.<\/p>\n Vous pouvez peut-\u00eatre am\u00e9liorer un peu les choses, mais vous aurez toujours du mal \u00e0 atteindre des temps LCP inf\u00e9rieurs \u00e0 2,5 secondes si votre h\u00f4te est lent.<\/p>\n Si vous voulez le moyen le plus simple d’am\u00e9liorer vos temps de Largest Contentful Paint, vous pouvez migrer votre site vers Kinsta<\/a>. Non seulement Kinsta offre une infrastructure d’h\u00e9bergement optimis\u00e9e pour les performances<\/a>, mais nous avons \u00e9galement des fonctions int\u00e9gr\u00e9es pour g\u00e9rer un grand nombre des autres optimisations de cette liste.<\/p>\n Cela signifie que vous pouvez vous concentrer sur la croissance de votre site au lieu de vous occuper de l’optimisation des temps de Largest Contentful Paint.<\/p>\n Si vous \u00eates int\u00e9ress\u00e9, Kinsta migrera gratuitement un nombre illimit\u00e9 de sites web depuis n’importe quel h\u00e9bergeur<\/strong> – apprenez-en plus sur la migration gratuite ici<\/a>.<\/p>\n Si vous \u00eates encore h\u00e9sitant, essayez d’abord les autres conseils de cette liste. Mais si vous avez encore des difficult\u00e9s apr\u00e8s avoir fait tout ce qui est indiqu\u00e9 sur cette liste, vous avez peut-\u00eatre besoin d’un meilleur h\u00e9bergement.<\/p>\n Sans un CDN, tous les visiteurs de votre site doivent t\u00e9l\u00e9charger le HTML et les ressources statiques d’une page \u00e0 partir de votre serveur d’h\u00e9bergement.<\/p>\n Si vos visiteurs sont situ\u00e9s \u00e0 proximit\u00e9 de votre serveur, ce n’est g\u00e9n\u00e9ralement pas un probl\u00e8me. Mais si vos visiteurs sont r\u00e9partis dans le monde entier, cela peut ralentir votre site en raison de la distance physique entre un visiteur et le serveur de votre site.<\/p>\n Avec un CDN, vous pouvez distribuer les ressources statiques de votre site (ou m\u00eame les pages HTML finies de votre site) au r\u00e9seau mondial du CDN. De cette fa\u00e7on, les visiteurs peuvent t\u00e9l\u00e9charger les fichiers \u00e0 partir de l’emplacement le plus proche du CDN, ce qui est beaucoup plus rapide<\/a>.<\/p>\n Si vous \u00eates h\u00e9berg\u00e9 chez Kinsta<\/a>, nous vous recommandons d’utiliser la fonction de cache edge de Kinsta<\/a> pour obtenir les meilleurs r\u00e9sultats.<\/p>\n La fonction de mise en cache edge de Kinsta fonctionne en mettant en cache les pages HTML compl\u00e8tes de votre site et les ressources statiques sur le r\u00e9seau mondial de Cloudflare<\/a> (plut\u00f4t que de mettre uniquement en cache les ressources statiques comme la plupart des solutions CDN)<\/em>.<\/p>\n Cela signifie que les visiteurs de votre site peuvent t\u00e9l\u00e9charger la page compl\u00e8te \u00e0 partir de l’emplacement le plus proche, ce qui acc\u00e9l\u00e8re \u00e0 la fois le temps de r\u00e9ponse du serveur et le<\/em> temps de chargement de votre ressource LCP.<\/p>\n Pour activer le cache edge de Kinsta, allez \u00e0 l’onglet Cache edge<\/strong> dans le tableau de bord de votre site dans MyKinsta<\/a>.<\/p>\n Si vous \u00eates h\u00e9berg\u00e9 ailleurs, vous pouvez configurer un CDN pour les actifs statiques de votre site en utilisant des services CDN populaires tels que KeyCDN, Bunny, et d’autres.<\/p>\n Le JavaScript bloquant le rendu est un JavaScript qui se charge avant votre \u00e9l\u00e9ment principal LCP m\u00eame s’il n’est pas n\u00e9cessaire \u00e0 ce moment-l\u00e0.<\/p>\n En retardant le chargement de l’\u00e9l\u00e9ment LCP, il ralentit les temps de chargement de votre LCP.<\/p>\n Pour rem\u00e9dier \u00e0 ce probl\u00e8me, il existe quelques strat\u00e9gies que vous pouvez mettre en \u0153uvre :<\/p>\n Pour la plupart des gens, le moyen le plus simple de mettre en \u0153uvre cette fonctionnalit\u00e9 est de passer par des extensions comme Autoptimize<\/a> ou WP Rocket<\/a>.<\/p>\n Pour un guide complet sur la fa\u00e7on de proc\u00e9der, nous avons deux articles tr\u00e8s d\u00e9taill\u00e9s :<\/p>\n Tout comme le JavaScript non optimis\u00e9 peut ralentir votre site, le CSS non optimis\u00e9 peut \u00e9galement faire de m\u00eame.<\/p>\n Essentiellement, vous voulez charger le moins de CSS possible. Et pour le CSS que vous devez charger, vous voulez le charger de mani\u00e8re optimale. En g\u00e9n\u00e9ral, cela signifie que vous voulez charger le CSS important t\u00f4t, tout en retardant le CSS non critique jusqu’\u00e0 plus tard dans le processus de chargement.<\/p>\n Si vous n’\u00eates pas un d\u00e9veloppeur, le moyen le plus simple d’y parvenir est d’utiliser des extensions d’optimisation des performances comme Perfmatters<\/a>, WP Rocket<\/a> ou FlyingPress<\/a>.<\/p>\n Par exemple, WP Rocket offre des fonctions int\u00e9gr\u00e9es pour supprimer les CSS inutilis\u00e9s page par page et servir les CSS de mani\u00e8re optimale.<\/p>\n Si vous souhaitez avoir un aper\u00e7u plus approfondi de la mani\u00e8re de proc\u00e9der, consultez notre guide complet sur l’optimisation des CSS<\/a>.<\/p>\n Outre les techniques d’optimisation du code mentionn\u00e9es ci-dessus, vous devez \u00e9galement minifier les fichiers HTML, CSS et JavaScript de votre site. Il s’agit essentiellement de retirer les caract\u00e8res inutiles et les espaces blancs du code de votre site afin d’en r\u00e9duire la taille.<\/p>\n Vous pouvez utiliser une extension gratuite comme Autoptimize pour minifier votre code<\/a> ou l’une des extensions premium comme Perfmatters, WP Rocket ou FlyingPress.<\/p>\n Vous pouvez \u00e9galement consulter notre tutoriel complet sur la minification du code<\/a> pour en savoir plus. Bien que le tutoriel se concentre sur JavaScript, vous pouvez utiliser les m\u00eames m\u00e9thodes et extensions pour minifier d’autres codes.<\/p>\n La compression au niveau du serveur vous permet de r\u00e9duire la taille des fichiers de votre site \u00e0 l’aide de technologies telles que Gzip ou Brotli<\/a>.<\/p>\n Par exemple, la compression que nous utilisons pour le site web de Kinsta a r\u00e9duit la taille du fichier de la page d’accueil de Kinsta de 85,82 %.<\/p>\n Si vous h\u00e9bergez votre site web WordPress avec Kinsta, vous n’avez pas \u00e0 vous soucier de cela car Kinsta active automatiquement la compression Brotli pour tous les sites.<\/p>\n Si vous h\u00e9bergez votre site ailleurs, vous pouvez utiliser cet outil gratuit de GiftOfSpeed<\/a> pour v\u00e9rifier si Gzip ou Brotli est activ\u00e9 sur votre site.<\/p>\n Si votre site n’utilise pas la compression, vous pouvez suivre notre guide sur la fa\u00e7on d’activer la compression Gzip pour la configurer<\/a>.<\/p>\n Si vous utilisez Cloudflare pour servir le contenu de votre site, Cloudflare dispose \u00e9galement d’un r\u00e9glage int\u00e9gr\u00e9 pour activer la compression Brotli :<\/p>\n Si votre \u00e9l\u00e9ment LCP est une image, trouver des moyens de r\u00e9duire la taille de ce fichier image permettra de r\u00e9duire le temps n\u00e9cessaire au navigateur d’un utilisateur pour t\u00e9l\u00e9charger l’image (et donc d’acc\u00e9l\u00e9rer votre temps LCP).<\/p>\n Pour r\u00e9duire la taille de l’image, vous devez redimensionner l’image aux dimensions auxquelles vous l’utilisez r\u00e9ellement, la compresser en utilisant une compression avec ou sans perte<\/a>, et la servir dans un format optimis\u00e9 tel que WebP<\/a>.<\/p>\n Cette approche est g\u00e9n\u00e9ralement une<\/em> meilleure pratique d’optimisation des performances<\/em><\/a> – elle n’est pas sp\u00e9cifique \u00e0 Largest Contentful Paint.<\/em><\/p>\n Pour un aper\u00e7u plus complet, consultez notre guide d\u00e9taill\u00e9 sur l’optimisation des images pour les sites web<\/a>.<\/p>\n Et oh oui – si vous h\u00e9bergez votre site WordPress avec Kinsta, vous n’avez pas \u00e0 vous soucier de cela car Kinsta offre une fonction int\u00e9gr\u00e9e pour optimiser automatiquement les images de votre site<\/a> sans avoir besoin d’outils tiers.<\/p>\n Voici comment activer cette fonctionnalit\u00e9 :<\/p>\n Si votre \u00e9l\u00e9ment LCP est une image, une autre strat\u00e9gie pour am\u00e9liorer LCP est de pr\u00e9charger l’image Largest Contentful Paint. C’est pourquoi vous pouvez voir une recommandation comme \u00ab Preload Largest Contentful Paint image \u00bb dans PageSpeed Insights.<\/p>\n Avec le pr\u00e9chargement, vous pouvez indiquer au navigateur d’un utilisateur de donner la priorit\u00e9 au t\u00e9l\u00e9chargement de certaines ressources, comme l’image sp\u00e9cifique qui est l’\u00e9l\u00e9ment LCP de votre site.<\/p>\n La fa\u00e7on la moins technique de pr\u00e9charger les images LCP est d’utiliser une extension comme Perfmatters<\/a>, qui offre une fonction d\u00e9di\u00e9e de pr\u00e9chargement des images critiques<\/strong>. Tout ce que vous avez \u00e0 faire est de sp\u00e9cifier le nombre d’images \u00e0 pr\u00e9charger – nous vous recommandons de commencer par une seule, car le pr\u00e9chargement de trop de ressources peut avoir un effet n\u00e9gatif.<\/p>\n Il existe \u00e9galement quelques extensions gratuites sur WordPress.org pour r\u00e9aliser cela, comme l’extension Preload Featured Images de WPZOOM<\/a>, ainsi que d’autres extensions premium, comme FlyingPress<\/a>.<\/p>\n Un autre probl\u00e8me qui peut d\u00e9clencher le message \u00ab Preload Largest Contentful Paint image \u00bb dans PageSpeed Insights est un probl\u00e8me de chargement diff\u00e9r\u00e9 des images sur votre site WordPress<\/a>.<\/p>\n Cela peut aussi d\u00e9clencher un avertissement \u00ab Largest Contentful Paint image was lazily loaded \u00bb dans PageSpeed Insights.<\/p>\n Le chargement diff\u00e9r\u00e9 vous permet d’acc\u00e9l\u00e9rer le temps de chargement initial de votre site en attendant de charger certaines ressources (comme les images) jusqu’\u00e0 ce qu’un utilisateur commence \u00e0 interagir avec votre site.<\/p>\n Bien que ce soit normalement une bonne chose, cela peut ralentir vos temps LCP si votre site essaie de charger l’image de mani\u00e8re diff\u00e9r\u00e9e qui est votre \u00e9l\u00e9ment LCP. Pour cette raison, vous devez vous assurer que votre site ne charge pas en diff\u00e9r\u00e9 les images visibles dans la fen\u00eatre d’affichage initiale.<\/p>\n Si vous utilisez la fonction de chargement diff\u00e9r\u00e9 du navigateur natif que WordPress a introduit dans WordPress 5.5<\/a>, vous ne devriez pas rencontrer ce probl\u00e8me car WordPress exclut d\u00e9j\u00e0 automatiquement la premi\u00e8re image dans le contenu \u00e0 partir de WordPress 5.9<\/a>.<\/p>\n Si vous voulez exclure plus que la premi\u00e8re image, vous pouvez <\/em>utiliser la fonction wp_omit_loading_attr_threshold<\/em><\/a> (mais la plupart des gens n’auront pas besoin de faire quoi que ce soit ici).<\/em><\/p>\n Toutefois, si vous utilisez une extension de chargement diff\u00e9r\u00e9 fonctionnant en JavaScript, vous devrez peut-\u00eatre configurer manuellement cette exclusion dans les r\u00e9glages de l’extension. Par exemple, l’extension Perfmatters comprend une option qui vous permet d’exclure les premi\u00e8res \u00ab X \u00bb images du chargement diff\u00e9r\u00e9.<\/p>\n Si votre extension de chargement diff\u00e9r\u00e9 ne vous permet pas de configurer ce type d’exclusion, vous pouvez passer \u00e0 une autre extension qui le fait.<\/p>\n Par exemple, WP Rocket<\/a> exclut automatiquement toutes les images au-dessus du pli, y compris celle de LCP, du chargement diff\u00e9r\u00e9, ce qui vous aide \u00e0 \u00e9conomiser le temps et les tracas de le faire manuellement. Cette extension effectue l’optimisation par d\u00e9faut d\u00e8s l’activation, vous n’avez donc pas besoin de cocher d’options.<\/p>\n Si votre \u00e9l\u00e9ment LCP est du texte, le processus de chargement des polices de votre site peut retarder l’apparition du texte, ce qui ralentira votre temps LCP.<\/p>\n Cela se produit g\u00e9n\u00e9ralement lors de l’utilisation de polices personnalis\u00e9es<\/a>. Si votre site est configur\u00e9 pour attendre le chargement de la police personnalis\u00e9e avant d’effectuer le rendu de tout texte, cela ralentira les choses si le fichier de la police personnalis\u00e9e prend beaucoup de temps \u00e0 charger.<\/p>\n Pour r\u00e9soudre ce probl\u00e8me, vous pouvez utiliser le descripteur Font-Display : Optional CSS descriptor<\/a>.<\/p>\n Il indique au navigateur d’utiliser une police de secours si la police personnalis\u00e9e ne se charge pas dans une petite fen\u00eatre (g\u00e9n\u00e9ralement environ 100 ms ou moins).<\/p>\n En langage clair, cela signifie que le navigateur doit donner une chance \u00e0 la police personnalis\u00e9e de se charger. Mais si la police personnalis\u00e9e ne se charge pas assez rapidement, le navigateur doit simplement utiliser une police syst\u00e8me de secours pour \u00e9viter de retarder davantage le contenu.<\/p>\n Vous pouvez \u00e9galement utiliser Font-Display : Swap, qui charge tout de suite la police de secours, puis \u00ab \u00e9change \u00bb la police personnalis\u00e9e une fois celle-ci charg\u00e9e. Cependant, cette approche peut causer des probl\u00e8mes avec le d\u00e9calage cumulatif de mise en page<\/a> si les polices sont de tailles diff\u00e9rentes, vous devrez donc faire attention.<\/p>\n \u00c0 moins que votre police personnalis\u00e9e ne soit absolument n\u00e9cessaire \u00e0 la conception de votre site web, l’utilisation de Font-Display : Optional est g\u00e9n\u00e9ralement la meilleure option du point de vue de Core Web Vitals.<\/p>\n Si vous \u00eates \u00e0 l’aise pour utiliser directement le CSS<\/a>, vous pouvez modifier manuellement la propri\u00e9t\u00e9 Font-Display dans la feuille de style de votre th\u00e8me enfant<\/a>.<\/p>\n Si vous ne souhaitez pas utiliser le CSS, vous pouvez \u00e9galement trouver des plugins pour vous aider \u00e0 le faire, bien que la plupart d’entre eux soient ax\u00e9s sur l’optimisation pour les polices Google Fonts :<\/p>\n Si vous utilisez Elementor pour concevoir votre site, Elementor comprend \u00e9galement une option int\u00e9gr\u00e9e qui vous permet d’utiliser cette fonction pour les pages que vous cr\u00e9ez avec Elementor :<\/p>\n\n
Largest Contentful Paint vs First Contentful Paint<\/h3>\n
\n
Pourquoi le temps d’affichage de Largest Contentful Paint de votre site est-il important ?<\/h2>\n
\n
Exp\u00e9rience utilisateur<\/h3>\n
Optimisation des moteurs de recherche (SEO)<\/h3>\n
Qu’est-ce qui peut affecter les scores de Largest Contentful Paint ?<\/h2>\n
\n
\n
\n
Qu’est-ce qu’un bon temps de Largest Contentful Paint ?<\/h2>\n
![\"Temps](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/good-largest-contentful-paint-times-1024x253.jpg\")
Comment mesurer le Largest Contentful Paint : Les meilleurs outils de test LCP<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-1024x682.jpg\")
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-2-1024x779.jpg\")
Outils pour d\u00e9veloppeurs Chrome<\/h3>\n
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-1-1024x694.jpg\")
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-2-1024x714.jpg\")
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-3-1024x861.jpg\")
Google Search Console<\/h3>\n
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-times-in-google-search-console-1024x860.jpg\")
WebPageTest<\/h3>\n
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/webpagetest-lcp-test-1-1024x727.jpg\")
Comment trouver l’\u00e9l\u00e9ment de LCP<\/h2>\n
Comment am\u00e9liorer le Largest Contentful dans WordPress (ou d’autres plateformes)<\/h2>\n
Configurez la mise en cache pour am\u00e9liorer le temps de r\u00e9ponse du serveur<\/h3>\n
Passez \u00e0 un h\u00e9bergement WordPress plus rapide<\/h3>\n
Utilisez un r\u00e9seau de diffusion de contenu (CDN)<\/h3>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-edge-caching-1024x704.jpg\")
\u00c9vitez le JavaScript bloquant le rendu (diff\u00e9rer ou supprimer)<\/h3>\n
\n
\n
\u00c9vitez les CSS qui bloquent le rendu et optimisez la diffusion des CSS<\/h3>\n
Minifiez votre HTML, CSS et JavaScript<\/h3>\n
Utilisez la compression au niveau du serveur (Gzip ou Brotli)<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/gzip-brotli-test-1024x624.jpg\")
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/cloudflare-brotli-compression-1024x865.jpg\")
Compresser et redimensionner les images<\/h3>\n
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-image-optimization-feature-1024x845.jpg\")
Pr\u00e9chargez l’image Largest Contentful Paint<\/h3>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/preload-critical-images-1024x685.jpg\")
V\u00e9rifiez les probl\u00e8mes de chargement diff\u00e9r\u00e9<\/h3>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/perfmatters-exclude-leading-images-1024x791.jpg\")
Optimisez le chargement des polices avec Font-Display : Optionnel<\/h3>\n
\n
\n