La plus grande peinture de contenu expliquée : comment améliorer votre temps

Vous avez du mal à améliorer Largest Contentful Paint sur votre site Web ? Ou vous ne savez pas ce que signifie la plus grande peinture de contenu et pourquoi vous devez même vous en soucier en premier lieu ?

Peu importe d'où vous partez, cet article est pour vous car vous allez apprendre tout ce que vous devez savoir sur Largest Contentful Paint.

Cela inclut ce que signifie la plus grande peinture de contenu, pourquoi c'est important, comment le mesurer et comment l'améliorer.

Vous pouvez utiliser la table des matières ci-dessous pour accéder à une section spécifique en fonction de votre niveau de connaissances actuel. Ou continuez à lire pour commencer depuis le début.

Qu'est-ce que la plus grande peinture de contenu (LCP) ? Expliquer la plus grande signification de peinture contente

La plus grande peinture de contenu est une mesure de performance qui mesure le temps nécessaire au chargement du contenu principal d'une page Web.

La plus grande peinture de contenu fait partie des métriques Core Web Vitals de Google, avec Cumulative Layout Shift (CLS) et First Input Delay (FID).

À un niveau plus technique, Largest Contentful Paint mesure le temps qu'il faut à l'utilisateur pour lancer le chargement de la page jusqu'à ce que le plus grand bloc de texte, image ou vidéo soit rendu dans la fenêtre d'affichage.

Que signifie « contenu principal » en termes de LCP ?

Eh bien, le contenu principal dépendra de la page en question, mais il pourrait s'agir de l'un des éléments suivants :

