Les avantages et les inconvénients de passer la tête sans tête pour votre boutique de commerce électronique

Effectuez une recherche sur « Sans tête« , Et vous trouverez des milliers d’articles sur cette nouvelle approche. La plupart des auteurs l’apprécient pour la liberté qu’il offre pour le développement frontal, tandis qu’une grande partie de sa base de fans apprécie son excellente interface utilisateur (UI). Quoi qu’il en soit, ce sont les entreprises de commerce électronique qui manifestent un grand intérêt à mettre en œuvre Headless pour leur boutique en ligne.

J’ai déjà discuté de Progressive Web Apps, qui fait 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 de rendre une expérience client haut de gamme.

Cet article est-il une autre lettre d’amour au développement d’un site Web sans tête? Dans une certaine mesure, oui. Mais je préfère discuter de ses avantages pour les entreprises de commerce électronique et de la façon dont, en tant qu’agence de développement de sites Web tiers, a aidé à mettre en œuvre Headless pour certaines des plateformes de commerce électronique les plus populaires.

Qu’est-ce que le commerce électronique sans tête?

Les bases: Chaque site Web de commerce électronique se compose de deux moitiés fonctionnelles – l’extrémité avant et l’arrière.

La partie frontale du site Web sert de canal intermédiaire entre l’utilisateur et le portail de commerce électronique, tandis que la partie arrière gère les détails du produit 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 à partir du même panneau, ce qui signifie qu’ils partagent une plate-forme commune.

Entrez sans tête avec une toute nouvelle stratégie. Si vous n’avez pas entendu parler de Headless, il sert essentiellement à séparer l’extrémité avant et l’arrière d’un site Web. Avec moins d’interférences, chaque partie du site Web se comporte de manière indépendante et excelle dans leurs domaines respectifs – vous avez un expert en interface utilisateur pour gérer le visage du portail et un expert principal pour renforcer la base:

Pourquoi sont-ils si différents?

L’architecture de base des portails de commerce électronique

Sans plonger dans les minuties de l’architecture de commerce électronique, voici des structures de portail grossièrement conçues pour illustrer le fonctionnement de base des sites de commerce électronique et leurs interactions à chaque étape.

Un paquet entier

L’architecture Full Stack est une approche plus conventionnelle que les webmasters mobiles ont utilisée depuis que le développement d’applications mobiles est devenu une tendance. Les développeurs créent un écosystème à part entière avec la plateforme de commerce au centre, couplée à une vitrine intégrée. Le portail affiche séparément les plates-formes individuelles telles que le mobile et le Web. Les livrables sont plus indépendants et dédiés à la plateforme de service.

Avec la plate-forme de commerce au centre, le portail de commerce donne la priorité aux fonctions backend telles que la gestion de contenu, la réalisation et les données produit.

Architecture de commerce électronique à pile complète

Commerce sans tête

Par rapport à l’architecture à pile complète, la structure de commerce électronique sans tête sépare clairement l’extrémité avant de la boutique en ligne du reste des fonctions du site Web. Il permet 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 frontale commune qui s’adapte intelligemment à toutes les plates-formes.

Pour des raisons évidentes, le front-end priorise désormais des fonctions telles que le paiement et la personnalisation, tandis que la plate-forme de commerce gère des fonctionnalités telles que la gestion de contenu, l’exécution et la gestion des produits.

Semble trop technique? On peut le résumer avec ce point singulier: le commerce électronique sans tête est beaucoup plus flexible que les approches conventionnelles en termes de rendu d’une expérience omnicanal.

Une augmentation soudaine de la demande de Headless

Retail Dive et BigCommerce ont récemment présenté des chiffres stupéfiants dans un enquête qui a impliqué des dirigeants et des directeurs marketing mondiaux 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). Les 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 le trafic organique.

Les utilisateurs consomment du contenu de 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 appuyée par un Enquête Mediapost, qui prétend que les Américains seront connectés à travers 13 périphériques 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 tous les appareils connus pour rendre l’accessibilité aux services Web.

Cas pratiques dans notre laboratoire: comment nous avons développé une architecture sans tête pour nos clients

En tant qu’agence qui propose des solutions de commerce électronique personnalisées, nos clients nous demandent souvent de fournir des portails rapides à charger et tout aussi intuitifs pour l’utilisateur. Et ce que nous faisons, c’est recommander l’approche sans tête. Pour des raisons évidentes, il nous faut faire un effort supplémentaire, mais cela leur donne de bons résultats.

