Le LCP (Largest Contentful Paint) est le critère Core Web Vitals le plus impactant pour le SEO d'une fiche produit. Sur PrestaShop, l'image principale du produit en est presque toujours l'élément déclencheur — et elle concentre la majorité des erreurs d'optimisation.
Comprendre ce qui déclenche le LCP sur une fiche produit
Le LCP mesure le temps d'affichage du plus grand élément visible dans le viewport. Sur une fiche produit PrestaShop, cet élément est systématiquement l'image principale (#main-product-image ou .js-qv-product-cover selon le thème).
Avant d'optimiser, identifiez précisément l'élément LCP avec Chrome DevTools :
- Ouvrez DevTools → onglet Performance
- Lancez un enregistrement avec rechargement (Ctrl+Shift+E)
- Dans la timeline, repérez le marqueur LCP et cliquez dessus
- L'élément est mis en surbrillance dans le DOM et son temps de rendu affiché
Un LCP supérieur à 2,5 secondes est considéré mauvais par Google. Sur une fiche produit non optimisée, il dépasse souvent 4 secondes.
L'erreur classique : le lazy loading sur l'image principale
PrestaShop applique par défaut le lazy loading sur toutes les images, y compris l'image principale du produit. C'est une erreur critique : le lazy loading retarde intentionnellement le chargement des images hors-viewport, mais l'image principale est dans le viewport dès le chargement.
Dans le template Classic (themes/classic/templates/catalog/product.tpl), l'image ressemble à :
{* ❌ Lazy loading sur l'image principale = LCP dégradé *}
<img
src="{$product.default_image.bySize.large_default.url}"
loading="lazy"
alt="{$product.name}"
class="js-qv-product-cover"
>La correction est simple — retirez loading="lazy" sur l'image principale :
{* ✅ Pas de lazy loading sur l'image principale *}
<img
src="{$product.default_image.bySize.large_default.url}"
loading="eager"
fetchpriority="high"
alt="{$product.name}"
class="js-qv-product-cover"
>L'attribut fetchpriority="high" (disponible depuis Chrome 101) indique au navigateur de prioriser ce téléchargement sur les autres ressources.
Précharger l'image principale avec un lien preload
Pour aller plus loin, ajoutez un <link rel="preload"> dans le <head> de la page produit. Cela demande au navigateur de télécharger l'image dès la découverte du HTML, avant même d'avoir parsé le DOM.
Dans PrestaShop, l'endroit le plus propre pour injecter ce tag est un hook dans votre module ou dans themes/classic/templates/_partials/head.tpl :
{* Dans head.tpl, conditionnel à la page produit *}
{if $page.page_name == 'product' && isset($product.default_image)}
<link
rel="preload"
as="image"
href="{$product.default_image.bySize.large_default.url}"
fetchpriority="high"
>
{/if}Via un module, utilisez le hook displayBeforeBodyClosingTag ou mieux, injectez directement dans le head via Media::addJsDef() combiné à un hook displayHeader :
// Dans votre module, hook displayHeader
public function hookDisplayHeader(array $params): string
{
if ($this->context->controller->php_self !== 'product') {
return '';
}
$product = new Product((int) Tools::getValue('id_product'));
$imageId = $product->getCoverWs();
if (!$imageId) {
return '';
}
$imageUrl = $this->context->link->getImageLink(
$product->link_rewrite,
$product->id . '-' . $imageId,
'large_default'
);
return '<link rel="preload" as="image" href="' . $imageUrl . '" fetchpriority="high">';
}Optimiser le format et le poids de l'image
PrestaShop 8 génère nativement des images WebP si l'option est activée dans Paramètres avancés → Images → Format WebP. Vérifiez que c'est bien le cas — une image WebP est en moyenne 30 à 40 % plus légère qu'un JPEG équivalent.
Pour servir le format optimal selon le navigateur, utilisez la balise <picture> dans le template :
<picture>
<source
srcset="{$product.default_image.bySize.large_default.url|replace:'.jpg':'.webp'}"
type="image/webp"
>
<img
src="{$product.default_image.bySize.large_default.url}"
loading="eager"
fetchpriority="high"
alt="{$product.name}"
width="800"
height="800"
>
</picture>Spécifiez toujours les attributs width et height — ils évitent le Cumulative Layout Shift (CLS) en réservant l'espace avant le chargement.
Réduire le render-blocking avant l'image
Le LCP peut être retardé non pas par l'image elle-même, mais par des ressources qui bloquent le rendu. Vérifiez dans PageSpeed Insights la section "Éliminer les ressources bloquant le rendu".
Les coupables habituels dans PrestaShop :
- CSS non-critique chargé en
<head>— extrayez le CSS above-the-fold et inlinez-le - JavaScript sans
deferouasync— PrestaShop 8 permet de configurer ça viaRegisterJavascript()avec le paramètrebottom - Fonts Google chargées via
@importdans le CSS — remplacez par un<link rel="preconnect">suivi d'un<link rel="preload">
// Dans un module PrestaShop, déclarer un JS en bas de page
$this->context->controller->registerJavascript(
'my-module-script',
'modules/my_module/views/js/script.js',
['position' => 'bottom', 'priority' => 200]
);Mesurer et valider l'impact
Après chaque modification, mesurez l'impact avec :
- Chrome DevTools → Performance : rechargement en cache vide, mesurez le marqueur LCP
- PageSpeed Insights : données de terrain (CrUX) et données lab côte à côte
- WebPageTest : filmstrip visuel pour voir exactement quand l'image apparaît
Objectif : LCP < 2,5 s sur mobile en 4G simulé. Sur une fiche produit PrestaShop correctement optimisée, 1,5 à 2 s est atteignable sans infrastructure particulière.
Conclusion
L'optimisation du LCP sur une fiche produit PrestaShop se résume souvent à trois actions : retirer le lazy loading de l'image principale, ajouter un preload dans le head, et s'assurer que l'image est en WebP avec des dimensions explicites. Ces corrections prennent moins d'une heure à implémenter et ont un impact direct sur le classement Google.
Vous avez une fiche produit lente à optimiser ou un audit Core Web Vitals à mener ? Contactez-moi, on en parle.