• Texte - plus précisément, tout élément de niveau bloc contenant des nœuds de texte ou d'autres éléments de texte de niveau ligne.
• Image – éléments à l'intérieur d'un élément <img> ou éléments <image> à l'intérieur d'un élément <svg>.
• Vidéo - tous les éléments <video> (il utilise l'image de l'affiche).
• Un élément avec une image d'arrière-plan - uniquement lorsqu'il est chargé via la fonction CSS url() (il ne s'applique pas aux dégradés CSS).

Plus loin dans cet article, vous apprendrez comment trouver l'élément de peinture le plus grand contenu exact pour n'importe quelle page de votre site.

La plus grande peinture de contenu vs la première peinture de contenu

Une question courante que vous pourriez vous poser est de savoir quelle est la différence entre la plus grande peinture de contenu et la première peinture de contenu, une autre mesure de performance courante.

Bien que les deux termes soient similaires, la principale différence est que Largest Contentful Paint mesure le temps de chargement du "contenu principal" de la page, tandis que First Contentful Paint mesure le temps de chargement du "premier objet" ( que ce soit ou non c'est le contenu principal ).

Essentiellement:

• LCP = contenu principal uniquement
• FCP = premier élément de contenu, quel que soit ce contenu

En tant que tel, votre temps LCP sera presque toujours légèrement supérieur à votre temps FCP car l'élément "contenu principal" n'est généralement pas le premier à se charger.

Pourquoi le plus grand temps de peinture de contenu de votre site est-il important ?

Il y a deux raisons principales pour lesquelles les temps de peinture de contenu les plus importants de votre site sont importants :

1. Expérience utilisateur
2. Optimisation du moteur de recherche

Expérience utilisateur

La principale raison pour laquelle vous devriez vous soucier des temps de peinture les plus importants de votre site est que cette mesure est un bon indicateur pour comprendre les expériences de vos utilisateurs en ce qui concerne les performances de votre site.

La plupart des utilisateurs ne se soucient pas du temps qu'il faut à votre site Web pour charger complètement chaque script et élément. Au lieu de cela, ils se soucient du temps qu'il leur faut pour commencer à tirer profit de votre site Web.

Largest Contentful Paint fait un bon travail en essayant de mesurer ce moment de "valeur" en voyant combien de temps il faut au contenu principal pour se charger.

Si vous optimisez votre site pour atteindre un temps de peinture plus rapide, vous pouvez être assez sûr que vous offrez aux utilisateurs une expérience solide sur votre site, du moins en ce qui concerne les performances (vous voudrez également une conception conviviale et bonne ergonomie).

Bien sûr, cela ne signifie pas que vous devez ignorer les autres mesures de performance. Nous recommandons toujours de jeter un regard global sur les performances et les goulots d'étranglement de votre site, c'est pourquoi nous avons créé notre propre outil de surveillance des performances des applications (APM) qui est disponible gratuitement si vous utilisez l'hébergement Kinsta - Kinsta APM.

Optimisation des moteurs de recherche (SEO)

Sur le front de l'optimisation des moteurs de recherche, Largest Contentful Paint fait partie du trio de métriques Core Web Vitals de Google, que Google a commencé à utiliser comme facteur de classement SEO dans sa mise à jour de l'algorithme 2022 Page Experience.

Cela signifie qu'avoir de mauvais temps de peinture du plus grand contenu peut nuire aux performances de votre site dans les résultats de recherche de Google.

Bien que d'autres facteurs tels que la qualité/pertinence du contenu et les backlinks jouent toujours un rôle beaucoup plus important dans le classement de votre site Web, il est important d'optimiser les temps de peinture de contenu le plus important de votre site pour vous assurer que vous tirez le meilleur parti de vos efforts de référencement.

Qu'est-ce qui peut affecter les plus grands scores de peinture de contenu ?

Deux "principaux" types de problèmes peuvent affecter les temps de peinture du contenu le plus important d'une page :

1. Combien de temps il faut à votre serveur pour répondre avec le document HTML initial.
2. Durée de chargement de la ressource LCP réelle.

Le premier type de problème concerne le temps de réponse du serveur, également appelé time to first byte (TTFB). Avant que le navigateur d'un utilisateur puisse même penser à charger le contenu principal, il doit d'abord obtenir une réponse du serveur.

Voici quelques-uns des problèmes courants qui affectent cela :

• Ne pas utiliser la mise en cache des pages - ne pas utiliser la mise en cache des pages oblige le serveur à faire plus de "travail" avant de pouvoir répondre avec le document HTML.
• Hébergement lent - un fournisseur d'hébergement lent aura toujours un TTFB lent, quoi que vous fassiez.
• Ne pas utiliser de CDN - un réseau de diffusion de contenu (CDN) peut accélérer le TTFB en diffusant des pages à partir de son réseau mondial au lieu d'obliger les utilisateurs à les télécharger à partir du serveur d'origine de votre site.

Une fois que le serveur de votre site a livré le document HTML initial, il peut y avoir d'autres goulots d'étranglement lorsqu'il s'agit de charger l'élément de contenu principal réel.

Voici quelques-uns des problèmes courants qui affectent cela :

• JavaScript ou CSS bloquant le rendu (ou code non optimisé/inutile en général) - si le navigateur de l'utilisateur doit télécharger et/ou traiter du JavaScript ou CSS inutile avant de pouvoir charger l'élément principal, cela ralentira votre LCP.
• Images non optimisées - si l'élément LCP est une image, l'utilisation d'images non optimisées ralentira votre temps car les images plus grandes prennent plus de temps à télécharger.
• Chargement de polices non optimisé – si l'élément LCP est du texte, le chargement de polices personnalisées de manière non optimisée peut allonger l'affichage de ce texte.
• Fichiers non compressés - si vous n'utilisez pas de technologies de compression telles que Gzip ou Brotli, le navigateur de l'utilisateur mettra plus de temps à télécharger les fichiers de votre site.

Selon votre site, vous pouvez rencontrer des goulots d'étranglement dans les deux domaines ou dans un seul des domaines. Vous apprendrez comment résoudre tous ces problèmes un peu plus loin dans cet article.

Qu'est-ce qu'un bon temps de peinture de contenu le plus long ?

Google définit un "Bon" plus grand temps de peinture de contenu comme étant inférieur à 2,5 secondes.

Si le temps de peinture le plus important de votre page est compris entre 2,5 et 4,0 secondes, Google classe cela comme "Besoin d'amélioration". Et si le temps de votre page est supérieur à 4,0 secondes, Google définit cela comme "médiocre".

Voici un graphique de Google qui montre cela visuellement :

Comment mesurer la plus grande peinture de contenu : meilleurs outils de test LCP

Il existe un certain nombre d'outils que vous pouvez utiliser pour tester les performances de votre site pour la plus grande peinture de contenu - passons en revue certains des plus utiles…

Informations sur la vitesse de la page

PageSpeed ​​Insights est l'un des meilleurs outils pour évaluer la plus grande peinture de contenu car il offre quatre informations utiles :

1. Vous pouvez voir les temps de peinture de contenu les plus importants de votre site avec de vrais utilisateurs à partir du rapport Chrome UX ( si votre site a suffisamment de trafic pour être inclus dans le rapport ).
2. Vous pouvez exécuter des tests simulés pour voir comment votre site fonctionne.
3. Google vous indiquera l'élément LCP réel qu'il utilise pour le test, ce qui vous permet de savoir quel élément optimiser.
4. Google fournira des suggestions sur la façon d'améliorer votre temps LCP.

Voici comment l'utiliser :

1. Accédez au site Web PageSpeed ​​Insights.
2. Entrez l'URL de la page que vous souhaitez tester.
3. Cliquez sur Analyser .

Google vous montrera alors les résultats pour mobile et ordinateur de bureau - assurez-vous de vérifier les deux.

Pour trouver l'élément principal que Google utilise pour calculer le LCP, vous pouvez faire défiler jusqu'à la section Diagnostics et développer la section de l'élément Largest Contentful Paint :

Encore une fois, assurez-vous de vérifier à la fois le mobile et le bureau, car l'élément LCP peut être différent pour chacun.

Outils de développement Chrome

Vous pouvez également tester le temps de peinture le plus important directement à partir des outils de développement Chrome à l'aide de l'onglet Performances ou de sa fonction d'audit Lighthouse. Nous vous recommandons d'utiliser l'onglet Performances car il vous donne plus d'informations.

Voici comment commencer :

1. Ouvrez la page que vous souhaitez tester.
2. Ouvrez les outils de développement Chrome.
3. Accédez à l'onglet Performances .
4. Assurez-vous que la case Web Vitals est cochée.
5. Cliquez sur le bouton Recharger ( noté ci-dessous ).

Vous devriez maintenant voir une analyse complète de votre site.

Si vous survolez LCP dans l'onglet Réseau , vous pouvez voir l'heure :

Si vous survolez LCP dans l'onglet Timings , vous pouvez voir l'élément LCP réel :

Console de recherche Google

Bien que Google Search Console ne vous permette pas de tester une page individuelle pour son temps de peinture le plus important, il est vraiment utile pour évaluer les performances à l'échelle du site.

Chaque page de votre site aura une heure LCP différente, vous ne pouvez donc pas simplement tester votre page d'accueil et l'appeler un jour.

Avec Google Search Console, vous pourrez voir où chaque page de votre site se situe dans les catégories "Bon", "Amélioration nécessaire" et "Mauvais" de Google. Les données de performances proviennent du rapport Chrome UX, elles sont donc basées sur des données utilisateur réelles.

Si vous ne l'avez pas déjà fait, vous devez d'abord vérifier votre site avec Google Search Console.

Une fois que vous avez fait cela, voici comment accéder au rapport LCP :

1. Ouvrez Google Search Console pour votre site.
2. Accédez à Core Web Vitals sous l'onglet Expérience .
3. Cliquez sur Ouvrir le rapport à côté du graphique Mobile ou Ordinateur.
4. Recherchez les problèmes dans la section Pourquoi les URL ne sont pas considérées comme bonnes . Si vous cliquez sur le problème, vous pouvez voir plus d'informations sur les URL qui causent des problèmes.

*Assurez-vous de vérifier à la fois les résultats sur ordinateur et sur mobile, car les données peuvent être différentes dans chacun.

WebPageTest

WebPageTest est une autre option pratique pour exécuter des tests de performances simulés.

Contrairement à PageSpeed ​​Insights, WebPageTest vous permet de personnaliser entièrement diverses mesures de test telles que l'emplacement du test, la vitesse de connexion, l'appareil, etc. C'est le principal avantage de l'utiliser par rapport à d'autres outils - il vous donne plus d'options pour configurer le test.

Voici comment exécuter un test :

1. Accédez à WebPageTest.
2. Ajoutez l'URL de la page que vous souhaitez tester.
3. Développez les options de configuration avancée pour configurer entièrement votre test.

Sur la page des résultats, vous verrez les données LCP, ainsi que des tonnes d'autres mesures de performance (y compris une analyse en cascade).

Comment trouver le plus grand élément de peinture de contenu

Si vous souhaitez améliorer Largest Contentful Paint, il peut être très utile de savoir exactement quel élément Google utilise pour calculer votre temps LCP.

Par exemple, si vous savez que Google utilise votre image principale comme élément LCP sur votre page d'accueil, vous savez que vous devez trouver des moyens de diffuser cette image principale aussi rapidement que possible si vous souhaitez améliorer les délais LCP de votre page d'accueil.

Comme nous l'avons mentionné précédemment, vous pouvez trouver votre plus grand élément Contentful Paint à l'aide de PageSpeed ​​Insights ou des outils de développement Chrome.

Assurez-vous de vérifier les résultats sur mobile et sur ordinateur, car votre élément LCP peut être différent sur différents appareils.

Comment améliorer la plus grande peinture de contenu dans WordPress (ou d'autres plates-formes)

Maintenant que vous savez tout sur Largest Contentful Paint, passons à quelques conseils pratiques pour améliorer Largest Contentful Paint dans WordPress.

Bien que nous nous concentrions sur WordPress pour ces conseils, tous les conseils sont universels et s'appliquent à d'autres types de sites Web.

Configurer la mise en cache pour améliorer le temps de réponse du serveur

La mise en cache peut améliorer le temps de réponse du serveur en réduisant le travail de traitement que votre serveur doit effectuer avant de pouvoir livrer le document HTML fini aux navigateurs des visiteurs.

Si vous hébergez votre site WordPress avec Kinsta, vous n'avez pas à vous soucier de la configuration de la mise en cache car Kinsta implémente automatiquement une mise en cache optimisée pour vous.

Si vous hébergez ailleurs, vous pouvez activer la mise en cache sur votre site en utilisant un plugin gratuit comme WP Super Cache ou un plugin payant comme WP Rocket.

Pour plus d'options, consultez notre article avec les meilleurs plugins de mise en cache WordPress.

Passez à un hébergement WordPress plus rapide

Bien que toutes les tactiques de cette liste puissent vous aider à améliorer votre temps LCP, il n'y a pas de tour par tour :

Si vous utilisez un hébergement WordPress lent et non optimisé, vos délais LCP seront toujours limités par la qualité de votre hébergeur.

Vous pourrez peut-être améliorer un peu les choses, mais vous aurez toujours du mal à atteindre des temps LCP inférieurs à 2,5 secondes si votre hôte est lent.

Si vous voulez le moyen le plus simple d'améliorer vos temps de peinture du plus grand contenu, vous pouvez migrer votre site vers Kinsta. Non seulement Kinsta offre une infrastructure d'hébergement optimisée en termes de performances, mais nous avons également des fonctionnalités intégrées pour gérer de nombreuses autres optimisations de cette liste.

Cela signifie que vous pouvez vous concentrer sur la croissance de votre site au lieu de vous embêter à optimiser les temps de peinture du plus grand contenu.

Si vous êtes intéressé, Kinsta migrera gratuitement un nombre illimité de sites Web depuis n'importe quel hébergeur - en savoir plus sur la migration gratuite ici.

Si vous êtes toujours sur la clôture, essayez d'abord le reste des conseils de cette liste. Mais si vous avez encore du mal après avoir tout fait sur cette liste, vous aurez peut-être simplement besoin d'un meilleur hébergement.

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

Sans CDN, tous les visiteurs de votre site doivent télécharger les ressources HTML et statiques d'une page à partir de votre serveur d'hébergement.

Si vos visiteurs se trouvent à proximité de votre serveur, ce n'est généralement pas un problème. Mais si vos visiteurs sont dispersés dans le monde entier, cela peut ralentir votre site en raison de la distance physique entre un visiteur et le serveur de votre site.

Avec un CDN, vous pouvez distribuer les actifs statiques de votre site (ou même les pages HTML finies de votre site) sur le réseau mondial du CDN. De cette façon, les visiteurs peuvent télécharger des fichiers à partir de l'emplacement le plus proche du CDN, ce qui est beaucoup plus rapide.

Si vous hébergez avec Kinsta, nous vous recommandons d'utiliser la fonctionnalité Edge Caching de Kinsta pour obtenir les meilleurs résultats.

La fonctionnalité de mise en cache périphérique de Kinsta fonctionne en mettant en cache les pages HTML complètes et les actifs statiques de votre site sur le réseau mondial de Cloudflare ( plutôt que de simplement mettre en cache les actifs statiques comme la plupart des solutions CDN ).

Cela signifie que les visiteurs de votre site peuvent télécharger la page complète à partir de l'emplacement périphérique le plus proche, ce qui accélère à la fois le temps de réponse du serveur et le temps de chargement de votre ressource LCP.

Pour activer la mise en cache Edge de Kinsta, accédez à l'onglet Edge Caching dans le tableau de bord de votre site dans MyKinsta.

Si vous hébergez ailleurs, vous pouvez configurer un CDN pour les ressources statiques de votre site à l'aide de services CDN populaires tels que KeyCDN, Bunny, StackPath et autres.

Éviter le JavaScript bloquant le rendu (différer ou supprimer)

JavaScript bloquant le rendu est un JavaScript qui se charge avant votre élément LCP principal même s'il n'est pas nécessaire à ce moment-là.

En retardant le chargement de l'élément LCP, cela ralentira vos temps de chargement LCP.

Pour résoudre ce problème, il existe quelques stratégies que vous pouvez mettre en œuvre :

• Supprimez le JavaScript inutile si possible.
• Différez le JavaScript afin qu'il ne bloque pas le chargement de l'élément principal de votre site.
• Retardez le JavaScript jusqu'à ce qu'un utilisateur interagisse avec votre site.

Pour la plupart des gens, le moyen le plus simple d'implémenter cette fonctionnalité consiste à utiliser des plugins comme Autoptimize ou WP Rocket.

Pour un guide complet sur la façon de procéder, nous avons deux articles très détaillés :

• Comment éliminer les ressources bloquant le rendu sur WordPress
• Comment différer l'analyse de JavaScript

Évitez les CSS bloquant le rendu et optimisez la livraison des CSS

Tout comme un JavaScript non optimisé peut ralentir votre site, un CSS non optimisé peut également faire de même.

Essentiellement, vous voulez charger le moins de CSS possible. Et pour le CSS que vous devez charger, vous voulez le charger de manière optimale. En règle générale, cela signifie que vous souhaitez charger les CSS importants plus tôt, tout en retardant les CSS non critiques jusqu'à plus tard dans le processus de chargement.

Si vous n'êtes pas développeur, le moyen le plus simple d'y parvenir consiste à utiliser des plugins d'optimisation des performances tels que Perfmatters, WP Rocket ou FlyingPress.

Par exemple, WP Rocket offre des fonctionnalités intégrées pour supprimer les CSS inutilisés page par page et servir les CSS de manière optimale.

Si vous voulez un examen beaucoup plus approfondi de la façon de faire tout cela, consultez notre guide complet sur la façon d'optimiser le CSS.

Minifiez votre HTML, CSS et JavaScript

En plus des techniques d'optimisation de code ci-dessus, vous souhaiterez également réduire le code HTML, CSS et JavaScript de votre site.

Essentiellement, cela supprime les caractères inutiles et les espaces blancs du code de votre site pour réduire sa taille.

Si vous hébergez avec Kinsta, Kinsta peut gérer automatiquement la minification via notre intégration Cloudflare. Voici comment contrôler cette fonctionnalité :

1. Ouvrez le tableau de bord de votre site dans MyKinsta.
2. Accédez à l'onglet CDN .
3. Cliquez sur Paramètres à côté de Optimisation de l'image.
4. Cochez les cases CSS et JS et enregistrez les paramètres.

Si vous hébergez votre site ailleurs, vous pouvez utiliser un plugin gratuit comme Autoptimize pour réduire votre code ou l'un des plugins complets premium comme Perfmatters, WP Rocket ou FlyingPress.

Ou consultez notre didacticiel complet sur la minification de code pour en savoir plus. Bien que le didacticiel se concentre sur JavaScript, vous pouvez également utiliser les mêmes méthodes et plugins pour réduire d'autres codes.

Utiliser la compression au niveau du serveur (Gzip ou Brotli)

La compression au niveau du serveur vous permet de réduire la taille des fichiers de votre site à l'aide de technologies telles que Gzip ou Brotli.

Par exemple, la compression que nous utilisons pour le site Web de Kinsta a réduit la taille du fichier de la page d'accueil de Kinsta de 85,82 %.

Si vous hébergez votre site Web WordPress avec Kinsta, vous n'avez pas à vous en soucier car Kinsta active automatiquement la compression Brotli pour tous les sites.

Si vous hébergez votre site ailleurs, vous pouvez utiliser cet outil gratuit de GiftOfSpeed ​​pour vérifier si Gzip ou Brotli est activé sur votre site.

Si votre site n'utilise pas la compression, vous pouvez suivre notre guide sur la façon d'activer la compression Gzip pour le configurer.

Si vous utilisez Cloudflare pour diffuser le contenu de votre site, Cloudflare dispose également d'un paramètre intégré pour activer la compression Brotli :

1. Ouvrez votre site dans le tableau de bord Cloudflare.
2. Accédez à Vitesse → Optimisation dans le menu de la barre latérale.
3. Activez la bascule Brotli .

Compresser et redimensionner les images

Si votre élément LCP est une image, trouver des moyens de réduire la taille de ce fichier image réduira le temps nécessaire au navigateur d'un utilisateur pour télécharger l'image (et donc accélérera votre temps LCP).

Pour réduire la taille de l'image, vous devez redimensionner l'image aux dimensions auxquelles vous l'utilisez réellement, la compresser à l'aide d'une compression avec ou sans perte et la diffuser dans un format optimisé tel que WebP.

Cette approche est généralement une meilleure pratique d'optimisation des performances - elle n'est pas spécifique à Largest Contentful Paint.

Pour un aperçu plus complet, consultez notre guide détaillé sur l'optimisation des images pour les sites Web.

Et oh ouais – si vous hébergez votre site WordPress avec Kinsta, vous n'avez pas à vous en soucier car Kinsta offre une fonctionnalité intégrée pour optimiser automatiquement les images de votre site sans avoir besoin d'outils tiers.

Voici comment activer cette fonctionnalité :

1. Ouvrez le tableau de bord de votre site dans MyKinsta.
2. Accédez à l'onglet CDN .
3. Cliquez sur Paramètres à côté de Optimisation de l'image.
4. Choisissez votre niveau d'optimisation d'image préféré et enregistrez les paramètres - l'utilisation de Lossy offrira les plus grandes améliorations de vitesse, bien que cela puisse avoir un petit effet sur la qualité de l'image.

Précharger la plus grande image de peinture de contenu

Si votre élément LCP est une image, une autre stratégie pour améliorer LCP consiste à précharger la plus grande image Contentful Paint. C'est pourquoi vous pourriez voir une recommandation comme "Précharger la plus grande image de peinture contente" dans PageSpeed ​​Insights.

Avec le préchargement, vous pouvez indiquer au navigateur d'un utilisateur de donner la priorité au téléchargement de certaines ressources, telles que l'image spécifique qui est l'élément LCP de votre site.

Le moyen le plus non technique de précharger des images LCP consiste à utiliser un plug-in tel que Perfmatters, qui offre une fonctionnalité dédiée au préchargement des images critiques . Tout ce que vous avez à faire est de spécifier le nombre d'images à précharger. Nous vous recommandons de commencer par une seule, car le préchargement d'un trop grand nombre de ressources peut avoir un effet négatif.

Il existe également des plugins gratuits sur WordPress.org pour y parvenir, tels que le plugin Preload Featured Images de WPZOOM, ainsi que d'autres plugins premium, tels que FlyingPress.

Vérifiez les problèmes de chargement paresseux

Un autre problème qui peut déclencher le message "Preload Largest Contentful Paint image" dans PageSpeed ​​Insights est lié à la manière dont votre site WordPress charge paresseusement les images.

Ou, cela peut également déclencher un avertissement "La plus grande image Contentful Paint a été chargée paresseusement" dans PageSpeed ​​Insights.

Le chargement différé vous permet d'accélérer les temps de chargement initiaux de votre site en attendant de charger certaines ressources (comme des images) jusqu'à ce qu'un utilisateur commence à interagir avec votre site.

Bien que ce soit normalement une bonne chose, cela peut ralentir vos temps LCP si votre site essaie de charger paresseusement l'image qui est votre élément LCP. Pour cette raison, vous voudrez vous assurer que votre site ne charge pas paresseusement les images visibles dans la fenêtre d'affichage initiale.

Si vous utilisez la fonctionnalité de chargement paresseux du navigateur natif introduite par WordPress dans WordPress 5.5, vous ne devriez pas rencontrer ce problème car WordPress exclut déjà automatiquement la première image de contenu à partir de WordPress 5.9.

Si vous souhaitez exclure plus que la première image, vous pouvez utiliser la fonction wp_omit_loading_attr_threshold (mais la plupart des gens n'auront rien à faire ici).

Cependant, si vous utilisez un plug-in de chargement différé basé sur JavaScript, vous devrez peut-être configurer manuellement cette exclusion dans les paramètres du plug-in. Par exemple, le plugin Perfmatters inclut une option pour vous permettre d'exclure les premières images "X" du chargement différé.

Si votre plug-in de chargement paresseux ne vous permet pas de configurer ce type d'exclusion, vous pouvez passer à un autre plug-in qui le permet.

Optimiser le chargement des polices avec Font-Display : facultatif

Si votre élément 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.

Cela se produit généralement lors de l'utilisation de polices personnalisées. Si votre site est configuré pour attendre le rendu du texte après le chargement de la police personnalisée, cela ralentira les choses si le fichier de police personnalisée prend beaucoup de temps à se charger.

Pour résoudre ce problème, vous pouvez utiliser Font-Display : Descripteur CSS facultatif.

Cela indique au navigateur d'utiliser une police de secours si la police personnalisée ne se charge pas dans une petite fenêtre (généralement environ 100 ms ou moins).

En clair, cela signifie essentiellement que le navigateur doit donner à la police personnalisée une chance de se charger. Mais si la police personnalisée ne se charge pas assez rapidement, le navigateur doit simplement utiliser une police système de secours pour éviter de retarder davantage le contenu.

Alternativement, vous pouvez également utiliser Font-Display: Swap, qui charge immédiatement la police de secours, puis "échange" dans la police personnalisée une fois la police personnalisée chargée. Cependant, cette approche peut entraîner des problèmes avec le décalage de mise en page cumulé si les polices sont de tailles différentes, vous devez donc être prudent.

À moins que votre police personnalisée ne soit absolument nécessaire à la conception de votre site Web, l'utilisation de Font-Display: Optional est généralement la meilleure option du point de vue de Core Web Vitals.

Si vous êtes à l'aise avec CSS directement, vous pouvez modifier manuellement la propriété Font-Display dans la feuille de style de votre thème enfant.

Si vous ne souhaitez pas utiliser CSS, vous pouvez également trouver des plugins pour vous aider à le faire, bien que la plupart d'entre eux se concentrent sur l'optimisation pour Google Fonts :

• Asset CleanUp - prend en charge Google Fonts pour les polices locales gratuites et personnalisées avec la version Pro.
• Perfmatters – offre une fonctionnalité pour Google Fonts.

Si vous utilisez Elementor pour concevoir votre site, Elementor inclut également une option intégrée pour vous permettre de l'utiliser pour les pages que vous créez avec Elementor :

1. Allez dans Elementor → Paramètres .
2. Ouvrez l'onglet Avancé .
3. Définissez la liste déroulante Google Fonts Load sur Facultatif .

Résumé

Apprendre à améliorer Largest Contentful Paint est important pour améliorer l'expérience utilisateur de votre site et maximiser votre classement dans les moteurs de recherche.

L'amélioration de Largest Contentful Paint comporte généralement deux parties : accélérer le temps de réponse de votre serveur, puis optimiser le code de votre site pour afficher l'élément LCP le plus rapidement possible.

Si vous ne voulez pas vous soucier du temps de réponse lent du serveur, vous pouvez déplacer votre site WordPress vers Kinsta. L'architecture optimisée pour les performances de Kinsta est spécialement conçue pour livrer votre site le plus rapidement possible.

De plus, avec la fonctionnalité Edge Caching de Kinsta, vous pouvez mettre en cache les pages de votre site sur le réseau mondial de Cloudflare, ce qui signifie que les visiteurs du monde entier bénéficieront de temps de réponse de serveur ultra-rapides (et, par conséquent, de temps LCP ultra-rapides).

Si vous voulez en savoir plus, vous pouvez consulter ces pages pour plus d'informations sur l'hébergement WordPress géré de Kinsta ou l'hébergement WooCommerce géré de Kinsta.

Si vous souhaitez qu'un professionnel vous aide avec certaines optimisations de performances LCP personnalisées, vous pouvez également trouver un fournisseur dans le répertoire des agences Kinsta.