Améliorer les core web vitals d’un prestashop rapidement

core web vitals

Vous avez une boutique prestashop, et vous souhaitez améliorer les core web vitals rapidement ? Pour chaque problème mentionné, nous vous indiquons le fichier à modifier et comment le modifier. Alors prêt à perfectionner les core web vitals prestashop !

Les éléments d’image ne possèdent pas de width ni de height explicites

Identifier le type d’image qui pose un problème. Il faudra modifier les templates d’un module ou du thème. Faites un clic droit sur l’image, et inspectez l’élément.

Si vous ne savez pas de quoi il s’agit, nous vous contactons de contacter un expert prestashop, ou de nous contacter pour vous assister dans la modification des fichiers.

Ajouter width et height sur les produits

Si vous souhaitez ajouter ces informations sur les miniatures de vos fiches produits. Il vous faudra modifier le fichier suivant.

/themes/{votre theme}/templates/catalog/_partials/miniatures/product.tpl

Dans le code du fichier, regardez où sont rajoutés les images en recherchant le code img src. Normalement, l’image n’aura pas les attributs width et height de défini.

Ajouter ce code

width="{$product.cover.bySize.home_default.width}"
height="{$product.cover.bySize.home_default.height}"

Ajouter width et height sur les images d’un blog

Pareil, inspectez l’élément pour savoir à peu près comment modifier votre code

Le fichier à modifier devrait se trouver dans un dossier comme modules/{votre module}/views/templates/front

Identifier l’insertion des images et procéder de la même façon.

Diffusez des éléments statiques grâce à des règles de cache efficaces 

Pour cela, soit vous pouvez accéder à vos fichiers de configuration Apache ou Nginx.

Le cache control est un complément de l’expire headers, en fonction du serveur que vous avez ou du navigateur utilisé par vos visiteurs. Là aussi, on va déterminer une durée de cache par type de fichier.

Si cela n’est pas possible, ouvrez le fichier .htaccess qui se trouve à la racine de votre domaine, puis ajoutez ce code.

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
 <FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
 Header set Cache-Control "max-age=31536000, public"
 </FilesMatch>
 <FilesMatch "\.(js)$">
 Header set Cache-Control "max-age=31536000, public"
 </FilesMatch>

Éliminez les ressources qui bloquent le rendu

Lorsque vous regardez les erreurs, vous aurez surement des fichiers css ou javascript

Si vous avez des choses comme ça

/css?family=Lato:400,400i,700,700i(fonts.googleapis.com)

Alors il vous faudra éditer les fichiers head.tpl

Ce fichier peut être retrouver dans ce dossier

/themes/{votre theme}/templates/_partials

Là vous devez avoir du code non optimisé qui doit surement ressembler à cela.

<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet" media="all"> 

On va le modifier comme ça

<link rel="preconnect" href="https://fonts.gstatic.com">

<link
    rel="preload"
    href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
    
<link
        href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap"
        rel="stylesheet"
        type="text/css"
    />

</noscript>

On va ajouter display=swap

  1. Swap ; La période de blocage est extrêmement courte et est suivie par une période d’échange infinie.
  2. On va ajouter onload pour faire en sorte que la font ne se charge uniquement à la fin du process

La meilleure pratique serait tout de même de mettre les fonts sur vos serveurs et de les charger directement. Vous éviterez ainsi une résolution DNS.

Voir plus de Prestashop

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.