Web Performance - Vitesse de chargement- Magento - Techniques d'optimisation et pièges à éviter

Vous avez choisi Magento pour votre E-commerce, mais est-ce un CMS performant ? Comment améliorer la vitesse de votre E-commerce Magento ? Comment optimiser votre JavaScript, vos images, vos CSS et vos fonts ? Quels sont les avantages et les limites du système de cache de Magento ?
Parmi les plugins phares : que choisir entre Amasty, Magepack et Fasterize ? Nous vous dévoilons toutes les clés pour améliorer vos performances avec Magento dans un livre blanc, avec la participation de Quanta. Découvrez notre mine d’or, creusez les fonctionnalités offertes par ce CMS, et déjouez les pièges de Magento !


Téléchargez le livre blanc

Optimiser JavaScript avec Magento

Le saviez-vous ? Les JavaScripts sont les deuxièmes responsables du poids des pages web, juste derrière les images. Bien qu’ils ajoutent de la valeur à votre site web, ils peuvent augmenter le temps de chargement de votre site, et surtout dégrader l’interactivité. Cela nuit inévitablement à l’expérience de vos utilisateurs et donc à vos taux de conversion. En effet, 70% des visiteurs poursuivent leur parcours sur un autre site, en boutique, ou finissent par ne rien acheter si un site est trop lent !

JavaScript constitue aussi un risque pour les utilisateurs de mobiles d’entrée de gamme, qui peuvent alors subir une attente trop longue pour que les pages se chargent - et ces utilisateurs de mobiles d’entrée de gamme peuvent représenter une part importante de votre audience. Ne les laissez pas de côté ! 

Offrez à tous vos clients une expérience qui leur donne envie d’aller au bout du tunnel d’achat quelles que soient leurs conditions de navigation. 

Tirez le meilleur parti de JavaScript avec Magento pour une vitesse de chargement et des scores PageSpeed et Lighthouse optimaux : découvrez comment paramétrer correctement votre CMS, les scripts à activer ou désactiver, et les modules d’optimisation les plus performants tels que l’extension de Fasterize.

Optimiser les images avec Magento 

Les images représentent en moyenne 50 % du poids des pages web. Pour améliorer la vitesse de votre site, vous devez les rendre les plus légères possible, tout en préservant leur qualité visuelle, ce qui est indispensable pour valoriser votre catalogue produits. 

Vous utilisez peut-être déjà des plugins ou des outils pour optimiser vos images, mais nous allons vous montrer comment vous pouvez encore améliorer vos scores de performance et votre vitesse, et optimiser l’affichage de vos pages avec des images compressées efficacement et automatiquement. 

Notez que d’après nos études, le trafic mobile représente en moyenne 64% sur les sites Magento. Alors, pensez à vos utilisateurs mobiles, et facilitez votre travail d’optimisation des images à la volée pour tous les devices avec les outils adaptés.

On vous explique en détails comment compresser les images aux formats nouvelle génération (WebP, ou encore AVIF) comme le recommande Google dans ses audits PageSpeed Insights et Lighthouse ; et comment adapter automatiquement l’affichage et le chargement de vos images aux devices de vos utilisateurs avec Magento, avec des techniques telles que le lazyload, l’inlining ou le Progressive JPEG. 

Optimiser le CSS avec Magento

Les optimisations proposées par Magento (minification et fusion) ont le mérite d’exister, mais elles ont leurs limites. Pas de panique, il est possible de les dépasser ! Nos experts vous guident pour optimiser et compresser vos fichiers CSS aux formats les plus performants (Gzip / Brotli), et les méthodes efficaces pour supprimer les CSS inutilisés.

Optimiser les fonts avec Magento

Optimisez vos polices de caractères ! Comment ? Magento propose une fonctionnalité : le preload des fonts. Mais vous allez voir qu’il y a d’autres techniques bien plus adaptées pour booster la vitesse d’affichage de vos pages et pour améliorer réellement vos performances. Découvrez comment tirer parti de la propriété font-display, et réduisez jusqu’à 80% le poids des fichiers fonts sans effort.

Optimiser le cache Magento

Magento vous permet d’activer un système de cache pour améliorer la vitesse d’affichage de votre E-commerce, que vous pouvez pousser encore plus loin ! Vous allez voir avec quelles techniques améliorer significativement votre Time To First Byte (TTFB, un indicateur qui compte aussi bien pour votre performance web que pour votre SEO), et comment déployer facilement un système de cache intelligent et efficace, même si vos pages sont dynamiques.

Le CDN

Le Content Delivery Network (CDN) est une bonne pratique essentielle pour la performance de votre site web. Il rapproche le contenu de vos utilisateurs, pour que vos données aient moins de distance à parcourir entre le serveur et le navigateur.
Avec l’extension de Fasterize, vous pouvez combiner les atouts d’un plugin pour optimiser automatiquement votre frontend avec un service de CDN disposant de plus de 220 points de présence partout dans le monde !

Magento fait partie des CMS de référence en E-commerce, et nous vous donnons les clés pour améliorer encore ses performances ! Notez qu’il peut suffire de quelques millisecondes en moins sur vos temps de chargement pour que votre chiffre d’affaires augmente significativement.

En effet, 0,1 seconde de temps de chargement en moins génère :

  • +8,4% de conversions et +9,2% sur le panier moyen dans le retail ;
  • +10,1% de conversions et +1,9% sur le panier moyen dans le voyage ;
  • +8,6% de pages vues par session dans le luxe ;
  • -8,3% de rebond sur les formulaires dans le retail en général !

 

A vous de jouer pour faire de votre site Magento un véritable atout business -
 comme nos clients Carré Blanc et Phildar qui ont vu leurs
conversions augmenter respectivement de 25 % et 42 % :

Téléchargez le livre blanc


Hello SMX Paris !