La confidentialité est importante pour nous. Vous avez donc la possibilité de désactiver certains types de stockage qui peuvent ne pas être nécessaires au fonctionnement de base du site Web. Le blocage des catégories peut avoir un impact sur votre expérience sur le site Web. Plus d'informations
Optimisation du Largest Contentful Paint (LCP) : passez sous les 2,5 secondes. Le guide de l'optimisation des images et du TTFB.
.webp){kind=small}
.webp){kind=small}
Le LCP est un indicateur d'expérience utilisateur déterminant et un facteur de classement pour Google. Quand un internaute arrive sur votre page, il ne se soucie pas du temps de chargement total. Ce qui compte pour lui, c'est le moment où il voit le contenu principal et peut commencer à lire ou à interagir. Le LCP mesure précisément cet instant : celui où le plus grand élément de contenu devient visible. Réussissez votre LCP et votre page paraît rapide. Manquez-le et elle paraît lente, même si les autres indicateurs sont bons.
Optimiser le LCP demande d'agir sur trois fronts : améliorer le temps de réponse du serveur (TTFB), supprimer les ressources bloquantes et optimiser les images. Chaque axe traite un goulot d'étranglement différent. Combinés, ils produisent des gains spectaculaires.
Le Largest Contentful Paint (LCP) correspond au temps d'affichage du plus grand élément de contenu visible de votre page. Ce peut être une grande image, une vidéo, un titre ou un bloc de texte. Le LCP se mesure depuis l'arrivée de l'internaute sur votre page jusqu'au moment où cet élément devient visible. La documentation de Google sur le LCP fournit des informations techniques détaillées et des stratégies d'optimisation.
Le LCP n'est pas un indicateur binaire du type réussi ou échoué. C'est une valeur continue. Google considère qu'un LCP sous 2,5 secondes est « bon », qu'entre 2,5 et 4 secondes il demande à être amélioré, et qu'au-delà de 4 secondes il est mauvais. Les internautes perçoivent comme très rapides les pages dont le LCP reste sous 2 secondes. Celles qui se situent entre 3 et 4 secondes semblent nettement plus lentes. Au-delà de 5 secondes, elles sont souvent abandonnées.
Le LCP évolue pendant le chargement, à mesure que de plus grands éléments apparaissent. Si une image très lourde s'affiche à la troisième seconde, le LCP passe de 1 seconde à 3 secondes. C'est un point important : vous ne pouvez pas vous contenter d'optimiser le premier affichage. Vous devez vous assurer que tous les grands éléments de contenu se chargent vite.
Le Time to First Byte (TTFB) est le temps écoulé entre le début de la navigation et le renvoi par le serveur du premier octet du document HTML. Le TTFB fixe le plancher du LCP. Si votre TTFB est de 2 secondes, votre LCP ne peut pas descendre sous 2 secondes, puisque le navigateur n'a même pas encore reçu le HTML. Réduire le TTFB est donc un préalable pour réduire le LCP.
Un bon TTFB reste sous 600 millisecondes. Entre 600 et 1800ms, il demande à être amélioré. Au-delà de 1800ms, il est mauvais. Si votre TTFB est lent, occupez-vous d'abord de l'optimisation serveur. Aucune optimisation front-end ne peut compenser un serveur lent.
Les causes fréquentes d'un TTFB lent : un code back-end inefficace, des requêtes en base de données trop lourdes ou un serveur surchargé. Un hébergement médiocre gonfle également le TTFB. Le mutualisé se révèle souvent extrêmement lent. Passez à un serveur privé virtuel ou à un hébergement cloud pour de meilleures performances. Utilisez un CDN pour réduire le TTFB en servant vos contenus depuis des serveurs proches de vos visiteurs.
PageSpeed Insights affiche votre TTFB dans la section « Temps de réponse du serveur ». Si le TTFB est un goulot d'étranglement, l'outil le signale comme priorité.
Le LCP dépend de ce qu'est le plus grand élément de contenu de votre page. Sur un article de blog, ce sera peut-être une grande image d'en-tête. Sur une fiche produit, une photo du produit. Sur un site d'actualité, le titre de l'article. Identifier l'élément LCP est la première étape pour l'optimiser.
Servez-vous des outils de développement de Chrome pour repérer cet élément. Ouvrez les DevTools, allez dans l'onglet Performance, lancez l'enregistrement et rechargez la page. Dans l'enregistrement, cherchez le repère « Largest Contentful Paint ». Survolez-le pour voir quel élément a déclenché le LCP. Une fois l'élément connu, optimisez-le.
L'élément LCP est souvent une image. Les images sont lourdes et se chargent après l'analyse du HTML. Optimiser leur chargement a donc le plus fort impact sur le LCP pour la majorité des sites. Les images situées sous la ligne de flottaison peuvent être chargées en différé, ce qui accélère le LCP du contenu visible d'emblée.
Le préchargement demande au navigateur de commencer à télécharger une ressource tôt, avant même qu'elle ne soit nécessaire à l'affichage. Préchargez votre image LCP ou vos autres ressources critiques avec des balises `` dans l'en-tête HTML. Vous dites ainsi au navigateur : commence tout de suite à télécharger cette ressource.
Exemple : `` demande au navigateur de télécharger immédiatement l'image d'en-tête, sans attendre l'analyse du CSS. Cela peut réduire le LCP de 100 à 500ms selon le poids de la ressource.
Restez prudent avec le préchargement. Précharger trop de ressources gaspille de la bande passante. Ne préchargez que les ressources vraiment critiques (image d'en-tête, polices critiques, CSS indispensable). Le guide d'optimisation des Core Web Vitals de Google explique les bonnes pratiques de préchargement.
Si votre élément LCP est une image, travaillez à la fois son poids et sa stratégie de chargement. Trois tactiques :
Compressez l'image. Utilisez des outils comme TinyPNG, ImageOptim ou Squoosh pour compresser sans perte de qualité visible. La compression JPEG peut diviser le poids par 10 à 40. Chaque tranche de 100 Ko d'image ajoute 100 à 200ms de LCP sur un réseau 4G. La compression est très rentable.
Adoptez les formats modernes. Le WebP est 25 à 35% plus léger que le JPEG. L'AVIF l'est encore davantage. Utilisez l'élément HTML `
Indiquez les dimensions de vos images. Renseigner les attributs width et height évite les décalages de mise en page et permet au navigateur de réserver la place avant le chargement. Cela n'améliore pas directement le LCP, mais cela améliore le Cumulative Layout Shift (CLS), un autre indicateur des Core Web Vitals.
Un CSS bloquant empêche le navigateur d'afficher la page tant qu'il n'a pas été téléchargé et analysé. Les gros fichiers CSS retardent l'affichage. Réduisez le CSS bloquant en intégrant le CSS critique en ligne et en différant le reste.
Le CSS critique est celui dont a besoin le contenu visible sans défilement. Intégrez-le dans des balises `
