Le trafic de votre boutique en ligne génère-t-il suffisamment de conversions ? Si ce n'est pas le cas, votre boutique rencontre peut-être des problèmes de performance. Amazon perd 1 % de ses 141 milliards de dollars de ventes en ligne pour chaque latence de 100 ms. La BBC risque de perdre 10 % des visiteurs de son site web pour chaque seconde supplémentaire de temps de chargement.
À mesure que votre entreprise se développe, le besoin de créer de nouvelles fonctionnalités, de personnaliser le code et d'intégrer des systèmes tiers augmente. Submergées par ces besoins croissants, les marques ignorent souvent l'impact négatif que cela peut avoir sur leur boutique : une vitesse de chargement lente du site.
Même une légère différence dans la vitesse du site peut avoir un impact considérable sur vos résultats financiers. Y remédier devrait être votre priorité absolue. La lenteur du site n'affecte pas seulement les conversions. Elle entraîne également une augmentation rapide du trafic. Selon Google, un retard de 0,5 seconde dans la vitesse du site peut entraîner une baisse de 20 % du trafic.
Les plateformes telles qu'Adobe Commerce (Magento), qui présentent des avantages tels qu'une infrastructure robuste et plusieurs fonctionnalités intégrées, posent des défis en termes de vitesse de chargement. L'optimisation continue de votre boutique avec votre partenaire de services de développement Magento est indispensable pour stimuler les ventes. Dans cet article, vous découvrirez pourquoi le temps de chargement des pages est important et quelles sont les meilleures techniques d'optimisation de la vitesse Magento pour y parvenir.
Pourquoi l'optimisation de la vitesse de Magento est-elle importante ?
La vitesse du site a un impact direct sur les facteurs qui déterminent le retour sur investissement de votre commerce électronique, tels que l'expérience utilisateur, les conversions, le taux de rebond et le référencement.
Après avoir discuté des facteurs qui soulignent l'importance de la vitesse des pages pour une entreprise de commerce électronique, penchons-nous sur les meilleures techniques d'optimisation des performances qui fonctionnent pour les propriétaires de boutiques Magento.
Meilleures pratiques d'optimisation des performances Magento
1. Mettre l'accent sur le First Meaningful Paint (FMP)
Le First Meaningful Paint (FMP) ou le chargement du contenu au-dessus de la ligne de flottaison consiste à afficher en premier la partie la plus pertinente de la page. En donnant la priorité au chargement du contenu au-dessus de la ligne de flottaison, vous affichez plus rapidement le contenu aux utilisateurs, ce qui réduit le taux de rebond.
Vous pouvez y parvenir en empêchant JavaScript de se charger au préalable. Lorsqu'une page web commence à s'afficher, le code JS s'exécute également en parallèle, ce qui augmente le temps de chargement. Pour empêcher JS de se charger simultanément, vous pouvez différer l'analyse du code à l'aide d'extensions tierces (par exemple, Defer JavaScript) et déplacer le code JS inutile vers le bas de la page. Moins il y a de code JS à traiter, plus la vitesse de chargement de la page est rapide.
2. Optimisation du code
Vous personnalisez le code en fonction de vos besoins, par exemple pour créer de nouvelles fonctionnalités et improviser des extensions et des thèmes. Tout code obsolète ou inutile dans la personnalisation peut entraîner des problèmes de performances et ralentir les performances de votre boutique.
Inscrivez-vous aux services gérés dédiés Magento pour effectuer des audits de code, identifier les goulots d'étranglement, et examiner et refactoriser le code afin d'améliorer l'efficacité.
3. Optimisation de la recherche
Un système de recherche de produits réactif qui fournit des résultats pertinents pour les requêtes peut améliorer l'expérience utilisateur. Les boutiques qui possèdent des milliers de catalogues de produits et d'attributs peuvent rencontrer des problèmes d'indexation, ce qui entraîne des retards dans la découverte des produits.
Pour accélérer la fonctionnalité de recherche, configurez les meilleures pratiques d'indexation de recherche de Magento afin d'optimiser les indexeurs destinés au prix, au produit, à l'attribut de catégorie, etc.
Effet des indexeurs sur les performances de votre boutique :
Les indexeurs peuvent ralentir votre boutique en consommant les ressources du serveur lors de l'indexation des produits que vous ajoutez à votre portefeuille. Deux modes sont disponibles pour les indexeurs Magento : « Mise à jour lors de l'enregistrement » et « Mise à jour selon le calendrier ».
Si vous activez « Mise à jour lors de l'enregistrement », les indexeurs s'exécuteront chaque fois que vous enregistrerez un produit, une catégorie ou un attribut. La meilleure option, en particulier si vous élargissez fréquemment votre portefeuille de produits, est « Mise à jour selon le calendrier ». Grâce à cet indexeur, vous pouvez programmer le moment où les produits et les informations connexes doivent être indexés. Il est recommandé de définir la t âche cron pour l'indexation pendant les périodes de faible trafic.
Pour connaître le mode d'indexation actuel de votre boutique, utilisez la commande suivante :
php bin/magento indexer:show-mode- Vous pouvez également vous rendre dans Système > Gestion des index dans votre panneau d'administration.
- Modifiez le mode en « Mise à jour programmée » à l'aide de la commande :
PHP bin/magento indexer:set-mode schedule
Vous pouvez également sélectionner tous les indexeurs et activer « Mise à jour selon le calendrier » en :
- Sélectionner Système > Gestion des index : liste déroulante « Actions »
Pour planifier la tâche cron pour l'indexeur « Mise à jour selon le calendrier » :
- Boutique > Paramètres > Configuration > Avancé > Système > Cron (tâches planifiées)
4. Elasticsearch
Elasticsearch est un moteur de recherche open source qui génère plus rapidement des résultats de recherche précis et pertinents. Basé sur Apache Lucene, une bibliothèque de recherche (open source), le moteur de recherche et d'analyse suggère automatiquement des mots-clés et complète les requêtes de recherche.
La recherche contextuelle permet au moteur de recherche de ne rechercher que les résultats pertinents au lieu de rechercher dans l'ensemble de la base de données. Ainsi, en réduisant la recherche, les résultats sont générés plus rapidement.
Pour les requêtes de recherche connexes, le moteur de recherche génère des produits, des images, des prix, etc., ce qui permet d'affiner la recherche et, au final, d'accélérer le processus de découverte des produits pour les utilisateurs.
Si votre boutique fonctionne sous Magento 2.4.x ou une version ultérieure, Elasticsearch sera activé par défaut. Si vous utilisez une version antérieure, vous pouvez l'activer en suivant ces étapes :
- Allez dans - Boutiques > Paramètres > Configuration.
- Allez dans Catalogue > Catalogue > Recherche dans le catalogue.
- Dans le menu déroulant Moteur de recherche, cliquez sur Elasticsearch.
- Cliquez sur « Enregistrer la configuration ».
5. Optimisez le temps de réponse (TTFB)
Le temps de réponse est le temps nécessaire à un serveur pour envoyer le premier octet d'informations après avoir reçu une requête (utilisateur) d'une application web. En d'autres termes, il s'agit du délai entre la requête du navigateur et le temps de réponse du serveur pour envoyer le premier octet.
L'optimisation du TTFB est importante pour les pages dynamiques telles que le panier et la caisse. Des facteurs tels qu'un code non optimisé, une mauvaise configuration du serveur web, une base de données lente, le routage, etc. augmentent le TTFB.
Le TTFB recommandé par Google est de 800 ms ou 0,8 seconde maximum. Vous pouvez optimiser le TTFB en configurant la mise en cache et le serveur web, en effectuant des audits d'extension et en refactorisant le code.
6. Compression GZip
La compression GZip est un excellent moyen de compresser les fichiers rendus lors du chargement d'une page. Activez la compression GZip pour votre boutique. En configurant GZip, vous pouvez compresser des fichiers tels que CSS, JavaScript, polices, etc. Cela réduit le temps nécessaire au serveur pour télécharger les
, ce qui améliore les performances.
Activation de la compression GZip
7. Minification des fichiers CSS, JS et HTML
Magento offre une fonctionnalité intégrée permettant de minifier les fichiers CSS et JavaScript. L'optimisation des fichiers CSS et JS accélère le chargement des pages en réduisant de plus de 25 fois le nombre de requêtes envoyées au serveur. Pour activer la fonctionnalité intégrée :
Passez le magasin en mode production (la minification ne fonctionne qu'en mode production)
- Allez dans - Boutiques > Configuration > Avancé > Développeur et activez la modification.
- Sélectionnez l'option « Oui » sous la fonctionnalité Minifier les fichiers JavaScript
- Cliquez sur « Enregistrer la configuration ».
- Allez dans Système > Gestion du cache et choisissez Vider le cache
Source - Magento
8. Optimisation des images
Les images font partie intégrante du commerce électronique, mais leur optimisation est indispensable pour améliorer les performances de votre boutique. Vous pouvez utiliser des extensions Magento tierces pour réduire la taille des fichiers sans compromettre leur qualité.
Utilisez des techniques d'optimisation des images telles que le chargement différé, qui charge les images après le chargement complet de la page. Vous pouvez également utiliser AWS ou un CDN pour diffuser votre contenu plus rapidement.
Parmi les autres conseils d'optimisation des images, citons le fait d'éviter les images trop volumineuses et d'utiliser des formats d'image avancés tels que Adopt WebP et JPEG 2000, qui permettent d'obtenir des fichiers de taille réduite sans compromettre la qualité.
9. Regroupement JS avancé
Si le regroupement JS réduit le nombre de requêtes HTTP envoyées au serveur, il charge tous les paquets JS lors du chargement d'une page. Le regroupement JS avancé pallie cette lacune en limitant la nécessité de charger tous les paquets JS lorsqu'une requête de chargement de page est envoyée à un serveur.
Chaque page de votre boutique, qu'il s'agisse d'une page PDP ou PLP, ne nécessite que le chargement d'un ensemble spécifique de paquets JS. Grâce au regroupement JS avancé, vous pouvez définir des paquets en fonction du type de page, comme les pages de paiement, les pages CMS, les pages de détails des produits, les catégories, etc.
Source - Magento
10. Auditer les extensions tierces
L'audit de vos extensions Magento tierces est un exercice important pour déterminer si elles causent des problèmes de vitesse pour votre boutique.
Pour effectuer l'audit, choisissez une extension tierce et désactivez-la. Videz le cache et effectuez un test de vitesse sur des pages telles que la page d'accueil, la page de paiement, le panier, la page de détail du produit et les pages de catégorie. Recherchez les changements dans les performances de votre boutique. Si vous constatez un impact positif sur la vitesse, vous avez localisé l'extension.
Répétez cette procédure pour toutes les extensions tierces afin de voir si elles ont un impact sur les performances. Contactez le fournisseur concerné, signalez les problèmes et demandez une correction.
11. Tirez parti des catalogues plats
Si votre boutique Magento présente un volume important de catalogues, l'activation des catalogues plats devient une pratique utile pour optimiser les performances.
Magento stocke les données et les attributs des produits à l'aide d'un modèle EAV (Entity Attribute Value). EAV est un modèle de données que Magento utilise pour désigner des entités. Ce modèle vous permet d'ajouter des entités ainsi que les attributs qui les décrivent. Dans ce modèle, une entité contient des données telles que des produits, des catégories, des clients et des commandes. Les attributs sont des données liées à une entité, telles que le nom, le prix, etc.
Le modèle EAV permet à la plateforme de stocker les données de manière organisée et de conserver de manière concise toutes les données pertinentes.
Les attributs de chaque entité sont stockés dans différents tableaux en fonction du type de valeur. Les requêtes sont envoyées à plusieurs tableaux pour récupérer les données lorsque des informations sur les produits sont nécessaires. Cela ralentit le temps de réponse aux requêtes.
L'option « Flat Tables » (Tables plates) de Magento fusionne plusieurs attributs d'une entité dans une seule table (table plate). Ainsi, pour afficher les informations sur les produits, une seule table est interrogée, ce qui accélère la réponse.
Lors de l'indexation, Magento génère et met à jour des tables plates. Activez cette option en suivant les étapes suivantes :
- Allez dans Boutiques > Configuration > Catalogue > Catalogue > Vitrine
- Sous « Utiliser la catégorie de catalogue plat », sélectionnez « Oui ».
- Sous « Utiliser le catalogue plat produit », sélectionnez « Oui ».
- Cliquez sur « Enregistrer la configuration ».
Source : Magento
12. Intégrer le CDN
Grâce au CDN (réseau de diffusion de contenu), vous pouvez réduire considérablement le temps de réponse. Un CDN met en cache les éléments dynamiques de votre boutique, tels que les CSS, JavaScript, images, vidéos et polices, et les affiche, minimisant ainsi la charge sur les serveurs.
Le CDN garantit une haute disponibilité en utilisant plusieurs réseaux de diffusion pour afficher le contenu statique de votre boutique Magento. Pour implémenter le CDN dans votre boutique Magento :
- Allez dans Boutique > Configuration > « Général ».
- Sélectionnez l'onglet « Web » sous « Général »
- Choisissez les URL de base
- Dans le champ « URL de base pour les fichiers d'affichage statiques », indiquez l'emplacement du CDN où les fichiers statiques sont stockés.
- Dans le champ « URL de base pour les fichiers multimédias utilisateur », indiquez l'emplacement CDN des fichiers JavaScript.
- Cliquez sur « Enregistrer la configuration ».
Source - Magento
13. Effacer les journaux de la base de données
Magento génère des journaux pour suivre les actions effectuées (par exemple, les produits consultés). Au fil du temps, ces journaux s'accumulent dans la base de données, ce qui ralentit la réponse. Le nettoyage de la base de données permet d'effacer les journaux, ce qui améliore les performances et la latence du site.
- Allez dans > Boutiques > Configuration
- Cliquez sur l'option « Avancé ».
- Une fois l'onglet développé, sélectionnez l'onglet « Système » et ouvrez « Nettoyage de la file d'attente des messages MySQL ».
- Dans le champ « Nettoyage de la file d'attente des messages MySQL », définissez le délai de déclenchement du nettoyage automatique des journaux.
- Cliquez sur « Enregistrer la configuration ».
Source - Magento
14. En-têtes d'expiration et blocage du rendu
Les en-têtes d'expiration indiquent à Magento 2 pendant combien de temps il doit mettre en cache le contenu statique de votre boutique. En configurant les en-têtes d'expiration, vous pouvez éviter que le navigateur interroge le serveur pour afficher les parties inchangées d'une page. Vous pouvez ajouter des en-têtes d'expiration dans les fichiers de configuration sur des serveurs tels qu'Apache ou Nginx.
Le blocage du rendu donne la priorité au CSS par rapport au JavaScript lors du chargement d'une page, ce qui accélère le rendu du contenu visible.
15. Cache Varnish
Le cache Varnish est une technique de mise en cache pour Magento 2 qui sert de proxy pour les serveurs web. Lorsqu'un client (navigateur) envoie une requête à un serveur pour charger une page web, le serveur traite les fichiers CSS, HTML, JavaScript et les images nécessaires.
Le cache Varnish crée un stockage temporaire pour ces éléments. Lorsque des requêtes suivantes sont reçues, le cache Varnish affiche les ressources mises en cache au client, réduisant ainsi considérablement les requêtes sur le serveur. Cela améliore le temps de réponse et facilite un chargement plus rapide.
16. Cache Redis
Le cache Redis joue un rôle essentiel dans la mise en cache de la base de données et la mise en cache du stockage de session. Pour les sites web comportant des pages plus dynamiques, la mise en cache de la base de données permet de réduire la charge du serveur.
Le stockage de session capture des données telles que les informations de profil, les recommandations, les remises, etc. depuis la connexion jusqu'à la déconnexion de l'utilisateur.
Redis, qui est un système de mise en cache en mémoire, peut être utilisé pour mettre en cache les deux. Grâce à son mécanisme d'éviction, le cache Redic vous permet de supprimer des données afin de libérer de l'espace pour une nouvelle mise en cache à travers 6 scénarios d'éviction.
17. Passez en mode production
Assurez-vous que votre boutique Magento fonctionne en mode « Production ». Le mode Production est optimisé pour offrir les meilleures performances. Vous pouvez configurer votre boutique en mode Production à l'aide de la commande suivante : bin/magento deploy:mode:set production
18. Mises à niveau de version
Mettez à niveau votre boutique Magento pour profiter de toutes les améliorations de sa dernière version. Magento propose régulièrement des mises à niveau visant à améliorer les aspects techniques globaux du système et à corriger les lacunes des versions précédentes, en mettant l'accent sur la sécurité et les performances.
Maintenir votre boutique Magento à jour peut vous aider à tirer parti des améliorations en termes de performances. Vous pouvez demander l'aide de votre agence de développement Magento / Adobe Commerce pour mettre à niveau votre boutique.
19. PWA
Les applications web progressives offrent aux clients une expérience similaire à celle d'une application mobile. Les PWA visent à améliorer les performances des applications web sur mobile, ce qui non seulement améliore l'expérience client et les conversions, mais permet également d'obtenir un meilleur classement SEO. En offrant une expérience similaire à celle d'une application mobile, les PWA éliminent la nécessité de télécharger l'application mobile de votre boutique ou le coût de création d'une application mobile.
En tant que boutique fonctionnant sur Magento, vous pouvez tirer parti de PWA Studio, le SDK de Magento, pour créer des applications web progressives.
Résumé
La vitesse est importante. Point final. Le fait est que vos mois de développement et vos années d'efforts marketing ne porteront leurs fruits que si votre site est suffisamment rapide pour fournir son contenu. En plus de donner une excellente première impression, une meilleure vitesse de site fidélise les clients et peut également être un facteur de différenciation par rapport à vos concurrents.
Faites de l'optimisation des performances de Magento votre priorité absolue. Suivez les techniques d'optimisation de la vitesse du site Magento que nous avons évoquées ci-dessus. Faites appel à une agence partenaire officielle de Magento qui possède une expérience pratique dans l'optimisation des performances.
Comme bon nombre de ces stratégies impliquent l'optimisation des serveurs, choisir un partenaire expert dans la fourniture d'environnements serveurs spécifiques à certaines plateformes, comme Upsun, peut vous garantir des performances optimales adaptées aux besoins uniques de votre boutique Magento.
