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 !
Table des matières
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
- Swap ; La période de blocage est extrêmement courte et est suivie par une période d’échange infinie.
- 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.