Implémenter un Magento sans tête

Backend: Plateforme de commerce Magento

L’extrémité avant: JS angulaire

Problème adressé:

Problèmes de chargement – le site Web d’origine a mis jusqu’à 7 secondes à apparaître. Ce qui signifiait un écran vide pendant plus de 7 secondes. Magento, par défaut, offre une interface conçue sur le CMS basé sur KnockoutJS. La vitrine hautement intégrée limitait la boutique en ligne sur de nombreux fronts. Le nombre croissant d’utilisateurs a commencé à peser sur les performances des magasins.

Notre solution:

Avec un modèle sans tête conçu avec Angular JS, nous avons empêché le backend d’affecter la vitrine. L’approche par lazyload classique a réduit de près de moitié le temps de chargement des pages.

Résultat:

Le temps de chargement des pages a été fortement réduit, passant de 7 secondes à 2,8 secondes.

Une autre étude de cas Magento sans tête

Backend: Plateforme Magento Commerce

L’extrémité avant: VueJS

Problème résolu:

Navigation de page – L’expertise de Magento se limite aux performances du backend. Son frontend est plutôt rigide et a souvent besoin de vous pour faire un tour pour le backend, chaque fois que vous effectuez une action sur la vitrine. Vous cliquez sur une nouvelle page, le magasin transmet la demande au backend Magento, traite les données et vous permet de charger la nouvelle page. La navigation entre les pages est une chose qui a été endommagée au cours du processus.

Notre solution:

Nous avons pu établir une application de page unique sur Magento avec VueJS. L’utilisateur peut désormais naviguer entre les pages du modèle Vue lui-même. Une grande partie de la requête est déjà résolue sur le modèle Vue, empêchant le backend de Magento d’être brûlé.

Résultat:

Tranches de temps de navigation de page par collecteurs.

Implémenter Headless sur une boutique en ligne Shopify

Backend: Plateforme Shopify Commerce

L’extrémité avant: Gatsby JS

Sessions de caisse longues – Les sessions de paiement sur n’importe quelle plate-forme de commerce électronique, y compris Shopify, sont généralement trop longues. Les utilisateurs sont priés de remplir 4 longues pages avant de payer. L’histoire de retour – après chaque page, la boutique recharge la page suivante à partir du backend Shopify, suivie du délai de traitement par les passerelles de paiement tierces. Cela étant 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 un section de paiement virtuel d’une page. Nous avons limité les champs et regroupé tous les détails sur une seule page.

Résultat:

Le temps de la session de caisse réduit par les collecteurs.

Headless n’est pas si parfait

Bien que nous prétendions sans tête comme une approche pour résoudre la plupart des problèmes dans votre boutique de commerce électronique, cela ne signifie certainement pas que cela vient sans défauts. Voici quelques raisons de ne pas posséder Headless Commerce:

Coût croissant:

La meilleure partie du commerce sans tête 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 du contenu orienté appareil. Le pire, c’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 n’est pas suffisante pour atteindre les gens. Les propriétaires dépendent fortement de l’équipe informatique pour lancer des pages de destination sur plusieurs appareils.

Pas favorable au marketing

Un système de commerce sans tête n’a pas de couche de présentation frontale. Ce qui signifie:

• La prévisualisation du contenu sur les appareils des utilisateurs finaux devient difficile.

• Les spécialistes du marketing ne parviennent pas à créer du contenu dans l’environnement WYSIWYG conventionnel.

• Idéer, créer et publier du contenu devient beaucoup plus lent en raison de la fiabilité accrue d’un autre service.

Cela implique que le commerce sans tête finirait par contraindre les spécialistes du marketing à être plus performants avec une dépendance plus élevée à l’égard du service informatique pour la création et la livraison de contenu.

Modifications restreintes dans la vitrine

Le système de commerce sans tête n’a pas d’environnement WYSIWYG et est uniquement construit avec des frameworks basés sur JS. Bien qu’il offre à votre site Web suffisamment d’espace pour étendre le site, il vous limite également pour une nouvelle conception du frontend sans trop dépendre des développeurs JS.

Résumer

Les principales entreprises de commerce électronique possèdent une architecture sans tête. Surtout, cela les aide pour de bon. Headless a ses avantages, ainsi que ses inconvénients. Il vous faudra peut-être faire un effort supplémentaire, mais les résultats qu’il récoltera dureront.

Les architectures conventionnelles sont toujours suffisamment conviviales pour continuer, mais là encore, le changement est la seule constante.