Le rucher La reine des Vosges

Le LCP (Largest Contentful Paint) fait partie des Signaux Web essentiels* (Cores Web Vitals) pris en compte dans l'algorithme de Google.
Il correspond au temps nécessaire avant l’affichage du plus grand élément de la page.

Déroulement de l’intervention :

Suite à l’analyse par la Google Search console, un problème de score LCP a été détecté sur la partie blog du site et en particulier sur l’image principale, c'est-à-dire l’élément le plus grand affiché sans scroll.

Plusieurs actions ont été nécessaires pour parvenir à réduire le temps de chargement :

• Supprimer le lazy loading. Toutes les images se situant au-dessus de la ligne de flottaison doivent avoir un affichage instantané.
• Redimensionner l’image : L’image affichée était plus petite que le fichier associé. Son poids s'en trouvait alourdi, et cela impliquait un calcul de redimensionnement pour le navigateur.
• Préchargement : Technique consistant à prioriser le chargement d'un élément de la page avant d'afficher son rendu.
  Cette dernière action n’a finalement été suffisante. Nous avons pu proposer une alternative avec l’encodage en base64.
• Encoder l’image en base64 : L’image est directement dans le html, ce qui permet au navigateur de l’afficher instantanément, sans téléchargement de fichier image.

Le score LCP est ainsi passé de 2,3 à 1,4 secondes, ce qui représente près de 40% de réduction de cet indicateur qui doit être le plus petit possible.

Les points forts d'un LCP optimisé :

• Un chargement visuel plus rapide
• Une expérience utilisateur optimisée
• Un meilleur classement dans les résultats de recherche Google

* Pour en savoir plus sur les Web Vitals, nous vous conseillons les articles de blog concernant la mise à jour Google Page Experience & PrestaShop : Partie 1 & Partie 2)