Optimisation de la vitesse de Magento 2 : méthodes simples + avancées

Vous connaissez l'exercice, la vitesse des pages affecte grandement le succès d'un magasin, car les magasins aux performances lentes auront forcément des taux de conversion plus faibles et perdront par conséquent face à leurs concurrents. Et puisque nous faisons régulièrement de l'optimisation de la vitesse pour nos clients, nous pensons qu'il est de notre compétence de vous fournir des techniques à jour sur l'optimisation de la vitesse dans Magento 2.

Optimisation de la vitesse et pourquoi il est difficile de bien faire les choses

De toute évidence, si l'optimisation de la vitesse sur les sites Web Magento 2 consistait simplement à installer et à activer des extensions, vous ne vous retrouveriez pas aux prises avec l'optimisation des performances. C'est bien plus compliqué que ça.

Beaucoup de variables

Vous devez prendre en compte les différentes variables impliquées dans la mesure de la vitesse de la page. Il se peut que la vitesse de votre page soit réellement fantastique dans des conditions idéales, c'est-à-dire si l'appareil de l'utilisateur est capable de restituer tout ce que vous lui lancez. Ou il se peut que la vitesse de votre page ne soit pas si mauvaise, mais que les performances perçues pour l'utilisateur soient terribles en raison d'un mauvais changement de mise en page cumulé.

De nombreuses variables doivent être prises en compte lors de l'optimisation des performances de votre magasin, c'est pourquoi vous devez toujours identifier les problèmes spécifiques en premier.

Priorité

Et même si vous avez fait vos devoirs et identifié tous les problèmes de fonctionnement de votre magasin, ce ne serait toujours pas une bonne idée d'essayer de tous les résoudre. D'après notre expérience, les micro-optimisations ne font pratiquement rien pour améliorer les performances dans le monde réel, et vous ne devriez travailler qu'à l'optimisation des problèmes qui, selon vous, sont les principaux obstacles empêchant votre magasin de proposer le type d'expérience d'achat que vous souhaitez.

Troquer

Lorsque vous vous y intéressez vraiment, l'optimisation de la vitesse est un compromis constant entre fonctionnalité et performance - vous devez toujours sacrifier quelque chose pour obtenir de meilleures performances. Parfois, c'est un thème Magento séduisant, parfois c'est une extension utile qui nuit aux performances de votre boutique.

Techniques générales d'optimisation

Ces techniques d'optimisation générales sont indolores et ne nécessitent pas beaucoup de connaissances techniques pour être mises en œuvre.

1. Vérifiez votre version actuelle d'hébergement et de Magento

L'hébergement joue un rôle crucial dans la vitesse du site Web, car plus un plan d'hébergement est bon, plus votre magasin peut rester rapide malgré l'augmentation du trafic ou des catalogues volumineux.

Il est encore plus important pour un site Magento d'avoir un hébergement décent pour faciliter sa structure robuste et complexe. Bien que l'hébergement Magento nécessite au moins 2 Go de RAM pour fonctionner, le plan d'hébergement approprié dépend de l'échelle du site Web.

Ainsi, si votre site Web Magento actuel est lent et que vous utilisez un hébergement bas de gamme, il est temps de mettre à niveau pour une amélioration significative de la vitesse.

>> Voir plus : 12 meilleurs hébergeurs Magento

2. Utilisez un service CDN

(Photo/WPbeginner.com)

Dans la chaîne d'approvisionnement logistique, les articles sont expédiés plus rapidement s'il existe un entrepôt situé à proximité de l'emplacement de l'acheteur. De même, le CDN (réseau de diffusion de contenu) permet de diffuser le contenu plus rapidement en mettant en cache le contenu dans un serveur périphérique à proximité de la géolocalisation de ses utilisateurs.

CDN est idéal pour les grands magasins avec des visiteurs internationaux, ainsi que pour les sites Web avec beaucoup de contenu dynamique sur ordinateur et mobile. Pour ces raisons, il s'adapte parfaitement à de nombreux sites Magento.

Alors que de nombreux hébergeurs proposent des services CDN, vous pouvez également choisir vos propres fournisseurs CDN comme Fastly ou Stackpath. Après avoir défini le service, vous devez configurer CDN dans votre backend Magento avant de voir les modifications.

3. Images de chargement paresseux

