Amélioration du CLS - modification de la taille des images dans le source

[mgaffaires]

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")

Edited July 25, 2021 by mgaffaires (see edit history)

[mgaffaires]

Les problèmes CLS sont au niveau des pages produits.

[Mediacom87]

Bonjour,

votre souci vient des images qui n'ont pas de dimension indiquées clairement dans le code, donc vous devez déjà identifier ces images.

Sur votre page produit, le souci est déjà au niveau du logo de la marque qui ne comporte pas l'information, je ne sais pas comment vous avez intégrer ce code mais il faut l'adapter.

Mais il y a aussi l'image des logos de paiement ou encore le code du module des produits dans la même catégorie.

 

 

[mgaffaires]

Merci de votre aide, les images ont bien été identifiées avec Lighthouse Report Viewer.
Il s'agit des images suivantes:
- miniatures des produits accessoires, on ajoute ces produits dans l'onglet association -> accessoires dans la page produit dans le BO
- miniatures des produits qui se trouve dans la même catégorie que le produit de la page analysée

Pouvez vous m'indiquer les fichiers .tpl à modifier ou CSS.
Le gros des images sont celles indiquées ci-dessus. Je vais voir si le CLS s'améliore. Pour les images logos des marques, je ferais ça dans un second temps.

Edited July 25, 2021 by mgaffaires (see edit history)

[Mediacom87]

Pour les modules certainement que cela se trouve dans les surcharges faites dans le template dans leur répertoire modules.

[mgaffaires]

Je pense que ce sujet peut intéresser du monde car ce critère est important pour le référencement.

Est-ce que quelqu'un peut m'aider à trouver les fichiers à modifier qui contiennent les dimensions des images.

Les lignes de codes à modifier doivent être du type:

                                                <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}"/>

[Mateos]

avez vous trouvé la solution? j'ai le même problem

[zepelucheclub.com]

Bonjour même probleme