Jump to content

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


Recommended Posts

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 by mgaffaires (see edit history)
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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 by mgaffaires (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...