Largest Contentful Paint
Largest Contentful Paint (LCP) est l'une des principales mesures de Core Web Vitals. Ce guide vous expliquera ce que c'est, comment analyser votre page et comment améliorer cette mesure.
Dans cette documentation
Le Largest Contentful Paint est une mesure du Core Web Vital qui est utilisée pour mesurer la vitesse à laquelle un visiteur du site verra un contenu pertinent à l'écran. Si le LCP est trop long, le visiteur aura l'impression que le site met trop de temps à se charger. Idéalement, le LCP est inférieur à 2,5s.
Techniquement, le LCP définit le temps de chargement du plus important élément de contenu qui est visible dans la fenêtre lorsqu'un utilisateur ouvre une page. Il peut s'agir de texte, d'image, de vidéo, etc...
Le LCP est principalement influencé par quatre facteurs :
- Les performances de votre serveur
- JavaScript et CSS bloquant le rendu
- La taille de la ressource
- La méthode utilisée pour l'affichage du contenu (par exemple, dynamiquement avec JavaScript)
Comment trouver l'élément LCP ?
Avec PageSpeed Insights :
Dans le rapport PageSpeed Insights, faites défiler vers le bas jusqu'à la recommandation Élément identifié comme "Largest Contentful Paint" (généralement marqué en gris) et développez-la pour afficher les informations sur l’élément :
Avec les outils de développement de Chrome :
- Cliquez sur l'onglet Performance
- Rechargez la page
- Trouvez LCP dans les résultats et cliquez dessus
- L'onglet Summary contient des informations sur l'élément.
Comment WP Rocket peut améliorer le LCP ?
Les fonctionnalités de WP Rocket qui sont efficaces :
- La mise en cache.
La mise en cache des pages améliore le temps de chargement global en servant un fichier mis en cache dans lequel aucun code PHP n'est exécuté.
- Optimiser le chargement du CSS,
- Chargement différé des fichiers JavaScript,
- Reporter l’exécution JavaScript.
Les options rendent les fichiers CSS et JS non bloquants, ce qui permet au contenu de la page de se charger plus rapidement.
- Minifier les fichiers CSS et JavaScript,
- La compression GZIP
Ces fonctionnalités réduisent la taille des fichiers, de sorte que le contenu de la page, y compris l'élément LCP, se charge plus rapidement.
Améliorer le LCP lorsque l'élément LCP est une image
Très souvent, l'élément LCP se trouve être une image.
Dans certains cas, l'option LazyLoad peut avoir un impact négatif sur le LCP. Il faut en effet plus de temps pour que l'image apparaisse lorsque le script de LazyLoad charge l'image.
Dans ce cas, la désactivation du LazyLoad sur l'image LCP peut aider.
Suivez les étapes ci-dessous :
- Identifiez l'élément LCP avec le test PageSpeed Insights
Autres suggestions susceptibles d'améliorer le score LCP :
- Optimiser et redimensionner les images (le plugin Imagify peut vous aider)
- Envisager de proposer des images au format WebP (le plugin Imagify peut vous aider)
- Livrer des images en utilisant le CDN (RocketCDN peut vous aider)
Améliorer le LCP lorsque l'élément LCP est une vidéo
- L’option LazyLoad sur les iframes et vidéos de l’onglet Média peut aider.
Autres méthodes pour améliorer le LCP en dehors de WP Rocket
- Utilisez une image statique au lieu d'un slider
- Ajouter l'élément LCP directement dans le HTML de la page au lieu de le charger via du JavaScript/CSS
- Minimiser la quantité de JavaScript critique nécessaire pour afficher le contenu au-dessus de la ligne de flottaison
- Évitez de placer un gros bloc de code CSS non critique dans le header
- Mettre à jour votre plan d'hébergement
Ressources pour les développeurs : https://web.dev/optimize-lcp/