L'optimisation des performances de Magento expliquée

Les performances de Magento sont d'une importance primordiale. La vitesse de chargement a un impact direct et mesurable sur le taux de conversion de votre site Web, donc avoir une installation optimisée de Magento est crucial pour le succès de votre boutique Magento et peut-être même de votre entreprise en général.

Dans cet article, je vais présenter quelques façons dont les développeurs Magento peuvent optimiser leur installation Magento 2, et expliquer comment faire ce qui suit :

• Vérifier les modules tiers et trouver les goulots d'étranglement
• Activer le cache pleine page
• Vernis, pas de fichiers pour le cache pleine page
• Assurez-vous que le cache pleine page fonctionne, il peut être cassé si facilement
• Activer le mode Production
• Minification CSS/JS
• Activer les tableaux plats
• Obtenez l'hébergement le plus rapide que vous pouvez vous permettre
• Optimiser les images
• Indexeurs pour "Mettre à jour le calendrier"
• Compression GZIP
• Utilisez Elasticsearch sur les pages de catalogue et la recherche.
• Vérifiez les appels Ajax inutiles vers le serveur après le chargement de la page (peut provoquer des verrous de session)
• Redis pour le cache des pages et le stockage des sessions

Vérifier les modules tiers et trouver les goulots d'étranglement

Il existe de nombreux modules Magento tiers avec un mauvais code, utilisant des méthodes obsolètes ou ayant des problèmes de compatibilité avec la dernière version stable de Magento. La meilleure façon d'identifier les requêtes lourdes est d'utiliser un profileur. Cela vous aide à identifier le nombre de requêtes MySQL que vous avez sur une page et combien sont identiques. Sachant cela, vous pouvez compacter ces requêtes en une seule et ainsi accélérer Magento.

L'une des principales erreurs des développeurs juniors dans Magento est de charger des modèles dans des boucles. Essayez d'éviter cela autant que vous le pouvez. Chargez toute la collection avec tout ce dont vous avez besoin, puis parcourez-la en boucle. Gardez toujours à l'esprit la complexité temporelle et spatiale et construisez votre algorithme de manière optimisée.

Regardez comment votre mise en page est chargée et quels sont les blocs de modèle qui fonctionnent le plus lentement, puis examinez ce code. Examinez les métriques Model CRUD où vous pouvez trouver des données pertinentes telles que les appels de charge dans les boucles.

Cache pleine page Magento

Lorsqu'un utilisateur accède à votre boutique, une demande est faite au serveur. Cette requête est traitée par PHP en effectuant des opérations spécifiques et des requêtes de base de données, puis en renvoyant le code HTML correspondant à afficher à l'utilisateur. Le cache pleine page stocke cette réponse HTML, de sorte que la prochaine requête identique la renverra directement en sautant tout le traitement principal et les requêtes de base de données. Cela rend la réponse du site Web beaucoup plus rapide.

L'utilisation du cache pleine page dans le cadre de vos efforts d'optimisation de Magento peut considérablement augmenter la vitesse de votre site Web. Cela créera des versions en cache de vos pages et les fournira à l'utilisateur au lieu d'exécuter toutes les requêtes pour chaque requête. Bien sûr, toutes les pages ne sont pas mises en cache. Par exemple, la page du panier ne sera pas mise en cache, sinon tous les utilisateurs verront la première version mise en cache de la page. Il s'agit de pages dynamiques ou de sections de pages spécifiques à l'utilisateur et à la session.

Pour activer le cache pleine page de Magento, vous pouvez exécuter la commande CLI suivante :

php bin/magento cache:enable full_page

Pour activer les types de cache, vous pouvez exécuter la commande CLI :

php bin/magento cache:enable

Vous pouvez également le faire depuis Magento Admin en vous connectant en tant qu'administrateur :

1. Allez dans Système > Outils > Gestion du cache
2. Sélectionnez le type de cache que vous souhaitez activer
3. Dans le menu déroulant Actions , sélectionnez Activer et cliquez sur Soumettre

Utiliser le vernis pour le cache pleine page

Lorsque vous activez le cache pleine page, utilisez Varnish pour le gérer, pas les fichiers. Magento recommande fortement d'utiliser Varnish (ou Redis) en production. La mise en cache pleine page intégrée (vers le système de fichiers ou la base de données) est beaucoup plus lente que Varnish, et Varnish est conçu pour accélérer le trafic HTTP.

