Prestashop 1.6
Bonjour,
Depuis la dernière mise à jour Google, il semble que les signaux web essentiels soient de plus en plus importants.
Je regarde le CLS qui doit être inférieur à 0.1. Google m'indique des problèmes CLS pour la plupart des pages produits (CLS à plus de 0,25).
En faisant une analyse avec PAGESPEED INSIGHTS et LIGHTHOUSE REPORT VIEWER, il est indiqué:
"Image elements do not have explicit width and height"
Les miniatures images en bas de pages produits avec les accessoires liés au produits et les produits dans la même catégorie posent problèmes.
Afin d'améliorer le CLS, la solution serait de modifier les attributs width et height des éléments <img>.
Dans le fichier product.tpl on trouve:
<img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
En remplaçant width="{$homeSize.width}" height="{$homeSize.height}" par width="150" height="150"
Cette modification ne change rien.
Pourriez vous m'aider à définir les valeurs des attributs width et height en dur (en pixels) afin que le navigateur puisse allouer l’espace nécessaire à l’affichage des images.
Je recherche donc le ou les fichiers à modifier pour définir ces attributs et ainsi je l'espère améliorer le CLS (ne plus avoir ce warning "Image elements do not have explicit width and height")
Edit History
Prestashop 1.6
Bonjour,
Depuis la dernière mise à jour Google, il semble que les signaux web essentiels soient de plus en plus importants.
Je regarde le CLS qui doit être inférieur à 0.1. Google m'indique des problèmes CLS pour la plupart des pages produits (CLS à plus de 0,25).
En faisant une analyse avec PAGESPEED INSIGHTS et LIGHTHOUSE REPORT VIEWER, il est indiqué:
"Image elements do not have explicit width and height"
Les miniatures images en bas de pages produits avec les accessoires liés au produits et les produits dans la même catégorie posent problèmes.
Afin d'améliorer le CLS, la solution serait de modifier les attributs width et height des éléments <img>.
Dans le fichier product.tpl on trouve:
<img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
En remplaçant width="{$homeSize.width}" height="{$homeSize.height}" par width="150" height="150"
Cette modification ne change rien.
Pourriez vous m'aider pour définir les valeurs des attributs width et height en dur (en pixels) afin que le navigateur puisse allouer l’espace nécessaire à l’affichage des images.
Je recherche donc le ou les fichiers à modifier pour définir ces attributs et ainsi je l'espère améliorer le CLS (ne plus avoir ce warning "Image elements do not have explicit width and height")