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.
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=high
ourel=preload
sur 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
Les phases de l'élément LCP
Le traitement des éléments LCP est calculé sur la base de quatre phases : le TTFB, le délai de chargement, temps de chargement et délai de rendu. PageSpeed affiche un pourcentage et des délais pour chaque élément.
TTFB
Le Time To First Byte (TTFB) de la page influe sur cette composante.
La mise en cache des pages par WP Rocket ou du cache de serveur devrait aider. Si cela est encore nécessaire, envisagez d'utiliser la mise en cache des pages servies par un proxy, comme Cloudflare.
Délai de chargement
Ce délai représente le temps d'attente avant que le navigateur ne commence à charger la ressource.
Les options Supprimer les ressources CSS inutilisées et Optimiser les images critiques de WP Rocket aideront.
Si une amélioration est encore nécessaire, envisagez de réduire la quantité de polices préchargées par Supprimer les ressources CSS inutilisées, comme indiqué ci-dessous. En outre, réduisez la priorité accordée à d'autres éléments de la page.
Temps de chargement
Le temps de chargement est la durée du réseau influencée par la distance du visiteur par rapport au serveur et la taille de l'élément LCP.
L'utilisation d'un CDN (tel que RocketCDN), la compression de l'image et l'utilisation de formats de nouvelle génération grâce à Imagify aideront également.
Délai de rendu
Le délai de rendu est le temps nécessaire au navigateur pour afficher l'élément LCP. Les thèmes ou les constructeurs de pages qui utilisent beaucoup de JavaScript, comme Avada ou Elementor, ont généralement un mauvais délai de rendu.
L'impact de WP Rocket est très limité sur cette phase, mais en termes généraux, WP Rocket pourrait aider en réduisant la quantité de CSS avec Supprimer les ressources CSS inutilisées, et en optimisant les ressources JavaScript avec Reporter l’exécution du JavaScript, Chargement différé des fichiers JavaScript, et LazyLoad pour les iframes et les vidéos.
Ressources supplémentaires
- WP Rocket Core Web Vitals Hub - Largest Contentful Paint
- Pour les développeurs : https://web.dev/optimize-lcp/