Comment réduire efficacement les performances de Magento 2 grâce au frontend ?

Comme bon nombre de blogs vous proposent d’améliorer les performances de Magento 2, j’ai décidé de faire un petit tuto pour vous permettre grâce à des actions ciblées de réduire les performances de n’importe quelle installation de Magento 2. Comme la réussite d’un projet pareil nécessite des efforts concentrés. Les recommandations vont se diviser en trois articles : frontend et backend puis management.

Les recettes sont valables pour tous les projets web et pas seulement Magento 2.

Pourquoi commencer par le frontend ? Tout simplement par ce que c’est le plus visible et aussi parce que c’est l’unique chose que voient la plupart des chefs de projet. Nombre de sites gratuits permettent de jauger les performances en ligne et heureusement, le TTFB (Time To First Byte – Temps avant le premier octet) y est largement minimisé pour se concentrer sur les images et les ressources externes.

Pour réduire les performances dans Magento 2 grâce au frontend, les efforts doivent se faire sur plusieurs fronts (vous avez vu le jeu de mots). En voici une liste non-exhaustive.

Cet article satirique va se concentrer sur les mauvaises pratiques. Si vous êtes intéressés par les bonnes pratiques pour le frontend sur Magento 2, il y a la doc. A éviter si vous voulez réussir votre ratage.

Multiplier les bibliothèques javascript

Vous avez besoin d’une fonctionnalité obscure qui n’est disponible que dans une bibliothèque inconnue et maintenue par une seule personne du fin fond du Népal. N’hésitez pas.

Dans Magento 2, KnockOut et quelques autres bibliothèques sont fournies mais n’hésitez pas à ajouter Angular, React… Si vous le faites, il faut surtout ne pas oublier de charger la bibliothèque sur toutes les pages. Cela, même si la bibliothèque n’est utilisée que sur une page accessible seulement aux utilisateurs connectés. Ne perdez surtout pas une journée ou deux à essayer de comprendre les bibliothèques disponibles. Le confort de l’usager passe bien loin derrière votre confort à vous.

Enfin, n’hésitez pas à charger une ou deux bibliothèques inutiles dans le tunnel de commande afin de décourager les clients les plus tenaces qui auront eu le courage d’y arriver.

Il est important de préférer les bibliothèques distantes car cela permet d’augmenter un peu le temps de chargement de la page. Avec un peu de chance, le CDN du fournisseur ne fonctionne pas et votre site ne fonctionne plus pendant quelques minutes. Cela permet quand même d’économiser quelques octets de stockage pour y mettre des images ou des vidéos.

Choisir des images produits spécialement lourdes

Le marketing vous dit que l’image doit s’afficher directement dans la meilleure qualité même sur mobile. Ils ont raison et il est de votre ressort d’éviter d’utiliser le mécanisme de base de Magento 2 qui permet de générer différentes tailles d’image. Le lazyload, comme son nom l’indique est une fonctionnalité de fainéant. Evitez à tout prix afin de ne pas passer pour un tire-au-flanc.

Ne critiquez pas la personne qui vous dit de faire ça car c’est grâce à elle que vous avez du travail en permanence. Dans ce cas précis, elle reviendra dans trois mois après avoir été sur un scanner de performances de sites qui lui dira la même chose que vous grâce à l’IA (quelques if imbriqués). Tout vient à point à qui sait attendre. Une confrontation au travail fait vieillir alors qu’il est plus simple de laisser les gens se contredire tous seuls.

La quintessence en terme de media est tout de même la vidéo qui se lance seule et qui se loge au bas de l’écran quand la personne se met à scroller. Le gain en terme d’UX est indéniable et cela consomme allègrement la bande passante de votre potentiel client.

Avoir un maximum de requêtes en AJAX

Vous devez charger une douzaine de produits pour un carrousel ? Ne faites surtout pas un seul appel qui renverrai tous les produits et préférez une boucle for qui fait appel à un contrôleur qui renverra les produits un par un. On pourrait être tenter de renvoyer les attributs un par un mais il ne faut pas pousser non plus. Ca va finir par se voir.

Il en est de même pour le panier. Oubliez la gestion de session côté client de magento qui met à jour les données automatiquement. Préférez quelques appels bien sentis à un contrôleur qui chargent une bonne dizaine de dépendances pour vérifier que la session est bien valide. Une fois la session validée, il peut être nécessaire de recalculer les taxes et le total du panier.

Afin d’être sûr que vos requêtes AJAX soient exécutées le plus souvent possible, une instruction magique est à ajouter dans n’importe quel layout : cachable=false. Cela vous permet d’éviter que le bloc soit mis en cache et c’est vraiment du temps de perdu à chaque chargement.

Augmenter la complexité de toutes vos fonctions

Un seul parcours de tableau est nécessaire pour trier des éléments dans deux autres grâce à une stupide condition. Ne faites pas cela. Il vaut mieux faire deux parcours de tableau pour trier les objets puis un troisième pour s’assurer qu’un élément qui est dans le premier, n’est pas dans le second.

Avec l’expérience et le talent, vous acquerrez les automatismes qui vous permettront de faire de n’importe quelle fonction un gouffre à performance sur n’importe quel téléphone de pauvre. A ce sujet, n’hésitez pas à ne tester votre site que sur votre dernier iPhone en WiFi, votre site est pour l’élite.

Choisissez un navigateur et ne testez que sur celui-ci

Vous avez choisi le navigateur en fonction du logo et vous avez raison. Votre site ne doit être visité qu’en utilisant celui-ci. Attention si l’entreprise fait appel à un contrôle qualité pour les sites qu’elle livre. D’autres navigateurs et résolutions d’écran pourraient être testés et vous seriez en faute. Cela dit, vous devriez être plutôt à l’abri de ce côté car qui dit test dit coût du testeur. Votre employeur a sans doute d’autre chose à faire du peu d’argent qu’il gagne à cause des performances exécrables de son site. Mais comme expliqué dans le propos liminaire, il y aura une partie concernant la gestion de projet et le management.

Voir aussi : réduire les peformances de Magento 2 grâce au backend