Vous pouvez trouver un guide complet sur l'installation et la configuration de Varnish dans la documentation officielle de Magento 2.

Pour configurer Magento afin qu'il utilise Varnish, connectez-vous à l'administrateur Magento en tant qu'administrateur :

1. Allez dans Stores > Configuration > Avancé > Système > Cache de page complète
2. Dans la liste Application de mise en cache, cliquez sur Varnish Caching
3. Entrez une valeur dans le champ TTL pour le contenu public
4. Développez Varnish Configuration et entrez les informations spécifiques sur votre configuration Varnish

Assurez-vous que le cache pleine page fonctionne : il est facilement cassé

Le cache pleine page peut être facilement cassé dans Magento 2. Par exemple, si vous souhaitez exclure un bloc du cache, n'utilisez pas l'attribut cacheable="false" dans la mise en page XML lors de la déclaration de votre bloc. Cela désactivera le cache pour toute la page qui contient ce bloc, pas seulement pour ce bloc. C'est une erreur que j'ai vu des gens faire.

Recherchez l' cacheable="false" dans vos mises en page et voyez sur quels blocs ils sont définis et sur quelles pages ces blocs sont appelés. Ainsi, vous pouvez identifier si des pages triviales ont des problèmes de cache.

Vous pouvez également tester si oui ou non votre page est mise en cache manuellement. Mettez la boutique en mode développeur sur votre environnement local ou de scène :

1. Effacer le cache de Magento
2. Charger la page dans le navigateur
3. Inspectez les en-têtes de page dans l'onglet réseau de débogage de votre navigateur.
4. Recherchez X-Magento-Cache-Debug : MISS
5. Rafraîchir la page, elle devrait changer en HIT

S'il ne change pas en HIT, cela signifie que la page n'est pas mise en cache et que le cache ne fonctionne pas.

N'oubliez pas d'activer le mode de production

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

Le mode production est destiné au déploiement sur un système de production. Ce mode masque les exceptions, sert les fichiers statiques uniquement à partir du cache et ne vous permet pas d'activer ou de désactiver les types de cache dans Magento Admin. Il empêche également la compilation automatique du fichier de code.

Pendant le travail et le développement de la boutique, le mode développeur est actif. N'oubliez pas de passer en mode production lorsque vous déployez votre site sur le serveur live !

La commande CLI pour voir le mode actuel est :

php bin/magento deploy:mode:show

La commande CLI pour passer en mode production est :

php bin/magento deploy:mode:set production

La commande CLI pour passer en mode développeur est :

php bin/magento deploy:mode:set developer

Vous pouvez trouver des informations plus détaillées sur les différents modes Magento ici.

Minification CSS/JS

La minimisation des fichiers CSS et JS est un élément important de l'optimisation de la vitesse de Magento 2. En les minifiant, nous supprimons tous les espaces, tabulations et retours à la ligne dans les fichiers. Les fichiers résultants auront moins de caractères et donc une taille plus petite, ils seront donc téléchargés plus rapidement.

Magento a cette fonctionnalité intégrée et vous pouvez activer la minification CSS/JS dans Admin. Pour activer la minification JavaScript, procédez comme suit :

1. mettre Magento en mode production
2. Allez dans Stores > Configuration > Avancé > Développeur
3. Définissez l'option Réduire les fichiers Javascript sur Oui
4. Enregistrer la configuration
5. Vider le cache sur la page Système > Gestion du cache

Pour activer la minification CSS, les étapes suivantes sont requises :

1. mettre Magento en mode production
2. Allez dans Stores > Configuration > Avancé > Développeur > Paramètres CSS
3. Définissez l'option Réduire les fichiers CSS sur Oui
4. Enregistrer la configuration
5. Vider le cache sur la page Système > Gestion du cache

Remarque : Ne fusionnez pas les fichiers JS - réduisez-les simplement .

Activer les tableaux plats

Magento utilise le modèle EAV (entity attribute value) qui stocke les attributs de ses entités dans plusieurs tables en fonction de leur type de valeur. L'utilisation de plusieurs tables, des jointures et des requêtes sur plusieurs tables sont nécessaires pour récupérer les données, ce qui peut ralentir les requêtes.

