5 façons d'améliorer la vitesse mobile de Magento 2

Ceci est un article de blog invité par Konstantin Gerasimov. Konstantin est un développeur certifié Magento avec Goivvy.com. Il est spécialisé dans l'optimisation des performances et le développement backend.

Magento 2 (M2) est une plate-forme de commerce électronique complexe et riche en fonctionnalités. On peut l'utiliser pour mettre en œuvre tout type d'expérience de vente en ligne.

Le revers de la médaille est que la flexibilité s'accompagne d'un problème : des performances médiocres. Un magasin alimenté par Magento-2 peut être lent, en particulier sur les appareils mobiles où la capacité du réseau rend difficile le téléchargement de gros fichiers.

Au cours de mon travail avec M2, j'ai acquis quelques astuces qui m'ont aidé à améliorer la vitesse mobile. Je vais les partager avec vous. Ils sont tous éprouvés sur le terrain, vous pouvez donc être sûr qu'ils fonctionnent.

5 conseils pour accélérer Magento 2 pour les utilisateurs mobiles

1. Chargez d'abord le contenu au-dessus de la ligne de flottaison.
2. Faites en sorte que la taille de la page soit la plus petite possible.
3. Utilisez HTTP/2.
4. N'utilisez pas le regroupement JS.
5. Optimisez le temps jusqu'au premier octet.

1. Chargez d'abord le contenu au-dessus du pli

Le contenu au-dessus de la ligne de flottaison (ou contenu visible) fait partie d'une page Web que vous voyez avant de faire défiler vers le bas. Les utilisateurs le voient en premier, il est donc important de le charger et de le rendre rapidement.

Comment fait-on cela? Il existe plusieurs techniques :

1.1. Différer l'analyse de Javascript

Cela signifie essentiellement que vous reportez le chargement et l'exécution du code JS. Ceci est fait pour que le contenu apparaisse plus rapidement à l'écran.

Pour différer, déplacez simplement tout le Javascript en bas d'une page. Il existe certaines extensions Magento 2 qui vous aideraient à le faire.

1.2. Charger d'abord le CSS critique

Critical CSS est un ensemble de feuilles de style utilisées pour rendre le contenu au-dessus de la ligne de flottaison. Habituellement, il ne s'agit que d'une petite partie du CSS du site. Il serait préférable de l'isoler et de le charger en premier. Cela rendrait le contenu visible rendu plus rapidement.

Il existe des outils en ligne censés extraire automatiquement le CSS critique. J'ai essayé la plupart d'entre eux, et ils ne semblent pas être précis d'après mon expérience.

Je recommande de composer manuellement un ensemble CSS critique pour différentes pages : page d'accueil, catégorie, produit, panier, pages de paiement . Vous pouvez ensuite l'intégrer directement dans la section d'en-tête de la page.

2. Faites en sorte que la taille de la page soit la plus petite possible

Les réseaux mobiles offrent une vitesse de téléchargement inférieure à celle des connexions haut débit de bureau.

Qu'est-ce que cela signifie pour nous? Cela signifie que le poids de la page est maintenant un facteur de performance plus important. Plus la taille de la page est grande, plus la vitesse mobile de Magento 2 est lente.

Comment alléger une page ? Je vais vous donner trois façons de le faire :

2.1. Utiliser la compression Gzip

Gzip est une technologie spéciale qui vous permet de réduire la taille d'une page jusqu'à 70 % ! Il peut également compresser des scripts externes tels que CSS, Javascript, des scripts de police, etc.

Contactez votre équipe de support d'hébergement et demandez-leur d'activer Gzip pour votre site Web. Cela ne devrait pas prendre longtemps car il ne s'agit que d'un petit changement de configuration.

Vous pouvez utiliser l'outil en ligne Google PageSpeed ​​Insights pour vérifier si Gzip est activé pour votre boutique.

2.2. Utiliser la minification CSS/JS

Magento 2 (contrairement à Magento 1) est livré avec une fonctionnalité de minification JS/CSS. Vous devriez en profiter pour réduire le poids de la page.

Accédez au menu principal Stores > Configuration > Avancé > Développeur (sur M2.2+, ce menu n'est visible qu'en mode développeur) et activez la minification :

Une chose à retenir - la minification ne fonctionne qu'en mode production .

Vous pourriez demander - quels sont ces modes?

Magento 2 a trois modes de fonctionnement : par défaut, développeur et production . La production est la plus rapide.

Pour passer d'un mode à l'autre, vous devez exécuter la commande suivante dans le terminal SSH dans le dossier racine de Magento (par exemple, définissons le mode de production) :

 php bin/magento deploy:mode:set production

Pour connaître le mode en cours :

 php bin/magento deploy:mode:show

2.3. Optimiser les images

Si vous exploitez un site Web de commerce électronique, vous avez certainement beaucoup d'images de produits. Il est important de les garder optimisés et compressés pour avoir le poids de page le plus bas possible.

Il existe divers outils en ligne qui pourraient vous aider à compresser vos images. La plupart des CDN (réseaux de diffusion de contenu) prennent en charge l'optimisation des images. Si cela ne vous dérange pas de dépenser quelques $$$, je vous recommande de vous inscrire avec l'un d'eux.

Si vous avez un budget limité, essayez le module de serveur pagespeed de Google. Il compresse les images à la volée. De plus, il fait d'autres astuces d'optimisation de la vitesse. Vous voudrez peut-être demander à votre administrateur système ou à votre équipe de support d'hébergement de vous aider à configurer l'extension pagespeed.

3. Utilisez la puissance de HTTP/2

HTTP ver.2 est la prochaine génération de protocole hypertexte. Il est destiné à rendre la navigation Web sécurisée et plus rapide. Pour en savoir plus sur ses avantages en termes de performances, cliquez ici.

