Optimisez les images de votre Largest Contentful Paint (LCP) avec Jetpack Boost
L’optimisation des images LCP identifie et optimise automatiquement les images les plus importantes des Pages clés de votre site. Cette fonctionnalité analyse vos Pages clés, identifie leurs images principales (le cas échéant) et applique des optimisations techniques pour accélérer leur chargement pour vos visiteurs.
L’optimisation des images LCP est disponible avec les offres gratuite et payante Jetpack Boost. L’offre gratuite permet d’optimiser une Page clé, tandis que l’offre Premium en prend en charge jusqu’à dix.
Qu’est-ce que le Largest Contentful Paint (LCP) ?
Le Largest Contentful Paint (LCP) est une métrique des Core Web Vitals qui mesure le temps nécessaire au chargement complet, dans le navigateur d’un visiteur, du plus grand élément de contenu visible, comme une grande image ou un titre.
Un LCP rapide donne l’impression que votre site est rapide et réactif. Un LCP lent, même si les autres éléments se chargent rapidement, peut donner aux utilisateurs l’impression que votre site est lent.
Pourquoi le LCP est important pour votre site
rendu du plus grand élément de contenu (LCP) est une métrique des Core Web Vitals qui mesure le temps nécessaire au chargement du plus grand élément de contenu visible sur votre page web.
- Les visiteurs jugent la vitesse d’un site en fonction de la rapidité avec laquelle le contenu principal apparaît, et non du moment où le chargement de la page entière se termine.
- Un LCP lent donne une impression de lourdeur à votre site, même si les autres éléments se chargent rapidement.
- Un LCP rapide donne à votre site une apparence professionnelle et réactive.
Optimisation pour les moteurs de recherche
- Comme le LCP est une métrique des Core Web Vitals, Google utilise le LCP comme facteur de classement dans les résultats de recherche.
- Les sites web obtenant de bons scores de LCP (moins de 2,5 secondes) sont mieux classés que leurs concurrents plus lents.
- De mauvais scores de LCP peuvent nuire à votre visibilité dans les résultats de recherche naturels.
Qu’est-ce qui ralentit le LCP ?
Les causes courantes de mauvaises performances du LCP comprennent :
- Images volumineuses et non optimisées.
- Images dont la priorité de chargement n’est pas correctement définie.
- Absence de techniques d’adaptation des images.
- Temps de réponse du serveur élevés.
- Ressources bloquant le rendu.
Qu’est-ce que l’optimisation des images LCP ?
L’optimisation des images LCP est une fonctionnalité de Jetpack Boost qui identifie les éléments visuels les plus importants de vos pages clés et applique des améliorations de performance pour accélérer leur chargement.
Elle se concentre sur la plus grande image ou image d’arrière-plan visible dans la fenêtre du navigateur lors du chargement d’une page — l’élément LCP. L’optimisation de cet élément peut améliorer considérablement vos scores Core Web Vitals.
Activer l’optimisation des images LCP
Pour activer l’optimisation des images LCP :
- Accédez à Jetpack → Boost dans l’interface d’administration de WP.
- Sous Optimisez votre vitesse, développez la section Images.
- Activez le bouton «Optimisez les images LCP ».
Jetpack Boost analysera vos pages essentielles et optimisera les images LCP correspondantes.
Fonctionnement de l’optimisation des images LCP
Analyse automatique des pages
Cette fonctionnalité examine vos pages essentielles pour identifier :
- L’élément visuel le plus grand qui apparaît dans la fenêtre d’affichage.
- S’il s’agit d’une image standard ou d’arrière-plan.
- La stratégie de chargement optimale pour chaque type d’appareil (mobile/ordinateur).
Optimisations techniques appliquées
Pour les éléments d’image :
- Optimise l’image LCP grâce à l’accélérateur de site de Jetpack.
- Définit
fetchpriority="high"comme priorité de chargement. - Applique
loading="eager"afin d’éviter les délais liés au chargement différé. - Génère des images adaptatives avec les attributs
srcsetetsizes. - Prend en charge les écrans haute résolution (high DPI).
Pour les éléments d’image d’arrière-plan :
- Optimise l’image d’arrière-plan LCP grâce à l’accélérateur de site de Jetpack.
- Ajoute des liens de préchargement dans l’en-tête du document.
- Implémente des images d’arrière-plan adaptatives à l’aide de CSS
image-set(). - Applique des requêtes média spécifiques à l’appareil.
- Utilise les remplacements CSS pour garantir un chargement optimal.
Comprendre l’état de l’optimisation des images LCP
Après avoir activé l’option Optimisez les images LCP, Jetpack Boost analyse vos pages essentielles. Pendant cette opération, Boost affiche Jetpack Boost optimise le LCP de votre page essentielle…
Une fois l’optimisation terminée, Boost indique la date de la dernière optimisation des pages et fournit un lien Optimiser que vous pouvez utiliser pour relancer l’optimisation.
Si Boost ne peut pas optimiser une ou plusieurs pages, une notification intitulée Problèmes d’optimisation de LCP s’affiche. Sélectionnez le lien Afficher les détails pour voir les pages concernées et la raison pour laquelle chacune n’a pas pu être optimisée.
Résoudre les problèmes liés à l’optimisation des images LCP
Pour consulter la liste complète des problèmes connus et des solutions, consultez Dépannage de l’optimisation des images LCP dans Jetpack Boost.
Vous avez encore besoin d’aide ?
Veuillez contacter l’assistance. Nous sommes heureux de vous conseiller.