Magento a la possibilité d'utiliser des tableaux plats pour le catalogue et les produits. Les tables plates sont créées en fusionnant tous les attributs d'une entité dans une seule table. Lors de la demande des données, nous devons interroger une table, ce qui la rend beaucoup plus rapide.

Magento génère et met à jour des tableaux plats à chaque indexation. Vous pouvez activer les tableaux plats en vous connectant à Magento Admin en tant qu'administrateur :

1. Allez dans Boutiques > Configuration > Catalogue > Catalogue > Storefront
2. Sélectionnez Oui pour utiliser la catégorie de catalogue plat
3. Sélectionnez Oui pour utiliser le produit du catalogue plat
4. Enregistrer la configuration

Choisissez l'hébergement rapide Magento

Consultez les exigences minimales de Magento et voyez si votre serveur y répond. Vous pouvez voir les exigences officielles de la pile technologique Magento 2.2.x ici.

La configuration de l'hébergement est très importante pour les performances de Magento 2. Il existe également des services d'hébergement dédiés pour Magento, bien que ceux-ci puissent concerner davantage le marketing qu'autre chose.

Conclusion : Obtenez la solution d'hébergement la plus rapide que vous puissiez vous permettre, à moins qu'elle ne soit exagérée pour votre projet.

Optimisation des images Magento

La taille de vos images impacte évidemment la vitesse de votre site web. Par exemple, si vous avez une page de catalogue avec 20 produits et que chaque image de produit fait 1 Mo, cela représente un total de 20 Mo à télécharger lors du chargement de la page, ce qui peut évidemment poser problème dans certains scénarios (appareils mobiles, bande passante limitée dans certaines régions, etc.).

Vérifiez si vos images sont correctement optimisées et si elles ont un bon rapport qualité/taille. Assurez-vous également que vos images ne sont pas redimensionnées par CSS, mais que le fichier source est redimensionné à la taille spécifique dont vous avez besoin.

Une autre technique consiste à utiliser le chargement différé, ce qui signifie charger vos images après le chargement complet de la page ou pendant que l'utilisateur fait défiler le catalogue.

Vous pouvez également utiliser AWS ou un CDN pour diffuser votre contenu beaucoup plus rapidement. Jetons un coup d'œil aux différences entre AWS, CDN et l'hébergement traditionnel du point de vue de l'optimisation bitmap.

Hébergement traditionnel

La méthode traditionnelle consiste à stocker votre contenu tel que les images sur le même serveur que votre site Web. Cela peut occuper de l'espace disque et une bonne partie de votre bande passante, créant une charge de serveur substantielle. De toute évidence, la mise à l'échelle avec l'hébergement traditionnel peut être un problème.

CDN (réseau de diffusion de contenu)

Un réseau de diffusion de contenu est généralement utilisé pour réduire la charge d'un serveur en servant une partie du contenu du site Web. En plus de cela, il apporte des performances élevées en diffusant votre contenu rapidement et une haute disponibilité en utilisant plusieurs réseaux auxquels faire appel.

AWS (Amazon CloudFront)

Amazon CloudFront est un réseau de diffusion de contenu (CDN) hautement sécurisé qui fournit à la fois une protection au niveau du réseau et de l'application. Consultez ce didacticiel pour savoir comment démarrer avec AWS et diffuser du contenu plus rapidement.

De plus, vous pouvez utiliser AWS pour redimensionner les images à la volée en fonction des dimensions transmises via un paramètre de requête. Pour plus d'informations, consultez ce didacticiel sur le redimensionnement des images avec Amazon CloudFront et Lambda@Edge.

Définissez les indexeurs sur "Mise à jour programmée"

Les indexeurs Magento peuvent être réglés sur deux modes : « Mise à jour lors de l'enregistrement » ou « Mise à jour planifiée ».

Lorsqu'ils sont définis sur "Mettre à jour lors de l'enregistrement", chaque fois que vous enregistrez un produit, un attribut ou une catégorie, l'index spécifique commence à s'exécuter. Les indexeurs peuvent consommer beaucoup de ressources et cela peut ralentir votre serveur.

Le meilleur mode pour définir les indexeurs est de "Mettre à jour le calendrier". De cette façon, vous êtes sûr qu'ils sont exécutés par la tâche cron à une heure précise que vous définissez. Choisissez un moment où le trafic sur votre site Web est faible.

