Les avantages et les inconvénients du passage au Headless pour votre boutique e-commerce
Faites une recherche sur «Headless», et vous trouverez des milliers d’articles parlant de cette nouvelle approche. La plupart des auteurs l’apprécient pour la liberté qu’elle offre pour le développement front-end, tandis qu’une grande partie de sa base d’utilisateurs apprécie son excellente interface utilisateur (UI). Quoi qu’il en soit, ce sont les entreprises de commerce électronique qui montrent un grand intérêt pour la mise en œuvre du Headless pour leur boutique en ligne.
J’ai déjà discuté des Progressive Web Apps, qui font partie de cette approche. Un concept similaire a été adopté par des géants du commerce électronique comme Amazon, Flipkart et Nike, dans le seul but d’offrir une expérience client haut de gamme.
Cet article est-il une nouvelle lettre d’amour au développement de sites web Headless ? Dans une certaine mesure, oui. Mais je préfère discuter de ses avantages pour les entreprises de commerce électronique et de la manière dont, en tant qu’agence de développement de sites web tierce, nous avons aidé à mettre en œuvre le Headless pour certaines des plateformes de commerce électronique les plus populaires.
Optimisez votre site web et plus encore
avec les outils Semrush
Qu’est-ce que le commerce électronique Headless ?
Les bases: Chaque site web de commerce électronique se compose de deux moitiés fonctionnelles, le front-end et le back-end.
Le front-end du site web agit comme un canal intermédiaire entre l’utilisateur et le portail de commerce électronique, tandis que le back-end gère les détails des produits et l’ensemble du fonctionnement du portail. Au fil des ans, les portails de commerce électronique populaires sont restés fidèles à l’approche classique où le front-end et le back-end du site web sont contrôlés depuis le même panneau, ce qui signifie qu’ils partagent une plateforme commune.
Entrez dans le Headless avec une stratégie entièrement nouvelle. Si vous n’avez pas entendu parler du Headless, il sert essentiellement à séparer le front-end et le back-end d’un site web. Avec moins d’interférences, chaque partie du site web se comporte de manière indépendante et excelle dans son domaine respectif ; vous avez un expert UI pour gérer la face du portail et un expert back-end pour renforcer la base :
Pourquoi sont-ils si différents ?
L’architecture de base des portails de commerce électronique
Sans entrer dans les détails de l’architecture e-commerce, ce qui suit sont des structures de portail conçues approximativement pour illustrer le fonctionnement de base des sites web de commerce électronique et leurs interactions à chaque étape.
Architecture Full Stack
L’architecture Full Stack est une approche plus conventionnelle que les webmasters mobiles utilisent depuis que le développement d’applications mobiles est devenu une tendance. Les développeurs créent un écosystème complet avec la plateforme de commerce au centre, couplée à une vitrine intégrée. Le portail rend les plateformes individuelles comme le mobile et le web séparément. Les livrables sont plus indépendants et dédiés à la plateforme de service.
Avec la plateforme de commerce au centre, le portail de commerce donne la priorité aux fonctions back-end telles que la gestion de contenu, l’exécution et les données produits.
Architecture e-commerce full-stack
Commerce électronique Headless
Par rapport à l’architecture full-stack, la structure e-commerce Headless sépare clairement le front-end de la boutique en ligne du reste des fonctions du site web. Il est utile de visualiser cette architecture comme des parties distinctes plutôt que comme un système centralisé commun. Les livrables sont gérés avec des API qui rendent une interface utilisateur front-end commune qui s’adapte intelligemment à toutes les plateformes.
Pour des raisons évidentes, le front-end donne désormais la priorité aux fonctions telles que le paiement et la personnalisation, tandis que la plateforme de commerce gère des aspects tels que la gestion de contenu, l’exécution et la gestion des produits.
Cela semble trop technique ? Cela peut être résumé en ce seul point : le commerce électronique Headless est bien plus flexible que les approches conventionnelles en termes de rendu d’une expérience omnicanale.
Une augmentation soudaine de la demande pour le Headless
Retail Dive et BigCommerce ont récemment présenté des chiffres stupéfiants dans une enquête impliquant des cadres mondiaux et des responsables marketing et leurs difficultés à acquérir des consommateurs numériques. Selon le rapport, 86 % des chefs d’entreprise ont indiqué qu’ils connaissaient une augmentation du coût d’acquisition client (CAC). Avec des médias payants devenant plus coûteux et plus compétitifs, le rapport suggère que l’option préférable est d’élaborer de meilleures stratégies pour attirer du trafic organique.
Les utilisateurs consomment du contenu presque partout. Au-delà d’une présence en ligne et d’une expérience d’achat améliorée, les entreprises doivent offrir aux consommateurs des options d’achat faciles sur tous les appareils. Cette déclaration est étayée par une enquête Mediapost, qui affirme que les Américains seront connectés via 13 appareils réseau par personne. Inutile de dire que la liste comprend des appareils de toutes sortes avec une variété de dimensions d’écran comme les ordinateurs portables, les tablettes, les téléphones mobiles, les outils de reconnaissance vocale, les montres intelligentes, les kiosques, les tablettes de voiture et tout appareil connu pour offrir une accessibilité aux services web.
Cas pratiques dans notre laboratoire : Comment nous avons développé l’architecture Headless pour nos clients
En tant qu’agence proposant des solutions e-commerce personnalisées, nos clients nous demandent souvent de livrer des portails ultra-rapides à charger et tout aussi intuitifs pour l’utilisateur. Et ce que nous faisons, c’est recommander l’approche headless. Pour des raisons évidentes, cela nous oblige à faire un effort supplémentaire, mais cela donne de bons résultats pour eux.
Mise en œuvre d’un Magento Headless
Backend : Plateforme de commerce Magento
Frontend : Angular JS
Problème résolu :
Problèmes de chargement, le site web original prenait jusqu’à 7 secondes pour s’afficher. Ce qui signifiait un écran blanc pendant plus de 7 secondes. Magento, par défaut, propose un frontend conçu sur le CMS basé sur KnockoutJS. La vitrine hautement intégrée restreignait la boutique en ligne sur de nombreux fronts. Le nombre croissant d’utilisateurs commençait à peser sur les performances de la boutique.
Notre solution :
Avec un modèle headless conçu avec Angular JS, nous avons filtré le backend pour qu’il n’affecte pas la vitrine. L’approche classique du lazyload a réduit le temps de chargement de la page de près de moitié.
Résultat :
Le temps de chargement de la page a été considérablement réduit, passant de 7 secondes à 2,8 secondes.
Une autre étude de cas Magento Headless
Backend: Plateforme de commerce Magento
Frontend: VueJS
Problème résolu :
Navigation sur la page, L’expertise de Magento se limite aux performances du backend. Son frontend est assez rigide et vous oblige souvent à faire un tour par le backend, chaque fois que vous effectuez une action sur la vitrine. Vous cliquez sur une nouvelle page, la boutique transmet la demande au backend Magento, traite les données et vous permet de charger la nouvelle page. La navigation sur la page est une chose qui a été affectée par ce processus.
Notre solution :
Nous avons pu établir une application monopage (SPA) sur Magento avec VueJS. L’utilisateur peut désormais naviguer entre les pages dans le modèle Vue lui-même. Une grande partie de la requête est déjà résolue sur le modèle Vue, évitant ainsi au backend Magento d’être surchargé.
Résultat :
Le temps de navigation sur la page est considérablement réduit.
Mise en œuvre du Headless sur une boutique en ligne Shopify
Backend: Plateforme de commerce Shopify
Frontend : Gatsby JS
Longues sessions de paiement, Les sessions de paiement sur n’importe quelle plateforme de commerce électronique, y compris Shopify, sont généralement trop longues. Les utilisateurs sont invités à remplir 4 longues pages avant de payer. L’histoire : après chaque page, la boutique recharge la page suivante depuis le backend Shopify, suivie du délai de traitement par les passerelles de paiement tierces. Cela dit, nous avons des tampons à chaque étape, ce qui rend la section de paiement longue et irritante.
Surtout, Shopify limite la possibilité de personnaliser la page de paiement, restreignant le contrôle de l’administrateur sur son contenu.
Notre solution :
Avec Gatsby JS, nous avons pu créer une section de paiement virtuelle d’une seule page. Nous avons limité les champs et trié tous les détails sur une seule page.
Résultat :
Le temps de session de paiement a été considérablement réduit.
Le Headless n’est pas si parfait
ru
Coûts croissants :
Le meilleur aspect du Headless commerce est que la boutique en ligne n’a pas de frontend prédéfini. Les développeurs le construisent à partir de zéro pour fournir un contenu orienté vers les appareils. Le pire aspect est que cela prend du temps et que le coût peut être élevé.
De plus, vous devez dépenser davantage car l’équipe marketing ne suffit pas à atteindre les gens. Les propriétaires dépendent fortement de l’équipe informatique pour lancer des pages de destination sur plusieurs appareils.
Pas convivial pour le marketing
Un système de Headless commerce manque d’une couche de présentation frontend. Ce qui signifie :
- La prévisualisation du contenu sur les appareils des utilisateurs finaux devient difficile.
- Les marketeurs ne parviennent pas à créer du contenu dans l’environnement WYSIWYG conventionnel.
- L’idéation, la création et la publication de contenu deviennent beaucoup plus lentes en raison d’une dépendance accrue envers un autre département.
Cela implique que le Headless commerce finirait par stresser les marketeurs pour qu’ils en fassent plus, avec une dépendance accrue envers le département informatique pour la création et la diffusion de contenu.
Modifications restreintes dans la vitrine
Le système de Headless commerce manque d’un environnement WYSIWYG et est construit uniquement avec des frameworks basés sur JS. Bien qu’il offre à votre site Web suffisamment d’espace pour l’expansion, il vous restreint également pour une refonte ultérieure du frontend sans dépendre fortement des développeurs JS.
En résumé
Les entreprises de commerce électronique leaders ont adopté l’architecture headless. Surtout, cela les aide pour le mieux. Le Headless a ses avantages, ainsi que ses inconvénients. Cela pourrait vous demander de faire un effort supplémentaire, mais les résultats qu’il récoltera seront durables.