Parmi tous les types de ressources demandées par les sites Web populaires, les images sont le type de ressource le plus fréquemment demandé, dont le nombre de requêtes représente en moyenne 35,6 % (ordinateur de bureau) du total des requêtes effectuées par la page. En termes de poids de page, les ressources d'image occupent en moyenne 46,6 % du poids médian de la page, ce qui en fait le fruit à portée de main de l'optimisation de la vitesse qui donne des résultats impressionnants lorsque vous le faites correctement.

Le chargement différé est un moyen efficace d'améliorer les performances de votre boutique car il élimine le besoin de charger toutes les images en même temps. Avec le chargement paresseux, les images sont chargées ultérieurement lorsque l'utilisateur en a besoin, ce qui réduit efficacement le temps nécessaire pour charger une page sans nuire à l'expérience utilisateur.

Dans Magento 2, vous pouvez implémenter des images de chargement paresseux sur votre site Web Magento avec des extensions telles que Lazy Loading pour Magento 2. Il existe plusieurs autres extensions comme celle-ci qui sont disponibles gratuitement sur le marché Magento.

4. Utilisez WebP

Souvent comparé au couteau suisse des formats d'image, WebP est un nouveau format d'image flexible qui gagne rapidement en popularité et devrait remplacer PNG, JPEG et GIF. Par rapport aux images PNG et JPG, les images WebP sont généralement 25 à 35 % plus petites avec une perte de qualité d'image quasi nulle.

Comme il s'agit encore d'un format d'image relativement nouveau, WebP n'est pas pris en charge par défaut dans Magento 2 et vous devrez installer des extensions tierces telles que Magento 2 WebP Images Extension pour activer la conversion automatique des images en WebP.

5. Utilisez des thèmes légers

À partir des seules impressions, vous pouvez savoir quand un thème lourd ralentit considérablement votre boutique, et les utilisateurs avec une connexion Internet lente et/ou des capacités matérielles obsolètes n'en seront que plus affectés.

Pour contourner ce problème, vous devrez choisir de manière sélective vos thèmes Magento en mettant davantage l'accent sur les performances. Cependant, nous comprenons qu'il est difficile de déterminer avec précision si un thème est vraiment léger, c'est pourquoi vous devriez généralement vérifier si la version de démonstration du thème vous semble rapide, lire plus d'avis d'utilisateurs et si vous voulez être sûr de utilisez PageSpeed ​​Insights pour tester le thème à fond.

6. Désactiver les catalogues plats

Auparavant, l'activation du catalogue plat était la voie à suivre si vous souhaitiez réduire le temps nécessaire pour effectuer des requêtes SQL. Cependant, à partir de Magento 2.1 et supérieur, ce n'est plus une bonne pratique, et vous devez vous abstenir d'utiliser toute extension impliquant l'utilisation du catalogue plat car cette fonctionnalité est connue pour entraîner une dégradation des performances et d'autres problèmes d'indexation.

Pour désactiver les catalogues plats, assurez-vous que vous avez défini Utiliser la catégorie du catalogue plat/Utiliser le produit du catalogue plat sur Non dans Magasins > Paramètres > Configuration > Catalogue.

7. Réduisez les extensions tierces inutiles

Comme toujours, empiler des extensions tierces n'est pas toujours une bonne idée, et les extensions tierces peuvent causer encore plus de problèmes si elles sont téléchargées/achetées à partir de sources non fiables. Pour éliminer tout problème potentiel, les meilleures pratiques consistent à limiter votre nombre d'extensions à un nombre essentiel, à les mettre à jour régulièrement et à ne télécharger/acheter des extensions tierces qu'à partir de sources fiables.

8. Désactiver le regroupement Javascript

Javascript Bundling regroupe plusieurs de vos fichiers Javascript dans un bundle. En conséquence, le serveur doit demander moins de fichiers Javascript, ce qui prend moins de temps pour le faire. Ceci, en théorie, devrait aider à la performance.

Cependant, en réalité, l'outil de base JS Bundling intégré à Magento ne répond pas tout à fait à cette attente, mais entraîne souvent une vitesse de chargement plus faible. Selon un test réalisé par un membre de l'échange de piles Magento, le temps de chargement moyen de sa page Web passe de 5 à 15 secondes après l'activation de JS Bundling.