Vous pouvez afficher le mode actuel des indexeurs en exécutant la commande :

php bin/magento indexer:show-mode

Ou dans Magento Admin en allant sur :

Système > Gestion des index

Vous pouvez changer le mode des indexeurs en "Mise à jour planifiée" en exécutant la commande :

php bin/magento indexer:set-mode schedule

Vous pouvez changer le mode des indexeurs en "Mettre à jour lors de l'enregistrement" en exécutant la commande :

php bin/magento indexer:set-mode realtime

Et le voici dans Magento Admin :

Système > Gestion des index : sélectionnez tous les indexeurs et dans la liste déroulante Actions , sélectionnez "Mettre à jour selon la planification".

Vous configurez également les tâches planifiées en allant dans Admin pour :

Store > Paramètres > Configuration > Avancé > Système > Cron (tâches planifiées)

Développez "Options de configuration Cron pour le groupe : index"

Compression GZIP

Gzip est une méthode de compression de fichiers pour des transferts réseau plus rapides. La compression permet à votre serveur Web de fournir des fichiers de plus petite taille qui se chargent plus rapidement pour les utilisateurs de votre site Web. Cependant, cela a un coût.

Lors de la compression d'un fichier, vous chargez le processeur, et plus vous compressez un fichier, plus le processus est long. Même si cela peut augmenter la charge du processeur du serveur, cela peut également réduire considérablement l'utilisation de la bande passante. Avec gzip, vous pouvez choisir entre différents niveaux de compression, allant de 1 à 9.

Au niveau 1, vous avez le temps de compression le plus rapide, mais un taux de compression plus faible. À l'opposé, au niveau 9, vous avez le taux de compression le plus élevé mais une vitesse inférieure. La configuration par défaut de gzip utilise le niveau 6, privilégiant la compression à la vitesse. Nginx utilise cependant le niveau 1, privilégiant la vitesse à la taille du fichier.

Pour activer la compression gzip et activer le module mod_deflate d'Apache, vous pouvez l'ajouter en mettant à jour votre fichier .htaccess et en décommentant les lignes appropriées comme indiqué ci-dessous. Le module mod_deflate compresse les ressources statiques en fichiers plus petits avant de les transférer vers le navigateur.

 <IfModule mod_deflate.c> ############################################ ## enable apache served files compression ## http://developer.yahoo.com/performance/rules.html#gzip # Insert filter on all content SetOutputFilter DEFLATE # Insert filter on selected content types only AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json image/svg+xml # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule>

Utiliser Elasticsearch sur les pages de catalogue et la recherche

Une autre façon d'augmenter la vitesse de votre site Web consiste à utiliser Elasticsearch pour les pages de catalogue et les résultats de recherche. Configurez votre serveur Elasticsearch et connectez-y votre boutique Magento. La recherche devient beaucoup plus rapide en utilisant Elasticsearch.

Ce guide officiel explique comment vous pouvez configurer Magento avec Elasticsearch.

Pour configurer Magento afin qu'il utilise Elasticsearch, connectez-vous à l'administrateur Magento en tant qu'administrateur :

1. Cliquez sur Magasins > Paramètres > Configuration > Catalogue > Catalogue > Recherche dans le catalogue .
2. Dans la liste des moteurs de recherche , cliquez sur Elasticsearch ou Elasticsearch 5.0+ comme le montre la figure suivante. (L'option Elasticsearch 5.0+ n'est pas disponible pour Magento 2.1.)

Vérifier les appels Ajax inutiles

Les rappels au serveur après le chargement de la page peuvent provoquer des verrous de session. Un moyen de vérifier tous les appels Ajax effectués par votre page consiste à utiliser DevTools dans Chrome. Vous pouvez l'ouvrir en faisant un clic droit sur la page et en sélectionnant Inspecter.

Allez dans l'onglet réseau et là vous pouvez filtrer la demande par XHR. Vous pouvez maintenant voir toutes les requêtes Ajax de la page et les vérifier pour voir lesquelles d'entre elles sont nécessaires sur cette page particulière.

Redis pour le cache des pages et le stockage des sessions

Redis est une solution de cache back-end facultative pour remplacer Zend_Cache_Backend_File , qui est utilisée par défaut dans Magento 2.

Pourquoi utiliser Redis ?

