Vous vous demandez comment améliorer le Largest Contentful Paint sur votre site web ? Ou vous ne savez pas ce que signifie le Largest Contentful Paint et pourquoi vous devez vous en préoccuper ?
Quel que soit votre point de départ, cet article est fait pour vous car vous allez apprendre tout ce que vous devez savoir sur le Largest Contentful Paint.
Cela inclut ce que signifie Largest Contentful Paint, pourquoi il est important, comment le mesurer et comment l’améliorer.
Vous pouvez utiliser la table des matières ci-dessous pour passer à une section spécifique en fonction de votre niveau de connaissances actuel. Ou bien, continuez à lire pour commencer par le début.
Qu’est-ce que le Largest Contentful Paint (LCP) ? Explication de la signification du Largest Contentful Paint (LCP)
Largest Contentful Paint est une mesure de performance qui évalue le temps de chargement du contenu principal d’une page web.
Largest Contentful Paint fait partie des mesures Core Web Vitals de Google, au même titre que Cumulative Layout Shift (CLS) et First Input Delay (FID).
D’un point de vue plus technique, Largest Contentful Paint mesure le temps nécessaire entre le moment où l’utilisateur lance le chargement de la page et celui où le plus grand bloc de texte, l’image ou la vidéo est rendu dans la fenêtre d’affichage.
Que signifie « contenu principal » en termes de LCP ?
Eh bien, le contenu principal dépend de la page en question, mais il peut 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 – tout élément <vidéo> (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() (cela ne s’applique pas aux dégradés CSS).
Plus loin dans cet article, vous apprendrez comment trouver l’élément exact du tableau le plus grand de Contentful pour n’importe quelle page de votre site.
Largest Contentful Paint vs First Contentful Paint
Vous vous demandez peut-être quelle est la différence entre Largest Contentful Paint et First Contentful Paint, une autre mesure de performance courante.
Bien que les deux termes soient similaires, la différence essentielle 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 »(qu’il s’agisse ou non du contenu principal).
En gros :
- LCP = contenu principal uniquement
- FCP = premier élément du contenu, indépendamment de ce qu’est ce contenu
En tant que tel, votre temps LCP sera presque toujours légèrement supérieur à votre temps FCP, car l’élément de « contenu principal » n’est généralement pas le premier à se charger.
Pourquoi le temps d’affichage de Largest Contentful Paint de votre site est-il important ?
Il y a deux raisons principales pour lesquelles les temps de Largest Contentful Paint de votre site sont importants :
- L’expérience utilisateur
- L’optimisation des moteurs de recherche
Expérience utilisateur
La principale raison pour laquelle vous devriez vous intéresser au LCP 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 entièrement chaque script et élément. Ils se soucient plutôt 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 obtenir un temps de chargement rapide de Largest Contentful Paint, vous pouvez être certain que vous offrez aux utilisateurs une expérience solide sur votre site, du moins en ce qui concerne les performances (vous voudrez également un design convivial et une bonne ergonomie).
Bien sûr, 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’étranglement, 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 mesures Core Web Vitals de Google, que Google a commencé à utiliser comme facteur de classement SEO dans sa mise à jour 2022 de l’algorithme Page Experience.
Cela signifie qu’un mauvais temps de Largest Contentful Paint 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 liens retour jouent toujours un rôle plus important dans le classement de votre site web, 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éférencement.
Qu’est-ce qui peut affecter les scores de Largest Contentful Paint ?
Deux types de problèmes « principaux » peuvent affecter les temps de Largest Contentful Paint d’une page :
- Le temps qu’il faut à votre serveur pour répondre avec le document HTML initial.
- Le temps que met la ressource LCP réelle à se charger.
Le premier type de problème concerne le temps de réponse du serveur, alias temps au premier octet (TTFB). Avant que le navigateur d’un utilisateur ne 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 ce temps :
- 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.
- Non-utilisation d’un CDN – un réseau de diffusion de contenu (CDN) peut accélérer la TTFB en servant les pages à partir de son réseau mondial au lieu de demander aux utilisateurs de les télécharger à partir du serveur d’origine de votre site.
Après 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 proprement dit.
Voici quelques-uns des problèmes courants qui affectent ce processus :
- JavaScript ou CSS bloquant le rendu (ou code non optimisé/non nécessaire 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 grandes images prennent plus de temps à télécharger.
- Chargement de polices non optimisé – si l’élément LCP est un texte, le chargement de polices personnalisées de manière non optimisée peut allonger le temps d’affichage du texte.
- Fichiers non compressés – si vous n’utilisez pas de technologies de compression comme Gzip ou Brotli, le navigateur de l’utilisateur mettra plus de temps à télécharger les fichiers de votre site.
En fonction de votre site, vous pouvez rencontrer des goulots d’étranglement dans les deux domaines ou seulement dans l’un d’entre eux. Vous apprendrez comment résoudre tous ces problèmes un peu plus loin dans ce post.
Qu’est-ce qu’un bon temps de Largest Contentful Paint ?
Google définit un « bon » temps de peinture de LCP comme étant inférieur à 2,5 secondes.
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égorie « à améliorer ». Et si le temps de votre page est supérieur à 4,0 secondes, Google le définit comme « Médiocre ».
Voici un graphique de Google qui montre cela visuellement :
Comment mesurer le Largest Contentful Paint : Les meilleurs outils de test LCP
Il existe un certain nombre d’outils que vous pouvez utiliser pour tester les performances de votre site en matière de Largest Contentful Paint. Passons en revue les plus utiles..
PageSpeed Insights
PageSpeed Insights est l’un des meilleurs outils pour évaluer Largest Contentful Paint car il offre quatre informations utiles :
- Vous pouvez voir les temps de Largest Contentful Paint de votre site avec des utilisateurs réels à partir du rapport Chrome UX (si votre site a un trafic suffisant pour être inclus dans le rapport).
- Vous pouvez exécuter des tests simulés pour voir comment votre site se comporte.
- Google vous indiquera l’élément LCP réel qu’il utilise pour le test, ce qui vous permettra de savoir quel élément optimiser.
- Google vous fournira des suggestions sur la manière d’améliorer votre temps LCP.
Voici comment l’utiliser :
- Allez sur le site web PageSpeed Insights.
- Saisissez l’URL de la page que vous souhaitez tester.
- Cliquez sur Analyze.
Google vous montrera alors les résultats pour les mobiles et les ordinateurs 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 la page jusqu’à la section Diagnostics et développer la section Largest Contentful Paint element :
Encore une fois, assurez-vous de vérifier à la fois les mobiles et les ordinateurs de bureau, car l’élément LCP peut être différent pour chacun.
Outils pour développeurs Chrome
Vous pouvez également tester le temps de LCP directement à partir de Chrome Developer Tools en utilisant l’onglet Performance ou sa fonction d’audit Lighthouse. Nous vous recommandons d’utiliser l’onglet Performances car il vous donne plus d’informations.
Voici comment commencer :
- Ouvrez la page que vous souhaitez tester.
- Ouvrez les Outils du développeur de Chrome.
- Accédez à l’onglet Performances.
- Assurez-vous que la case Vitales Web est cochée.
- Cliquez sur le bouton Recharger(indiqué ci-dessous).
Vous devriez maintenant voir une analyse complète de votre site.
Si vous passez la souris sur LCP dans l’onglet Réseau, vous pouvez voir le temps :
Si vous passez la souris sur LCP dans l’onglet Timings, vous pouvez voir l’élément LCP réel :
Google Search Console
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 évaluer les performances de l’ensemble du site.
Chaque page de votre site aura un temps LCP différent, vous ne pouvez donc pas vous contenter de tester votre page d’accueil et de l’appeler un jour.
Avec Google Search Console, vous pourrez voir où se situe chaque page de votre site dans les catégories « Bon », « À améliorer » et « Médiocre » de Google. Les données de performance proviennent du rapport Chrome UX, elles sont donc basées sur des données utilisateur réelles.
Si vous ne l’avez pas encore fait, vous devez d’abord vérifier votre site avec Google Search Console.
Une fois que vous l’avez fait, voici comment accéder au rapport LCP :
- Ouvrez Google Search Console pour votre site.
- Allez à Core Web Vitals sous l’onglet Experience.
- Cliquez sur Open Report à côté du graphique Mobile ou Desktop.
- Recherchez les problèmes dans la section Why URLs aren’t considered good. Si vous cliquez sur le problème, vous pouvez voir plus d’informations sur les URL qui posent problème.
*Veillez à vérifier les résultats pour les ordinateurs de bureau et les mobiles, car les données peuvent être différentes dans chaque cas.
WebPageTest
WebPageTest est une autre option pratique pour exécuter des tests de performance 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, le périphérique, etc. C’est le principal avantage de l’utiliser par rapport aux autres outils – il vous donne plus d’options pour configurer le test.
Voici comment exécuter un test :
- Allez sur WebPageTest.
- Ajoutez l’URL de la page que vous voulez tester.
- Développez les options de Advanced Configuration pour configurer entièrement votre test.
Sur la page de 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 l’élément de LCP
Si vous souhaitez améliorer le 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 de Hero comme élément LCP sur votre page d’accueil, vous savez que vous devez trouver des moyens de servir cette image de héros aussi rapidement que possible si vous voulez améliorer les temps LCP de votre page d’accueil.
Comme nous l’avons mentionné précédemment, vous pouvez trouver votre élément LCP (Largest Contentful Paint) en utilisant PageSpeed Insights ou Chrome Developer Tools.
Assurez-vous de vérifier les résultats sur mobile et sur ordinateur, car votre élément LCP peut être différent sur les différents appareils.
Comment améliorer le Largest Contentful dans WordPress (ou d’autres plateformes)
Maintenant que vous savez tout sur Largest Contentful Paint, passons à des conseils pratiques pour améliorer Largest Contentful Paint sur 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.
Configurez 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 terminé aux navigateurs des visiteurs.
Si vous hébergez votre site WordPress avec Kinsta, vous n’avez pas besoin de 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 votre site ailleurs, vous pouvez activer la mise en cache sur votre site en utilisant une extension gratuite comme WP Super Cache ou une extension payante comme WP Rocket.
Pour plus d’options, consultez notre article sur les meilleures extensions WordPress de mise en cache.
Passez à un hébergement WordPress plus rapide
Bien que toutes les tactiques de cette liste puissent vous aider à améliorer le temps de chargement de votre site, il ne faut pas tourner autour du pot :
Si vous utilisez un hébergement WordPress lent et non optimisé, vos temps LCP seront toujours limités par la qualité de votre hébergement.
Vous pouvez 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 Largest Contentful Paint, vous pouvez migrer votre site vers Kinsta. Non seulement Kinsta offre une infrastructure d’hébergement optimisée pour les performances, mais nous avons également des fonctions intégrées pour gérer un grand nombre des autres optimisations de cette liste.
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.
Si vous êtes intéressé, Kinsta migrera gratuitement un nombre illimité de sites web depuis n’importe quel hébergeur – apprenez-en plus sur la migration gratuite ici.
Si vous êtes encore hésitant, essayez d’abord les autres conseils de cette liste. Mais si vous avez encore des difficultés après avoir fait tout ce qui est indiqué sur cette liste, vous avez peut-être besoin d’un meilleur hébergement.
Utilisez un réseau de diffusion de contenu (CDN)
Sans un CDN, tous les visiteurs de votre site doivent télécharger le HTML et les ressources statiques d’une page à partir de votre serveur d’hébergement.
Si vos visiteurs sont situés à proximité de votre serveur, ce n’est généralement pas un problème. Mais si vos visiteurs sont répartis 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 ressources statiques de votre site (ou même les pages HTML finies de votre site) au réseau mondial du CDN. De cette façon, les visiteurs peuvent télécharger les fichiers à partir de l’emplacement le plus proche du CDN, ce qui est beaucoup plus rapide.
Si vous êtes hébergé chez Kinsta, nous vous recommandons d’utiliser la fonction de cache edge de Kinsta pour obtenir les meilleurs résultats.
La fonction de mise en cache edge de Kinsta fonctionne en mettant en cache les pages HTML complètes de votre site et les ressources statiques sur le réseau mondial de Cloudflare (plutôt que de mettre uniquement en cache les ressources 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 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 le cache edge de Kinsta, allez à l’onglet Cache edge dans le tableau de bord de votre site dans MyKinsta.
Si vous êtes hébergé ailleurs, vous pouvez configurer un CDN pour les actifs statiques de votre site en utilisant des services CDN populaires tels que KeyCDN, Bunny, StackPath et d’autres.
Évitez le JavaScript bloquant le rendu (différer ou supprimer)
Le JavaScript bloquant le rendu est un JavaScript qui se charge avant votre élément principal LCP même s’il n’est pas nécessaire à ce moment-là.
En retardant le chargement de l’élément LCP, il ralentit les temps de chargement de votre LCP.
Pour remédier à 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 de mettre en œuvre cette fonctionnalité est de passer par des extensions 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 du JavaScript
Évitez les CSS qui bloquent le rendu et optimisez la diffusion des CSS
Tout comme le JavaScript non optimisé peut ralentir votre site, le 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 général, cela signifie que vous voulez charger le CSS important tôt, tout en retardant le CSS non critique jusqu’à plus tard dans le processus de chargement.
Si vous n’êtes pas un développeur, le moyen le plus simple d’y parvenir est d’utiliser des extensions d’optimisation des performances comme Perfmatters, WP Rocket ou FlyingPress.
Par exemple, WP Rocket offre des fonctions intégrées pour supprimer les CSS inutilisés page par page et servir les CSS de manière optimale.
Si vous souhaitez avoir un aperçu plus approfondi de la manière de procéder, consultez notre guide complet sur l’optimisation des CSS.
Minifiez votre HTML, CSS et JavaScript
En plus des techniques d’optimisation du code ci-dessus, vous devez également réduire le code HTML, CSS et JavaScript de votre site.
Il s’agit essentiellement de supprimer les caractères et les espaces blancs inutiles du code de votre site pour en réduire la taille.
Si vous hébergez avec Kinsta, Kinsta peut automatiquement gérer la minification via notre intégration Cloudflare. Voici comment contrôler cette fonctionnalité :
- Ouvrez le tableau de bord de votre site dans MyKinsta.
- Allez sur l’onglet CDN.
- Cliquez sur Réglages à côté de Optimisation d’image.
- Cochez les cases pour CSS et JS et enregistrez les réglages.
Si vous hébergez votre site ailleurs, vous pouvez utiliser une extension gratuite comme Autoptimize pour minifier votre code ou l’une des extensions premium comme Perfmatters, WP Rocket ou FlyingPress.
Vous pouvez également consulter notre tutoriel complet sur la minification du code pour en savoir plus. Bien que le tutoriel se concentre sur JavaScript, vous pouvez utiliser les mêmes méthodes et extensions pour minifier d’autres codes.
Utilisez 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 soucier de cela 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 la configurer.
Si vous utilisez Cloudflare pour servir le contenu de votre site, Cloudflare dispose également d’un réglage intégré pour activer la compression Brotli :
- Ouvrez votre site dans le tableau de bord Cloudflare.
- Allez dans Vitesse → Optimisation dans le menu de la colonne latérale.
- Activez le commutateur à 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 permettra de réduire le temps nécessaire au navigateur d’un utilisateur pour télécharger l’image (et donc d’accélérer 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 en utilisant une compression avec ou sans perte, et la servir 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 oui – si vous hébergez votre site WordPress avec Kinsta, vous n’avez pas à vous soucier de cela car Kinsta offre une fonction intégrée pour optimiser automatiquement les images de votre site sans avoir besoin d’outils tiers.
Voici comment activer cette fonctionnalité :
- Ouvrez le tableau de bord de votre site dans MyKinsta.
- Allez à l’onglet CDN.
- Cliquez sur Réglages à côté de Optimisation des images.
- Choisissez votre niveau d’optimisation d’image préféré et enregistrez les réglages – l’utilisation de Avec perte offrira les plus grandes améliorations de vitesse, bien que cela puisse avoir un petit effet sur la qualité de l’image.
Préchargez l’image Largest Contentful Paint
Si votre élément LCP est une image, une autre stratégie pour améliorer LCP est de précharger l’image Largest Contentful Paint. C’est pourquoi vous pouvez voir une recommandation comme « Preload Largest Contentful Paint image » 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, comme l’image spécifique qui est l’élément LCP de votre site.
La façon la moins technique de précharger les images LCP est d’utiliser une extension comme Perfmatters, qui offre une fonction dédiée de 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 de trop de ressources peut avoir un effet négatif.
Il existe également quelques extensions gratuites sur WordPress.org pour réaliser cela, comme l’extension Preload Featured Images de WPZOOM, ainsi que d’autres extensions premium, comme FlyingPress.
Vérifiez les problèmes de chargement différé
Un autre problème qui peut déclencher le message « Preload Largest Contentful Paint image » dans PageSpeed Insights est un problème de chargement différé des images sur votre site WordPress.
Cela peut aussi déclencher un avertissement « Largest Contentful Paint image was lazily loaded » dans PageSpeed Insights.
Le chargement différé vous permet d’accélérer le temps de chargement initial de votre site en attendant de charger certaines ressources (comme les 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 l’image de manière différée qui est votre élément LCP. Pour cette raison, vous devez vous assurer que votre site ne charge pas en différé les images visibles dans la fenêtre d’affichage initiale.
Si vous utilisez la fonction de chargement différé du navigateur natif que WordPress a introduit dans WordPress 5.5, vous ne devriez pas rencontrer ce problème car WordPress exclut déjà automatiquement la première image dans le contenu à partir de WordPress 5.9.
Si vous voulez exclure plus que la première image, vous pouvez utiliser la fonction wp_omit_loading_attr_threshold (mais la plupart des gens n’auront pas besoin de faire quoi que ce soit ici).
Toutefois, si vous utilisez une extension de chargement différé fonctionnant en JavaScript, vous devrez peut-être configurer manuellement cette exclusion dans les réglages de l’extension. Par exemple, l’extension Perfmatters comprend une option qui vous permet d’exclure les premières « X » images du chargement différé.
Si votre extension de chargement différé ne vous permet pas de configurer ce type d’exclusion, vous pouvez passer à une autre extension qui le fait.
Optimisez le chargement des polices avec Font-Display : Optionnel
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 chargement de la police personnalisée avant d’effectuer le rendu de tout texte, cela ralentira les choses si le fichier de la police personnalisée prend beaucoup de temps à charger.
Pour résoudre ce problème, vous pouvez utiliser le descripteur Font-Display : Optional CSS descriptor.
Il 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 langage clair, cela signifie que le navigateur doit donner une chance à la police personnalisée 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.
Vous pouvez également utiliser Font-Display : Swap, qui charge tout de suite la police de secours, puis « échange » la police personnalisée une fois celle-ci chargée. Cependant, cette approche peut causer des problèmes avec le décalage cumulatif de mise en page si les polices sont de tailles différentes, vous devrez donc faire attention.
À 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 pour utiliser directement le CSS, 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 le CSS, vous pouvez également trouver des plugins pour vous aider à le faire, bien que la plupart d’entre eux soient axés sur l’optimisation pour les polices Google Fonts :
- Asset CleanUp – prend en charge les polices Google Fonts gratuites et les polices locales personnalisées avec la version Pro.
- Perfmatters – propose une fonctionnalité pour les Google Fonts.
Si vous utilisez Elementor pour concevoir votre site, Elementor comprend également une option intégrée qui vous permet d’utiliser cette fonction pour les pages que vous créez avec Elementor :
- Allez dans Elementor → Réglages.
- Ouvrez l’onglet Avancé.
- Définissez la liste déroulante Chargement des polices Google Fonts égale à Optionnel.
Résumé
Apprendre à améliorer le 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 : l’accélération du temps de réponse de votre serveur, puis l’optimisation du code de votre site pour rendre l’élément LCP aussi rapidement que possible.
Si vous ne voulez pas vous soucier de la lenteur du temps de réponse 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 rendre votre site aussi rapidement que possible.
De plus, avec la fonction de cache edge 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 du serveur rapides comme l’éclair (et, par conséquent, de temps LCP rapides comme l’éclair).
Si vous voulez en savoir plus, vous pouvez consulter ces pages pour plus d’informations sur l’hébergement WordPress infogéré de Kinsta ou sur l’hébergement WooCommerce infogéré de Kinsta.
Si vous souhaitez qu’un professionnel vous aide à réaliser des optimisations personnalisées des performances LCP, vous pouvez également trouver un fournisseur dans l’annuaire des agences Kinsta.
Laisser un commentaire