Dans notre précédent blog, Partie 1 : Optimisation des performances du serveurnous avons exploré des stratégies clés pour améliorer les performances du serveur afin d’accélérer votre site Web Magento 2. Si vous n’avez pas encore eu l’occasion de le lire, nous vous recommandons fortement de le faire.
Partie 2 : Améliorer le code et le contenu du site Web
Rendre votre site Web plus rapide et meilleur est important pour satisfaire les utilisateurs et garder une longueur d’avance sur les concurrents. Voici quelques moyens simples d’accélérer et d’améliorer votre site Web Magento 2.
Astuce 1 : accélérez votre site avec le bon thème
La vitesse de votre site Web dépend beaucoup du thème que vous choisissez. Si votre site est toujours lent après avoir suivi nos conseils, pensez à changer de thème. Recherchez des thèmes comme Hyva(https://www.hyva.io/)optimisé pour la vitesse. Avant d’effectuer la transition, testez la rapidité de la version démo avec vos outils habituels.
Astuce 2 : accélérez votre site en gérant les extensions
Pour augmenter la vitesse de chargement, examinez vos extensions. Les éléments obsolètes ou contradictoires peuvent ralentir votre boutique. Supprimez celles qui sont inutiles, puis testez chaque extension individuellement en les activant et en les désactivant. Pour les problèmes problématiques, recherchez des alternatives fiables ou envisagez des solutions personnalisées.
Astuce 3 : Améliorez la vitesse avec le CSS critique
CSS affecte l’apparence et la vitesse de chargement de votre site Web. Les fichiers CSS externes volumineux peuvent ralentir le chargement des pages, car les pages attendent que ces fichiers se chargent.
Critical CSS vous permet de prioriser les fichiers CSS qui doivent se charger immédiatement pour qu’une page s’affiche correctement et ceux qui peuvent se charger plus tard. Cette approche, comme le regroupement JS, élimine les ressources bloquant le rendu et augmente la vitesse de chargement.
Pour l’activer dans les paramètres de votre boutique Magento, accédez à Magasins > Paramètres > Configuration > Avancé > Développeur et choisissez Oui dans Activer le chemin critique CSS.
Veuillez noter que l’onglet Développeur n’est visible qu’en mode développement. Si vous avez défini votre mode sur Production et préférez ne pas le modifier, vous pouvez exécuter la commande suivante :
bin/magento config:set dev/css/enable_css_critical 1
Cette commande permet d’utiliser des CSS critiques même en mode Production, vous permettant d’optimiser la vitesse de chargement de votre site Web.
GIF illustrant comment gérer les CSS critiques à partir du panneau d’administration
Astuce 4 : Accélérez votre site avec du CSS, du JavaScript et du HTML minifiés
La minification supprime les espaces inutiles, les commentaires et les redondances de code dans les fichiers CSS, JavaScript et HTML. Utilisez des extensions Magento ou des outils externes pour réduire ces fichiers, réduisant ainsi leur taille et améliorant les temps de chargement.
La minification consiste à supprimer les bits inutiles du code sans affecter la fonction. Il réduit la taille des fichiers, augmentant ainsi les temps de chargement.
Dans Magento 2, vous pouvez facilement activer cette fonctionnalité. Accédez aux paramètres du développeur du panneau d’administration et définissez « Réduire les fichiers JavaScript » et « Réduire les fichiers CSS » sur Oui.
Astuce 5 : accélérez votre site avec l’optimisation des images
Compressez les images sans compromettre la qualité à l’aide d’outils comme Adobe Photoshop, Tiny PNG ou des plugins disponibles dans Magento. Utilisez le chargement différé pour charger les images uniquement lorsqu’elles apparaissent dans la fenêtre d’affichage, réduisant ainsi les temps de chargement initiaux des pages.
Les sites de commerce électronique hébergent souvent de nombreuses images de produits et, si elles ne sont pas correctement compressées, elles peuvent ralentir votre site Web. Voici ce qu’il faut faire :
- Compressez toutes les images à l’aide d’outils en ligne adaptés à chaque type de fichier.
- Utilisez PNG ou SVG pour votre logo et JPEG ou PNG pour les images de produits.
- Évitez d’utiliser HTML pour la mise à l’échelle des grandes images.
- Implémentez le chargement différé pour charger les images progressivement au fur et à mesure que les visiteurs défilent, améliorant ainsi la vitesse.
- Considérez les images WebP (réduction de taille de 25 à 35 %), mais vous aurez peut-être besoin d’une extension pour la prise en charge de Magento.
- Recherchez des modules d’optimisation d’images sur Adobe Marketplace pour compresser des images directement sur votre site.
Choisissez le bon type de fichier image :
- L’image du produit doit être dans les 3 types les plus courants, à savoir JPEG, GIF et PNG.
- Le logo doit être au format PNG ou SVG.
Utilisez des outils de retouche photo pour compresser et réduire la taille de vos images sans perdre en qualité d’image :
- Pour PNG : TinyPNG
- Pour JPEG : JPEGmini et ImageOptim
- Pour SVG : Vecta.io
N’utilisez pas HTML pour gérer la mise à l’échelle des grandes images, car cela rend les images moins bonnes que les originales et le navigateur met plus de temps à les mettre à l’échelle.
Astuce 6 : améliorez les temps de chargement en supprimant les polices inutilisées
Lors de la conception d’un site Web, vous pouvez essayer différentes polices avant d’en choisir une. Cela peut laisser des polices personnalisées inutilisées dans la section
, qui se chargent toujours même si elles ne sont utilisées nulle part. Supprimez ces polices inutiles pour augmenter la vitesse de chargement.
Astuce 7 : rendez votre magasin plus rapide en nettoyant les journaux
Le nettoyage régulier des anciens journaux permet d’empêcher la base de données de ralentir votre boutique. Pour plus de sécurité, pensez à créer une sauvegarde des journaux avant le nettoyage, même si vous ne pensez pas en avoir besoin.
GIF illustrant comment gérer le nettoyage des journaux à partir du panneau d’administration
Astuce 8 : accélérez votre site en désactivant les modules inutilisés
Améliorez la vitesse de votre site Web en désactivant les modules de base inutiles, notamment :
- Langues supplémentaires
- Expédition multiple
- Expédition et paiements hors ligne
- Types de produits inutilisés
- Tout autre module qui n’est pas vital pour le fonctionnement de votre magasin.
Pensez également à désactiver des fonctionnalités telles que les rapports sur les actions des utilisateurs si elles ne sont pas cruciales pour votre boutique. Ces actions peuvent notamment booster les performances de votre site internet.
Astuce 9 : accélérez votre site en désactivant le regroupement JS
Le regroupement JS peut réduire les requêtes HTTP, mais il peut également ralentir votre site Web. En effet, les pages ne se chargeront pas tant que tous les ensembles ne seront pas téléchargés, même si seuls certains sont nécessaires. De plus, Magento charge les bundles JS chaque fois qu’un utilisateur clique sur une nouvelle page.
Pensez à désactiver le regroupement JS pour améliorer la vitesse de votre site Web. Cela peut éviter les retards inutiles causés par le chargement de lots inutilisés à chaque clic de page.
Pour désactiver le regroupement JS : Accédez à Magasins > Configuration > Avancé > Développeur > Paramètres JS. Choisissez Désactiver le regroupement JavaScript.
GIF illustrant comment activer/désactiver le regroupement JS à partir du panneau d’administration
Utiliser ces moyens pour améliorer votre site Web Magento 2 peut vraiment accélérer et améliorer ses performances. Continuez à vérifier et à tester régulièrement et apportez les modifications nécessaires pour assurer le bon fonctionnement de votre site Web. Accélérer votre site Web Magento 2 est essentiel pour suivre le rythme des autres boutiques en ligne et offrir aux clients une excellente expérience d’achat.
Source link