L'utilisation de Redis peut avoir de multiples avantages :

• Vous pouvez remplacer memcached par Redis car il peut également être utilisé pour le stockage de session PHP.
• Redis prend en charge la sauvegarde sur disque et la réplication maître/esclave, une fonctionnalité très demandée qui n'est pas prise en charge par memcached. La réplication évite un point de défaillance unique et offre une haute disponibilité.
• Les opérations de balises ne nécessitent pas une analyse complète de chaque fichier de cache car Redis fonctionne en indexant les balises dans les fichiers.
• Le back-end prend en charge le nettoyage du cache basé sur les balises sans boucles foreach.

Il y a aussi un inconvénient principal :

• Étant donné que Redis est un magasin en mémoire, toutes vos données doivent tenir en mémoire, ce qui signifie qu'elles ne sont limitées que par la vitesse et la capacité de la RAM.

Configurer Magento pour utiliser Redis pour le stockage de session

Voici un exemple de configuration à ajouter à <your Magento install dir>app/etc/env.php :

 'session' => array ( 'save' => 'redis', 'redis' => array ( 'host' => '127.0.0.1', 'port' => '6379', 'password' => '', 'timeout' => '2.5', 'persistent_identifier' => '', 'database' => '2', 'compression_threshold' => '2048', 'compression_library' => 'gzip', 'log_level' => '1', 'max_concurrency' => '6', 'break_after_frontend' => '5', 'break_after_adminhtml' => '30', 'first_lifetime' => '600', 'bot_first_lifetime' => '60', 'bot_lifetime' => '7200', 'disable_locking' => '0', 'min_lifetime' => '60', 'max_lifetime' => '2592000' ) ),

Vous pouvez vérifier ici tous les détails sur les paramètres et comment effectuer une vérification de base que votre installation Redis fonctionne bien avec votre Magento.

Configurer Magento pour utiliser Redis pour la page et le cache par défaut

Il existe deux façons de configurer Redis pour la page et le cache par défaut. Vous pouvez modifier manuellement le fichier <Magento install dir>app/etc/env.php ou vous pouvez utiliser la ligne de commande, qui est la méthode recommandée car fournit également une validation.

Pour le cache par défaut, exécutez la commande :

php bin/magento setup:config:set --cache-backend=redis --cache-backend-redis-<parameter_name>=<parameter_value>...

Spécifiez les paramètres spécifiques à la mise en cache par défaut de Redis.

Pour le cache de pages, lancez la commande :

Php bin/magento setup:config:set --page-cache=redis --page-cache-redis-server=redis.example.com --page-cache-redis-db=1

Cette commande active la mise en cache des pages Redis, définit l'hôte sur redis.example.com et attribue le numéro de base de données à 1. Vous pouvez vérifier tous les détails sur les DevDocs Magento.

Résumé de l'optimisation des performances de Magento

Nous avons couvert plusieurs approches de l'optimisation des performances de Magento 2, alors faisons un bref récapitulatif.

L'identification et la résolution des goulots d'étranglement feront une énorme différence dans le traitement de vos données. L'utilisation du cache pleine page et de Varnish améliorera également la vitesse de votre site Web et accélérera le trafic HTTP. Vous devez toujours utiliser Magento en mode production sur votre serveur live, pas d'excuses. Utilisez la minification pour réduire la taille des fichiers CSS et JS, un fichier plus petit sera à la fois téléchargé plus rapidement et utilisera moins de bande passante.

Activez les tables plates pour réduire les demandes de base de données et améliorer le temps de réponse de la base de données. Optimisez vos images et utilisez un CDN si possible. Définissez les indexeurs pour qu'ils se mettent à jour dans les délais et activez le cron Magento. L'activation de la compression gzip réduira également la taille des fichiers à télécharger. L'utilisation d'Elasticsearch augmentera la vitesse de vos pages de catalogue et la page de résultats de recherche se chargera beaucoup plus rapidement. Utilisez Redis pour le cache de page et le stockage de session qui est nettement plus rapide que le cache mémoire par défaut.

Vous pouvez mettre en œuvre toutes ces recommandations ou seulement quelques-unes que vous n'avez pas utilisées jusqu'à présent. Même quelques-uns devraient suffire à améliorer les performances de Magento, qui devraient, espérons-le, se transformer en davantage de conversions.