Le JS Bundling est désactivé par défaut. Cependant, vous pouvez vérifier s'il était activé auparavant et le désactiver à nouveau en accédant à

Magasin >> Configuration >> Avancé >> Développeur >> Paramètres JavaScript et définissez Activer le regroupement JavaScript sur Non .

9. Optimiser le journal de données Magento

Les fichiers journaux de votre site Web Magento répertorient toutes les modifications apportées à la base de données. Au fil du temps, ils peuvent s'accumuler jusqu'à quelques Go, ce qui ralentit les performances de votre site.

La suppression des anciens gros journaux qui ne sont plus pertinents pour l'activité actuelle de votre site est une étape nécessaire pour maintenir une bonne performance de vitesse.

De plus, Magento génère automatiquement et fréquemment de nouveaux fichiers journaux, donc la suppression des anciens ne devrait pas vous causer de problèmes.

Pour les marchands non techniques, vous pouvez accéder à Store >> Configuration >> Advanced >> MySQL Message Queue Cleanup .

Le nettoyage supprimera automatiquement les anciens fichiers journaux après un certain temps.

Magento a défini des valeurs par défaut pour ces attributs ci-dessus, mais vous pouvez les modifier comme bon vous semble.

Aller un peu plus avancé

10. Utiliser la mise en cache pleine page de Varnish

Varnish Cache est un accélérateur d'applications Web open source qui, selon votre architecture, peut accélérer la diffusion de contenu avec un facteur de 300 à 1000x. C'est pourquoi Magento lui-même recommande fortement Varnish car c'est une bien meilleure option que la mise en cache pleine page intégrée. De plus, étant donné que Varnish est conçu pour accélérer le trafic HTTP, vous pouvez réduire considérablement le temps de réponse du serveur et la consommation de bande passante du réseau lors de requêtes répétées.

Pour configurer et utiliser Varnish, suivez le guide détaillé étape par étape pour faire voler votre site Web Magento 2.

Propulsé par Varnish, Fastly vous aide à en faire plus pour un coût

Pour Magento Commerce Cloud en particulier, Fastly est requis pour une utilisation dans les environnements de mise en scène et de production. Par rapport à l'utilisation de Varnish seul, il s'agit d'une approche plus riche en fonctionnalités car, en plus des capacités de mise en cache rapide fournies par Varnish, il fournit également un CDN et des améliorations de sécurité pour votre site Web Magento 2 et votre infrastructure Cloud.

Les marchands sur Magento Open Source sont invités à utiliser Fastly, mais vous devez quand même noter que, contrairement à Varnish, Fastly n'est pas une solution gratuite et a des frais basés sur la bande passante et l'utilisation des demandes par région.

Pour configurer Fastly, consultez le guide officiel sur Magento DevDocs.

11. Configurer Memcached/ Redis

La mise en cache est bien connue pour être une solution efficace pour optimiser la vitesse et réduire considérablement le temps de chargement.

Alors que Varnish est une solution de mise en cache pour le frontend, Memcached et Redis aident à la mise en cache backend, ce qui est fortement recommandé pour les applications Web à grande échelle avec des bases de données dynamiques.

Redis est plus puissant et plus flexible que Memcached, et il peut faire tout ce que Memcached peut faire. Ainsi, c'est un choix plus populaire parmi les développeurs. Cependant, Memcached est plus simple à configurer et à utiliser, et il peut être plus avantageux que Redis dans des cas spécifiques.

Il est recommandé de creuser plus profondément pour savoir ce qui fonctionne le mieux pour l'environnement de votre site Web avant d'essayer de configurer Memcached, Redis ou les deux.

12. Passez à HTTP/2

Sorti en février 2015, HTTP/2 est une nouvelle amélioration apportée au protocole HTTP existant. Il est maintenant utilisé par 49,9 % de tous les sites Web et ne verra que plus d'adoptions à partir de maintenant, d'autant plus que les tests ont montré que HTTP/2 offre jusqu'à 14 % d'amélioration du chargement des pages et d'autres avantages.

Par exemple, dans la vidéo de démonstration ci-dessous, vous pouvez voir comment HTTP/2 permet de meilleures performances lorsqu'il est poussé à la limite :

