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
Vue d'ensemble du Largest Contentful Paint
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 :
Comment WP Rocket peut améliorer le LCP ?
Les fonctionnalités de WP Rocket qui sont efficaces :
- Optimiser les images critiques - Lorsque l'élément LCP est une image, cette option demandera au navigateur de précharger l'image, de la charger en priorité et d'éviter son chargement différé.
- Supprimer les ressources CSS inutilisées - Cette fonctionnalité manipule le CSS pour que la page puisse être visualisée plus rapidement. Si la suppression du CSS inutilisé ne peut pas être utilisée, charger le CSS de manière asynchrone peut aider.
- Reporter l'exécution de JavaScript et Charger JavaScript en différé - Ces options aident à réduire l'impact sur le thread principal lors du chargement de la page.
- Mise en cache des pages - La mise en cache des pages améliore le temps de chargement global en servant un fichier mis en cache où aucun code PHP n'est exécuté.
- Rendu différé automatique - différe le rendu des éléments sous la ligne de flottaison d'une page, afin d'afficher plus rapidement les éléments du haut.
Ces options peuvent aussi aider :
Recommandation avancée dans WP Rocket :
- L'option Supprimer les ressources CSS inutilisées précharge automatiquement toutes les polices utilisées sur une page. Parfois, toutes ces polices ne sont pas des ressources critiques.
- Essayez de supprimer toutes les polices préchargées avec le plugin WP Rocket | Désactiver le préchargement des polices CSS utilisées pour voir si le LCP est amélioré.
- Vous pouvez également personnaliser les polices qui sont préchargées en utilisant la méthode décrite ici.
Améliorer le LCP lorsque l'élément LCP est une image
Si vous avez constaté que l'élément LCP d'une page est une image, vous devez garder à l'esprit les points suivants :
- Assurez-vous que toutes les options pertinentes de WP Rocket sont activées et appliquées à votre site.
Autres suggestions susceptibles d'améliorer le score LCP :
- Assurez-vous qu'aucun autre Lazyloading tiers n'est appliqué à l'image 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
- Évitez d'utiliser
fetchpriority=highourel=preloadsur trop de ressources, ou sur des ressources qui ne sont pas critiques pour le rendu de la page. - Mettre à jour votre plan d'hébergement