Magento 2 peut fonctionner avec HTTP/2 prêt à l'emploi. Il n'y a que deux exigences :

1. Toutes les pages doivent être servies via SSL.
2. Le serveur doit prendre en charge HTTP/2.

Vous voudrez peut-être vous référer à votre équipe de support d'hébergement pour obtenir de l'aide pour le configurer.

Une autre chose - le serveur pousse . Il s'agit d'une fonctionnalité spéciale de HTTP/2 qui vous permet de créer des ressources de téléchargement de navigateur avant même qu'elles ne soient nécessaires. Il accélère énormément la navigation sur le Web. Certaines extensions introduisent la poussée du serveur vers M2 - il suffit de google pour trouver celle qui vous convient le mieux.

4. N'utilisez pas le regroupement JS

Magento 2 peut regrouper des fichiers JavaScript.

Cela signifie qu'il peut regrouper des ressources JS pour réduire le nombre de requêtes HTTP qu'un navigateur doit effectuer pour afficher une page. Vous trouvez sa page de configuration dans le menu principal Stores > Configuration > Avancé > Développeur :

Bien sûr, cela n'a aucun sens si vous utilisez HTTP/2. Le nombre de requêtes http n'affecte pas les performances dans ce cas. Mais vous ne devez pas activer le regroupement JS même si vous utilisez toujours http/1 et je vais vous expliquer pourquoi.

L'implémentation de regroupement de Magento 2 compose tout le JavaScript dans un seul fichier. Même si vous n'utilisez pas certaines parties, il est toujours là. Cela vous laisse avec un fichier de 5 Mo à 13 Mo qui est un porc de performance sur les réseaux mobiles lents.

Voici un rapport de bogue l'expliquant en détail. C'est un bogue mais M2.2.2 est là et il n'est toujours pas corrigé. Donc, vous feriez mieux de garder le regroupement JS désactivé .

5. Optimiser le temps jusqu'au premier octet (TTFB)

Le TTFB ou temps de réponse du serveur est le temps qu'un navigateur doit attendre avant d'obtenir une réponse du serveur d'un site. Le bon temps jusqu'au premier octet devrait être d'environ 500 ms.

Magento 2 dispose d'une fonctionnalité de cache de page complète intégrée, de sorte que tant qu'une page est visitée plus d'une fois, le temps de réponse de son serveur doit être correct. Mais il existe des pages telles que les pages de paiement, de panier et d'espace client qui ne peuvent pas être mises en cache en pleine page. S'ils sont lents, il faut envisager de faire une optimisation TTFB.

Je vais vous montrer trois façons d'optimiser le temps de réponse du serveur :

5.1. Audit des modules tiers

La raison numéro un des mauvaises performances de Magento 2 est un nombre excessif d' extensions personnalisées utilisées. Je vais vous expliquer pourquoi.

Les fichiers de base M2 sont codés par des experts en programmation. Il y a peu ou pas de place à l'amélioration et c'est pourquoi une nouvelle installation M2 avec le thème Luma est assez rapide. D'autre part, certains modules tiers sont écrits au maximum par des programmeurs moyens sans aucune appréciation des performances. Ils pourraient ralentir considérablement le magasin.

Pour effectuer un audit des modules tiers, obtenez d'abord une liste de toutes les extensions personnalisées installées. Vous pouvez le faire en exécutant cette commande SSH :

 modules php bin/magento:état

Ignorez ceux qui commencent par Magento_ - ce sont des plugins de base.

Avec d'autres, procédez comme suit : supprimez-les un par un et évaluez la vitesse des sites. Pour supprimer une extension, supprimez-la simplement du dossier app/code , puis exécutez :

 configuration de php bin/magento : mise à niveauUne fois que vous avez trouvé un plugin lent, contactez son fournisseur et informez-le du problème. Demandez un correctif ou trouvez une extension alternative.
 5.2 Mise à niveau du plan d'hébergement
 Dans certains cas, la puissance du serveur d'hébergement n'est tout simplement pas suffisante pour exécuter un magasin Magento 2 complexe. Vous auriez alors besoin de plus de CPU et de RAM.
 Comment savoir si votre serveur est OK ? Effectuez ce test simple : installez une nouvelle copie de M2 ​​de la même version sur le même serveur. Comparez sa vitesse à votre site en direct. Si le nouveau M2 est nettement plus rapide, votre plan d'hébergement est correct et le problème réside dans le site en direct lui-même. Si la nouvelle copie fonctionne aussi lentement que le site en ligne, il est temps de mettre à niveau un serveur d'hébergement.
 5.3 Exécuter le profileur Magento 2
 Si vous souhaitez plonger plus profondément dans les composants internes de Magento 2 et déterminer la cause première d'un mauvais TTFB, vous pouvez utiliser un profileur. Un profileur est un programme spécial qui vous indique quels blocs de code prennent quel temps pour être exécutés.
 Le profileur natif de Magento 2 peut être désactivé en ajoutant la ligne suivante en haut du fichier pub/index.php :
 $_SERVER['MAGE_PROFILER'] = '1';
 Vous verrez alors une trace en bas de chaque page : 
 Recherchez les blocs de code avec les valeurs temporelles les plus élevées et inspectez-les.
 Il existe d'autres profils que vous pouvez utiliser. Je trouve que xhprof est le meilleur parmi les gratuits.
 Conclusion
 Ainsi, comme vous pouvez le constater, il existe des moyens efficaces d'améliorer les performances de Magento 2 sur les appareils mobiles.
 Si vous connaissez des moyens supplémentaires de le faire, n'hésitez pas à les partager dans la section des commentaires ci-dessous.