Dans cette vidéo, nous avons chaque image divisée en 379 petites tuiles, nécessitant ainsi 379 connexions distinctes à établir avec le serveur. Il s'agit d'un scénario hautement improbable, mais il nous donne un aperçu du fonctionnement du multiplexage HTTP/2 et de la manière dont il peut apporter des performances beaucoup plus rapides par rapport à HTTP/1.

Pour activer HTTP/2 pour votre site Web Magento, vous devez le configurer via votre CDN (par exemple, Fastly) ou via vos serveurs Web (Apache). Par exemple, voici comment le faire dans Apache & Nginx.

13. Minification

La minification, comme son nom l'indique, est une méthode pour minifier le code de votre page. Au cours du processus de minification, toutes les parties inutiles de vos fichiers HTML, JavaScript ou CSS seront supprimées, garantissant que les ressources de votre page restent aussi légères que possible. La minification est une pratique courante de nos jours et chaque site Web devrait l'appliquer dans son infrastructure car il s'agit essentiellement d'une amélioration gratuite des performances.

Pour activer la minification de votre site Web Magento, vous pouvez compter sur des extensions facilement disponibles telles que Minify HTML CSS JS, ou activer la minification CSS et JavaScript directement via le backend Magento. Avec cette dernière méthode, vous devrez :

• Mettez votre boutique Magento 2 en mode production
• Allez ensuite dans Stores > Configuration > Avancé > Développeur
• Définissez Minify HTML / Minify CSS Files / Minify JavaScript Files sur Oui
• N'oubliez pas de vider le cache par la suite via Système > Gestion du cache

14. Allez sans tête avec une vitrine PWA

Étant donné que la plupart des sites Web Magento que nous avons actuellement sont toujours basés sur l'architecture traditionnelle, vous êtes plus limité par l'infrastructure utilisée plus que tout, car l'architecture traditionnelle elle-même est rigide, conservatrice et sujette à des ralentissements au fil du temps. L'architecture sans tête résout plus ou moins ce problème, car il s'agit d'une approche qui cherche à apporter plus de flexibilité, plus d'évolutivité et plus d'améliorations des performances aux vitrines.

C'est pourquoi vous voyez que les marques optent pour les vitrines PWA (qui est une vitrine sans tête) comme un moyen d'améliorer davantage les performances, et c'est vraiment un dormeur qui ne fera que gagner en reconnaissance dans un proche avenir.

Étant donné que le sans tête implique souvent des modifications majeures de l'infrastructure de votre site Web, nous vous suggérons de ne compter que sur un fournisseur de confiance Magento PWA Solution pour effectuer l'ensemble du processus pour vous.

 Lecture recommandée : Avantages des PWA pour votre entreprise

15. Supprimez les polices inutilisées

Il est courant d'essayer différentes polices avant de décider lesquelles conviennent le mieux à votre site Web, puis de les oublier. Cependant, ces polices sont toujours ajoutées à votre "default_head_blocks.xml", et elles sont toujours en cours de téléchargement.

Si vous souhaitez optimiser la vitesse de votre site Magento, il est nécessaire de supprimer toutes les polices inutilisées.

De même, si vous utilisez une police personnalisée, vous devez supprimer les autres polices par défaut de votre thème (par exemple, Open Sans, Helvetica, etc.).

Vous pouvez résoudre ce problème en remplaçant le _typography.less dans votre thème.

Déplacez simplement le

 /vendor/magento/theme-frontend-blank/web/css/source/_typography.less

À

 /app/design/frontend/Vendor/Theme/web/css/source/_typography.less

Supprimez ensuite toutes les polices inutiles dans les nouveaux fichiers _typography.less.

De plus, vous devrez supprimer les polices dans le fichier default_head_blocks.xml afin qu'il ne soit plus téléchargé.

 <tête>
...
<remove src="fonts/helvetica/regular/helvetica-400.woff2"/> 
<supprimer src="fonts/helvetica/bold/helvetica-700.woff2"/> 
...

16. Utilisez le regroupement Javascript avancé

À l'étape 8, nous suggérons de désactiver le regroupement JS natif de Magento pour son manque d'efficacité. Cependant, JS Bundling reste une pratique efficace pour obtenir une meilleure vitesse de Magento 2 si l'on sait comment le personnaliser.

Mais d'abord, parlons de la façon dont le groupement par défaut de Magento JS diffère des groupes avancés :

