Magento 2 est une plateforme e-commerce robuste et parmi les plus réputées du marché. Voici déjà le troisième article des bonnes pratiques Magento 2, portant à 15 le nombre total de bonnes pratiques à votre disposition. L’article de cette semaine sera dédié aux bonnes pratiques Magento 2 de 11 à 15 faisant directement suite au précédent sur les bonnes pratiques Magento 2 – 06 à 10.
Bonne Pratique Magento 2 11 : Optimiser votre thème et vos médias
Un thème Magento 2 lourd rendra les temps de chargement plus longs même pour les utilisateurs qui ont une connexion Internet décente.
Autre effet secondaire d’un thème Magento non optimisé : il utilise beaucoup de ressources serveur et de bande passante inutilement, pensez à la planète !
Il y a deux façons de traiter un mauvais thème Magento 2 :
- La plus évidente consiste à le changer pour un thème Magento 2 plus léger, surtout si votre thème est ancien et que les développeurs ont cessé de le mettre à jour.
- La meilleure solution est de l’alléger vous-même.
Vous pouvez également optimiser la taille des images !
Les médias constituent une part importante de tout site marchand, donc le fait de traiter ces fichiers en premier vous permettra d’obtenir des gains immédiats. Vous devrez cependant être minutieux dans votre approche.
Efforcez-vous de respecter les exigences minimales en matière d’images pour votre activité en ligne : il n’est pas nécessaire d’utiliser une photo de 500×500 alors qu’une photo de 200×200 fera l’affaire.
Même si Magento 2 redimensionne automatiquement les images lorsque vous enregistrez un produit, il est bon de préparer vos images !
Minimisez les grandes images avant de les envoyer. TinyJPG, Kraken.io, et d’autres services sont vos meilleurs amis.
Cloudflare ou encore AWS CloudFront CDN vous aideront beaucoup.
N’hésitez pas à contacter les équipes NBS System pour vous faire accompagner sur Magento 2 !
Bonne Pratique Magento 2 12 : Optimiser les fichiers de style CSS pour des temps de chargement plus rapides
La plupart des contenus que votre navigateur doit télécharger sont des photos et des éléments graphiques.
Nous vous avons déjà montré comment traiter les grands médias
Passons à d’autres fichiers. Voici quelques petites bonnes pratiques Magento 2 que vous pouvez mettre en œuvre directement depuis votre panneau d’administration Magento 2.
Passez en “mode développeur” pour accéder à ces paramètres.
Lancez SSH et tapez :
php bin/magento deploy:mode:set developer
Allez maintenant dans “Stores > Configuration > Advanced > Developer”, trouvez les Paramètres CSS !
Modifiez les deux sur “Oui”.
Cet outil va raccourcir et optimiser par d’autres moyens le code CSS existant pour aider le navigateur à le télécharger plus rapidement.
La fusion est également très utile : les navigateurs ne maintiendront qu’un nombre limité de connexions par serveur.
Rappelez-vous que deux ou trois gros fichiers seront toujours téléchargés plus rapidement qu’une douzaine de petits.
Bonne pratique Magento 2 13 : S’assurer que les paramètres de JS vous offrent la meilleure performance
Magento 2 va essayer de regrouper tous les fichiers JS en quelques gros paquets (bundle) afin d’améliorer les temps de chargement.
Cependant, cette méthode empêche le chargement des pages tant que le navigateur n’a pas fini de télécharger tous les paquets !
Les bundles JS peuvent avoir une taille de plus de 10 Mo !
Ils sont bien plus gros que les CSS, donc la fusion de JS n’est pas la meilleure solution car Magento 2 les charge chaque fois que votre navigateur demande une nouvelle page.
Imaginez à quel point cela peut être un obstacle pour vos clients.
La toute première impression compte.
La première visite d’un nouveau client sur votre boutique en ligne peut être terriblement lente s’il doit télécharger un pack JS de plus de 10 Mo en plus des autres éléments composant votre page.
Ce mécanisme devrait être désactivé au profit de l’utilisation d’un CDN. Des fichiers JS plus petits allègeront les pages individuelles et le CDN se chargera de livrer ces petits fichiers à vos clients beaucoup plus rapidement.
Avec la mise en production de HTTP/2 (en 2015) et de HTTP/3 (en 2019), le “groupage” JS n’est plus pertinent.
Assurons-nous que les paramètres de Magento JS sont optimaux.
“Stores > Configuration > Advanced > Developer > JS Settings”
Réglez votre JavaScript comme indiqué dans l’image ci-dessus..
“JS Merge and Bundling” devrait être désactivé. La minification JS doit être activée.
Bonne Pratique Magento 2 14 : Activer la « minification » HTML
Les fichiers HTML, CSS et JS minifié (réduits) se chargeront plus rapidement et prendront moins de place sur le serveur.
La réduction de ces fichiers augmentera encore la vitesse de chargement.
Elle supprime les commentaires des développeurs, remplace les noms de variables par des versions plus courtes et, d’une manière générale, met de l’ordre dans votre code et réduit l’encombrement…
La minimisation du HTML n’est visible qu’en option dans le mode développeur.
“Stores > Configuration > Advanced > Developer > Template Settings”
Bonne Pratique Magento 2 15 : Utiliser la compression Magento GZIP
La compression Gzip est la base d’une boutique axée sur la performance.
Cette option offre un compromis intéressant entre la réduction de la bande passante et le délai de transmission du premier octet (TTFB).
Gzip compresse chaque page que vous demandez au serveur.
Ainsi, par exemple, un fichier de 64 Ko sera envoyé à votre navigateur sous la forme d’une archive gzip de 10 Ko.
Remarquez que le processus de compression prend du temps CPU, ce qui signifie que votre serveur web devra faire un compromis entre l’économie de données et le temps de récupération.
Gzip est un module extrêmement courant, de sorte que la plupart des environnements le prendront en charge dès le départ.
Il vous suffit de vous assurer qu’il fonctionne sur votre site web.
Le plus simple est de demander à votre hébergeur de l’activer pour votre site web Magento 2.
Chez NBS System, nous activons le Gzip sur les environnements Magento.
La suite est d’ores et déjà disponible sur notre blog. Découvrez notre article dédié aux bonnes pratiques Magento 2 – 16 à 20.
