Occitech utilise Dareboost pour améliorer les performances des sites Magento de ses clients

Spread the love

Nous laissons aujourd’hui la parole à Etienne Zulauf, cofondateur d’Occitech – agence web et société d’infogérance spécialisée Magento. Découvrez comment son agence a su tirer profit de Dareboost au cours des années et se lance aujourd’hui sur un nouveau produit : Front-Commerce. Une promesse forte : la performance à l’honneur comme vous pourrez le constater avec la surveillance mise en place via les parcours utilisateurs de Dareboost.

Etienne Zulauf - Occitech – Front-Commerce

Notre histoire avec Dareboost

Utilisateurs de Dareboost depuis fin 2014, nous avons pu y découvrir de nombreuses  optimisations et bonnes pratiques que nous pouvions mettre en place pour nos intégrations. L’outil a rapidement pris sa place dans les audits des projets que nous récupérions, valorisant ainsi notre souhait de livrer de la qualité. Ainsi, nous avons pu mettre en place de manière proactive des préconisations pour améliorer les projets au fil du temps en priorisant les actions les plus impactantes, ce que les clients ont évidemment apprécié !

Nous avons même inclus Dareboost dans nos offres d’hébergement, en option ou en série selon les formules, tellement nous pensons qu’il est utile de s’en servir régulièrement et que les éditeurs devraient suivre ces métriques au moins autant que leur audience sur Analytics.

Nous incluons maintenant dans nos propositions commerciales des engagements de scores Dareboost, car bien souvent les cahiers des charges sont trop évasifs. Exemple : « Chargement d’une page en moins de 4 secondes ». OK, sur quel appareil ? Avec quelle connexion ?

Dareboost vous recommande à ce sujet la lecture de : "Tester la vitesse d’une page web comme un expert"

Même problème avec le contributif : si le client a mis 25 images jpeg plein écran non compressées, comment réussir à tenir nos engagements ? Avec Dareboost, nous pouvons parler de « types de page » (accueil, catégories, produit, CMS), moduler notre responsabilité selon le contenu contribué par le client et valoriser les performances de notre hébergement et les optimisations d’intégration réalisées.

Dareboost vous recommande à ce sujet la lecture de : "Budget de performance : un indispensable à la rapidité des sites web"

Un détail marquant à citer

Je me souviens qu’un rapport Dareboost nous a un jour alerté sur un projet qui faisait deux fois appel au fichier javascript de Google Analytics. Une erreur que nous n’aurions pas pu détecter autrement. Je pense que c’est vraiment à cet instant que j’ai décidé que nous allions utiliser massivement Dareboost partout et tout le temps !

Dareboost et Front-Commerce

En 2015, avec la sortie de Magento 2, Pierre qui est Lead Developer (et associé co-gérant) envisage une alternative au moteur de template complexe (et déjà dépassé) de la pourtant jeune solution. Magento 2 étant annoncé comme « headless » (full API), pourquoi ne pas envisager un framework Javascript pour le front ? Le POC de Front-Commerce était lancé !

Notre solution Front-Commerce propose, grâce aux API, d’utiliser des technologies Front modernes pour réaliser sa boutique en ligne. Avec React et GraphQL et de bonnes pratiques Front mises en place dès le départ, c’est une amélioration significative de la DX (Developer eXperience) et une libération totale en matière d’ergonomie. Mais cela vient aussi avec des gains importants sur les performances utilisateurs !

Nous avons suivi avec attention les recommandations de Dareboost pour toujours rester à la page sur les performances tout au long du développement. L’objectif (atteint) est de rester au-dessus de 90 % et les points restants sont souvent des optimisations simples qui seront réalisées sur les prochaines maintenances (Lazy Loading, réglages des META, …). Sur la partie principale nous savons qu’il n’y a pas de manquement grave.

En ayant tenu compte de ces points de vigilance, notre version 1.0 qui sort dans quelques jours exploitera à 100% les possibilités offertes par l’approche PWA (Progressive Web App). Nous sommes ainsi la première solution eCommerce en production à proposer ces fonctionnalités qui sont d’ailleurs essentiellement portées sur les performances.

Comme Front-Commerce utilise React, nos sites clients sont donc des SPA (Single Page Application). Quand Dareboost teste une URL, il reçoit une page déjà générée côté serveur (Server Side Rendering). Or React ne prend le relais qu’à partir du clic suivant la même session et c’est là que les performances deviennent vraiment géniales.

Nous avons donc pu profiter de la fonctionnalité de « Scénarios » (monitoring transactionnel) de Dareboost qui permet de simuler un parcours utilisateur complet composé de plusieurs actions. Nous avons pu mettre en évidence les gains apportés par notre architecture SPA en testant un même parcours utilisateurs site Magento 2 témoin, puis avec notre technologie.

Le scénario testé est composé de 5 étapes (accès à la page d’accueil, accès à une catégorie, accès à un produit, ajout au panier, consultation du panier). Chacune est représentée d’une couleur différente dans les histogrammes des différents indicateurs de performance collectés par Dareboost :

scenario dareboost magento2

scenario dareboost front-commerce

Malgré un traitement plus important du serveur sur le chargement initial de la page d’accueil qui pourra se voir compensé par la mise en place d’un système de cache, on constate sans nul doute une expérience utilisateur améliorée.

A titre d’exemple, voici le filmstrip de la 5ème étape du parcours (l’accès au panier après y avoir ajouté un produit), avec Front-Commerce :

filmstrip dareboost front-commerce

Moins de 500 ms entre le clic de l’utilisateur et l’affichage complet du récapitulatif panier sont nécessaires avec Front-Commerce, alors que sur le site témoin, ce sont pas loin de 2 secondes qui s’écoulent.

On pourra également apprécier les bénéfices de la SPA : pas de rechargement complet de la page mais un loader qui permet une attente gracieuse en attendant l’affichage du contenu du récapitulatif.

cumul requetes parcours utilisateur Dareboost front-commerce

Graphique cumulé représentant pour chaque étape le nombre de requêtes HTTP générées, sur une période de 24 h avec une surveillance horaire. Le déroulé du parcours de 5 étapes nécessite moins de 50 requêtes sur cette démonstration.

Si vous aussi vous souhaitez mesurer les performances de votre tunnel d’achat e-commerce, n’hésitez pas à découvrir la fonctionnalité de monitoring transactionnel sur notre site.

À propos d’Occitech

Depuis janvier 2006, Occitech développe des solutions web métier et eCommerce en tant que prestataire pour divers clients nationaux. En 2010, l’entreprise prend le chemin de Magento et développe un réel savoir-faire. En 2018, Occitech est un studio d’innovation web artisanal de 10 personnes et se lance dans l’édition de solutions logicielles avec Front-Commerce.


Spread the love