Pour le bundle JS de base de Magento, vous pouvez regrouper ou fusionner tous les fichiers JS en un seul bundle jumbo. Par conséquent, lorsqu'une page est requise, le navigateur doit charger ce gros bundle JS lourd, ce qui augmente inévitablement le temps de chargement.

Pendant ce temps, avec le regroupement JS avancé, vous pouvez personnaliser vos propres ensembles afin que le navigateur n'ait qu'à télécharger un ensemble pertinent pour le contenu de chaque page. Comme ces paquets sont plus petits et plus légers, ils ne causeront pas d'autres problèmes de vitesse.

De manière flexible, vous pouvez créer des bundles pour chaque type de page ou à des fins différentes.

Par exemple, personnalisez un ensemble pour les pages de catégorie et un autre pour les pages de paiement.

En ce qui concerne les instructions détaillées, vous pouvez vous fier au guide officiel de Magento pour le bundle JS avancé.

17. Utiliser le chargement JS différé

Lorsqu'un navigateur charge une page, il charge tous les fichiers Javascript, HTML et CSS de la page situés de haut en bas. Les fichiers Javascript, qui se trouvent souvent au-dessus, sont chargés en premier. Une fois Javascript chargé, le navigateur continue de restituer les fichiers HTML et CSS.

Cependant, Javascript est un langage plus compliqué, qui prend généralement plus de temps à charger que HTML. Ainsi, pour optimiser la vitesse de Magento 2, il est recommandé de déplacer le Javascript vers le bas afin qu'il ne soit chargé qu'après le rendu des fichiers HTML et CSS.

Vous pouvez le faire en suivant le guide officiel de Magento ou en utilisant une extension de report JS pour Magento 2.

18. Activer le chemin critique CSS

C'est une pratique courante pour les codeurs de stocker le CSS dans un fichier externe. Cependant, selon Magento, tous les styles CSS provenant de sources externes bloqueront le rendu. Autrement dit, votre page n'affichera rien si tous ces fichiers ne sont pas chargés.

En conséquence, cela augmente la métrique de peinture First Meaningful dans Google Page Speed ​​Insight et ralentit le chargement de la page.

Le chemin critique CSS permet de sélectionner les CSS critiques tout en différant tous les styles non importants. Ces styles CSS critiques sont ensuite minifiés et assemblés en ligne dans <head> .

Ainsi, cela aide à améliorer le temps nécessaire pour rendre une page la première fois. Magento a connu une baisse de First Meaningful Paint de 3,5s à 2,3s en activant cette fonction, et vous pouvez comprendre comment ils le font en suivant leur guide de chemin critique CSS.

19. Assurez-vous qu'il est en mode production

Magento a trois modes de fonctionnement : modes par défaut, développeur et production.

Le mode de production, qui est optimisé pour les performances en activant la mise en cache de la page entière, les bundles JS et plus encore, est le mieux recommandé pour tous les sites Magento en direct. C'est le mode Magento le plus rapide, qui est 20 à 30 % plus rapide que le mode développeur.

Vérifiez votre mode actuel en exécutant la commande :

 bin/magento déployer:mode:afficher

Vous recevrez un message comme celui-ci :

Mode d'application actuel : {mode}. (Remarque : les variables d'environnement peuvent remplacer cette valeur.)

Si le mode actuel n'est pas production, vous pouvez passer en mode production en exécutant la commande :

 bin/magento deploy:mode:set {mode} [-s|--skip-compilation]

Conclusion

Avec toutes ces techniques, vous pouvez maintenant travailler pour rendre votre Magento plus rapide et ainsi, acquérir un meilleur avantage concurrentiel sur vos concurrents. Cependant, vous devez noter que l'optimisation des performances ne vaut pas toujours la peine d'aller jusqu'au bout, car les micro-optimisations sont la plupart du temps un effort inutile et restent imperceptibles dans le monde réel. D'après notre expérience, la meilleure stratégie consiste à identifier d'abord les problèmes qui ont un impact et à se concentrer uniquement sur eux jusqu'à ce que vous obteniez les résultats souhaités.

Pour les marchands Magento qui ont des difficultés avec les performances, chez SimiCart, nous offrons une large gamme de services, y compris l'optimisation de la vitesse pour votre entreprise. Commencez à explorer vos options dès maintenant et obtenez des performances de magasin à la pointe de l'industrie.