Shopify plus est une plateforme de commerce électronique SaaS populaire qui a attiré certaines des plus grandes marques mondiales comme Tesla, Victoria Beckham Beauty, Staples, Oreo/Mondelez et Red Bull. La liste continue, et la large adoption n’est pas une surprise – Shopify plus est simple à utiliser et facilement personnalisable. Il offre une pléthore de plugins et d’API et est soutenu par une équipe de support incroyablement réactive. Que pouvez-vous attendre d’autre d’une plateforme de commerce électronique ? Que ce soit avec une boutique Shopify ou autre, la réponse reste la même : chargement de page en moins de seconde et SEO qui bat vos concurrents.
Même le site Web Shopify plus le plus élégant et le plus beau n’aura aucune chance contre la concurrence écrasante des plus gros détaillants, à moins que l’opérateur ne fasse le maximum pour optimiser le site pour des vitesses inférieures à la seconde.
Rendre votre boutique Shopify plus aussi rapide que possible est l’un des moyens les plus simples d’obtenir votre boutique un classement plus élevé dans les SERP et d’augmenter vos taux de conversion grâce à une expérience d’achat supérieure et transparente.
Shopify vous permet de livrer des produits, pas des expériences
De nombreuses plates-formes de commerce électronique comme Shopify plus, Magento ou Salesforce commerce Cloud ont été conçues avec une approche backend et data-first et très peu axée sur l’expérience client réelle. Ils se concentrent sur les SKU, pas sur les personnes. Cela pèse lourdement sur l’optimisation de la vitesse des sites Web pour les clients de la plate-forme, les intégrateurs de systèmes, les concepteurs et les développeurs.
Que votre boutique fonctionne sur Shopify plus ou sur toute autre plate-forme de commerce électronique ou système backend populaire, si vous souhaitez offrir l’expérience la plus rapide, vous devrez mettre en œuvre des technologies Web avancées axées sur la vitesse. Pour cela, vous devez d’abord aller sans tête.
Les avantages du commerce électronique sans tête
Une architecture de commerce électronique sans tête est une architecture dans laquelle la conception frontend d’un site (c’est-à-dire la couche de présentation) est découplée de son infrastructure backend. C’est un peu comme utiliser WordPress pour gérer le contenu d’une application mobile (pour ce que ça vaut, c’est possible avec l’API REST de WordPress).
Architecture de commerce électronique monolithique traditionnelle
Le passage au sans tête a été identifié comme l’une des principales initiatives pour de nombreux détaillants en 2020 et au-delà. Il permet aux détaillants de choisir la meilleure solution pour leur frontend indépendamment de leur backend afin que les magasins puissent fonctionner plus rapidement, ce qui augmente les taux de conversion et améliore le classement. Le commerce électronique sans tête, également connu sous le nom d’architecture de microservices, est presque un moyen sûr de gagner un avantage sur la concurrence.
Une couche API permet de découpler le frontend d’un site de son backend
Plus précisément, le commerce électronique sans tête offre plusieurs avantages:
1. Vitesses plus rapides
Passer sans tête est une condition préalable à la mise en œuvre de nombreuses technologies axées sur la vitesse. Ceci est possible en déplaçant la logique d’affichage vers le côté client et en rationalisant le backend pour les meilleures performances. En se concentrant uniquement sur la livraison rapide de contenu, le frontend peut être plus rapide et plus réactif qu’un qui laisse le travail acharné au navigateur.
2. Liberté de choix
De nombreuses plateformes de commerce électronique offrent à leurs utilisateurs des frontaux propriétaires. Shopify plus n’est pas différent et propose une sélection de thèmes réactifs basés sur le langage de modélisation Liquid de Shopify. En optant pour le headless, vous pouvez complètement vous débarrasser des chaînes de la dépendance vis-à-vis des fournisseurs et aller au-delà de l’outillage frontend de la plate-forme. Cela conduit à une plus grande agilité et vous permet de développer votre frontend indépendamment de la feuille de route de votre plateforme de commerce électronique.
3. Indépendance du backend
Un investissement dans un site Web sans tête assure l’avenir du magasin. Vous possédez le code frontend et pouvez développer et investir en toute confiance. Cela vous permet de le déplacer vers une autre plate-forme de commerce électronique moins chère ou meilleure quand vous le souhaitez. Dans un tel cas, même si votre boutique dispose de dizaines d’intégrations avec des outils tiers, elles n’ont pas besoin d’être réécrites pour la nouvelle plateforme de commerce électronique – il suffit d’échanger les API de l’ancienne plateforme avec celles de la nouvelle.
4. Meilleur SEO
Un site headless n’est pas seulement plus rapide ; il a aussi un meilleur SEO. Avec un site Web sans tête, vous pouvez choisir comment gérer les URL, les métadonnées, les fichiers robots.txt et d’autres aspects de votre SEO technique. Shopify plus ne prend pas cela en charge dès la sortie de la boîte.
5. Prise en charge des cas d’utilisation et des terminaux futurs
Avec un frontend sans tête comme progressive Web Apps (PWA)/Single-page applications (SPA), l’opérateur peut pérenniser le magasin, ajouter librement de nouveaux terminaux et développer des fonctionnalités supplémentaires. Tout ce que vous avez à faire est de vous connecter à des API. Vous pouvez ajouter pratiquement n’importe quel appareil ou plate-forme comme terminal et caisse pour votre magasin en optant pour Headless.
Le secret derrière les magasins Shopify plus les plus rapides
Passer sans tête est la base de la mise en œuvre de plusieurs technologies Web avancées et techniques d’optimisation qui aident à développer des vitrines plus rapides et plus réactives. Combinés, ils peuvent aider à optimiser n’importe quel site Web Shopify plus pour une vitesse, une SEO et des revenus maximaux.
Terminaux PWA portables
En optant pour le headless et en couplant Shopify plus avec un frontend portable PWA, vous pouvez gagner des vitesses de navigation ultra-rapides sur le site Web sur les appareils mobiles. Avec PWA, vos clients profiteront d’une expérience améliorée de transitions de page instantanées. Aussi rapides que soient les transitions de navigation des PWA, leurs premiers chargements ont tendance à prendre plus de temps que les sites Web traditionnels de plusieurs pages. Pour lutter contre cela et fournir une expérience incroyablement rapide de l’atterrissage à la caisse, envisagez d’ajouter le rendu côté serveur et la prise en charge AMP à votre PWA.
Rendu côté serveur (SSR)
Le rendu côté serveur est une technologie Web cruciale qui accompagne les PWA rapides. Sans rendu côté serveur, le navigateur doit télécharger, analyser et exécuter tout le code JavaScript avant de rendre quoi que ce soit à l’écran. Les PWA sans SSR ont du mal à atteindre un temps de première peinture significative (TTFMP) inférieur à 2,5 s sur 3g. Couplé à un CDN moderne avec des capacités de Edge computing, un site qui utilise SSR peut atteindre des temps TTFMP presque instantanés.
SSR garantit que les visiteurs des e-mails, des médias sociaux et des références connaissent des premiers chargements rapides. Avec la prise en charge SSR, la PWA offre une expérience améliorée de chargements de la première page ultra-rapides et de transitions instantanées de page au-delà de la première page.
Le rendu côté serveur conduit également à un meilleur SEO. Les entreprises de commerce électronique dépendent du référencement, et la seule façon d’être sûr à 100% que votre site sera compris par les robots de recherche et les robots sociaux et crawlers est de le traduire en HTML.
Ceci est particulièrement important si vous créez un frontend PWA de commerce électronique lourd en JavaScript pour Shopify plus. Vous devez rendre vos pages sur le serveur car les robots d’indexation et les robots n’indexent pas de manière fiable le contenu JavaScript.
Shopify plus ne vient pas avec la prise en charge SSR intégrée.
Pages mobiles accélérées (AMP)
Google AMP est un framework open-source pour la création de pages web mobiles ultra-rapides en simplifiant le HTML et en appliquant des limitations strictes sur CSS et JavaScript. La page AMP moyenne se charge en 500 millisecondes à partir de la recherche. Ces pages sont mises en cache et pré-rendues sur le serveur Google, ce qui explique comment elles sont livrées rapidement.
Shopify plus n’offre pas de prise en charge AMP ou SSR réelle prête à l’emploi, ce qui entrave considérablement votre capacité à optimiser les chargements de la première page sur mobile. Vous devrez ajouter ces fonctionnalités à votre site Web par vous-même. Pour AMP et SSR, vous voudrez un backend pour frontend. Vous trouverez plus d’informations à ce sujet ci-dessous.
Back-end pour Frontend (BFF)
Les BFF jouent un rôle central dans l’utilisation d’API d’architecture basée sur le commerce électronique sans tête et les microservices. Il s’agit d’une couche discrète dans votre pile d’applications qui permet à un seul client, par exemple une application mobile PWA ou Android ou iOS native, d’utiliser les API partagées plus efficacement sans les optimiser pour chaque client. Il « intercepte » de manière transparente les appels API et traduit les arguments passés pour les faire comprendre par un point de terminaison spécifique.
BFF est l’endroit idéal pour faire le rendu côté serveur et la conversion AMP pour le frontend. Un BFF apporte également de nombreux autres avantages à une boutique Shopify:
BFF et vitesse
Votre frontend peut-être avoir besoin d’orchestrer les appels vers plusieurs services et/ou de reformater les données de réponse pour les adapter au mieux à la conception de la page, et ce code doit s’exécuter quelque part. Un BFF vous permet de garder ce code hors du bundle frontend, le gardant petit et rapide. Dans la plupart des cas, les réponses peuvent être mises en cache, donc plutôt que d’exécuter ce code shim sur l’appareil de chaque utilisateur à chaque requête, il est exécuté sur le cloud, qui peut évoluer pour répondre à la demande et uniquement en cas de perte de cache.
Pour les clients mobiles, trop de requêtes HTTP coûtent cher en temps, ajoutant des millisecondes inutiles à chaque appel. Pour minimiser le nombre de requêtes, le frontend généralement à obtenir des données associées via une API unique. Cela signifie que parfois le backend sera responsable du traitement logique lié à l’interface utilisateur pour répondre aux besoins de chaque client. C’est une approche inefficace.
Avec un backend pour frontend implémenté, le frontend (mobile, web) accède uniquement aux microservices backend via le BFF, et chaque client obtient un service BFF distinct. Avec un BFF, il y a moins d’appels mutuels entre les microservices. En effet, une partie de la logique de l’interface utilisateur est traitée au niveau BFF.
BFF et vitesse de développement
Un BFF augmente la vélocité des développeurs en permettant à des équipes de développement distinctes de travailler de manière indépendante. Il permet aux développeurs d’ajouter de nouvelles fonctionnalités sans avoir à changer les API de base. Ceci est particulièrement utile si les API sont fournies par Shopify plus et ne peuvent pas être modifiées.
Réduction de la dépendance vis-à-vis d’un fournisseur
Si vous avez besoin de changer Shopify pour une autre plateforme de commerce électronique, un backend pour frontend réduit les efforts et les coûts. Cela offre un énorme avantage sous la forme de la flexibilité de l’architecture sans tête.
Découplage front-end et back-end basé sur BFF
Préchargement prédictif et CDN avec Edge computing
Le préchargement prédictif est une fonctionnalité avancée utilisée pour pré-mettre en cache et rendre la page que les visiteurs sont le plus susceptibles de visiter avant de cliquer dessus. Un CDN moderne avec des capacités de Edge computing vous permet de diffuser des données dynamiques vers la périphérie, puis vers les navigateurs des utilisateurs avant qu’ils ne le demandent. Combinées, ces technologies permettent à votre boutique Shopify plus de garder 5 secondes d’avance sur l’acheteur, quel que soit l’endroit où il se trouve.
En préchargeant et en diffusant des données dynamiques à la périphérie, vous pouvez mettre en cache et servir instantanément ce que les consommateurs qui naviguent dans votre boutique Shopify attendent : les données JSON qui se traduisent par les différents produits que vous avez en stock, leurs prix et leurs informations. Mais pour ce faire, vous avez besoin d’un CDN sophistiqué qui comprend votre application.
Layer0 CDN-AS-JavaScript optimise les taux de réussite du cache à des niveaux inédits et apporte l’intelligence à la périphérie. Cela aide les propriétaires d’entreprise à déchiffrer les tendances et les opportunités d’optimisation en catégorisant les pages similaires en tant que telles (par exemple, PDP, PLP et Cart) au lieu de simplement afficher une liste infinie d’URL. Cela vous permet de prendre des mesures et de voir une différence dans les temps de chargement du site Web.
Layer0 CDN-AS-JavaScript a un taux de réussite de cache de 95%+ pour le contenu dynamique à la périphérie, tandis que le site de commerce électronique moyen a un taux de réussite de cache moyen de 15%. Cette différence, ainsi que le préchargement prédictif, garde les grands sites Web de commerce électronique 5 secondes d’avance sur l’acheteur, peu importe où ils tapent.
Est-il difficile d’aller sans tête avec Shopify plus?
Choisir une plateforme de commerce électronique pour gérer votre boutique devrait prendre en compte la prise en charge par la plateforme des sites Web sans tête et les technologies permettant des sites de moins de la seconde. De nombreuses plates-formes de commerce électronique sont monolithiques prêtes à l’emploi (c’est-à-dire qu’elles combinent le frontend avec le backend).
Bien qu’il ne prenne pas explicitement en charge l’architecture headless, Shopify plus permet aux détaillants d’exécuter des magasins headless et d’utiliser un framework frontal différent (tel que React Storefront) ou un CMS headless comme Contentful, qui est utilisé par de nombreuses versions headless Shopify.
Shopify plus offre une solide collection propriétaire d’API StoreFront, rendant possible le headless en permettant l’accès au contenu et aux composants de la plateforme.
Veuillez noter que Shopify plus ne prend pas officiellement en charge les sites Web sans tête et n’offre pas de nombreuses capacités et technologies axées sur la vitesse prêtes à l’emploi. Ce n’est pas surprenant – la plate-forme est conçue pour gérer votre inventaire, vos prix et vos données, et la mise en œuvre de ces technologies nécessite souvent beaucoup d’efforts. Cependant, avec quelques mises en garde, Shopify plus reste un excellent choix car il permet aux détaillants de passer sans tête et de mettre en œuvre des tactiques clés centrées sur la vitesse.
Shopify plus pros
- Excellentes API pour les informations sur les produits avec l’API Storefront, Shopify plus offre une référence décente pour les produits et la gestion des commandes, et les API sont bien documentées.
- Format GraphQL API Storefront API est disponible dans le format GraphQL moderne et évolutif.
Shopify plus inconvénients
- Aucune infrastructure PWA prête à l’emploi Shopify plus ne prend pas en charge les PWA nativement. Cependant, certains marchands exécutent des PWA sur la plateforme. Pour ce faire, le magasin peut nécessiter un backend pour Frontend (BFF), qui vous permet d’exécuter des microservices entre l’API StoreFront et le frontend PWA. C’est un moyen d’optimiser les API et d’éviter d’en créer des distinctes pour chaque client (et de minimiser la quantité de logique côté client).
- Shopify plus prêt à l’emploi n’offre aucune solution propriétaire Accelerated Mobile pages (AMP) (bien que la mise en œuvre d’AMP soit possible avec des applications payantes de Shopify App Marketplace).
- Bien que Shopify dispose d’API décentes autour des produits, il n’existe pas de couverture API complète pour beaucoup d’autres choses. Par exemple, bien que le panneau de contrôle Shopify plus permette à un commerçant de définir les éléments dans le menu de navigation du site, il n’existe pas d’API pour obtenir ces éléments de menu. Une implémentation sans tête Shopify plus n’offre pas un moyen propre d’y accéder sans un peu de lutte d’armes et de solutions de contournement.
- La limitation de Shopify plus limite le nombre de demandes que vous pouvez faire en tant qu’utilisateur unique. Shopify plus a un en-tête spécial pour les appels API, de sorte que la couche BFF n’est pas comptée comme un seul utilisateur. Cependant, en raison des problèmes de couverture API mentionnés ci-dessus, les requêtes peuvent ne pas toujours être des appels API réels, et la couche BFF les comptera toujours comme provenant d’un seul utilisateur. Cela se produit même si la couche qu’il proxie le trafic pour de nombreux utilisateurs.
Comment Edgio (Layer0) peut simplifier le processus
Nous comprenons que la lecture de tous ces acronymes technologiques à trois lettres PWA, SSR, AMP et BFF peut vous faire tourner la tête, sans parler de la mise en œuvre de ces technologies par vous-même pourrait être un peu compliqué. Edgio (Layer0) gère tout cela pour vous d’une manière performante et évolutive qui nécessite peu ou pas de DevOps ou de maintenance.
Chez Edgio (Layer0), nous nous engageons à aider nos clients à gagner en visibilité, en portée, en revenus et en satisfaction client avec la seule plate-forme qui garantit des chargements de page inférieurs à la seconde pour les sites Web de commerce électronique basés sur des bases de données.
Nous aidons les sites Web de commerce électronique complexes et dynamiques à atteindre des vitesses inférieures à la seconde tout en augmentant la vitesse de développement et la croissance des résultats et en réduisant les coûts DevOps.
Nous ne gagnons pas à moins que nos clients ne le fassent. Nous avons des magasins Shopify instantanés dans notre portefeuille qui ont fait le saut de foi pour sécuriser leur position dans le paysage hautement concurrentiel du commerce électronique.
Comment Planet Blue a lancé avec succès une boutique instantanée Shopify plus sur Moovweb XDN
Planet Blue est passé de transitions de navigation de 16 secondes à 500 millisecondes sur Layer0 (Edgio)
Planet Blue est passé d’un fournisseur à un seul magasin de vêtements biologiques sélectionnés à un designer international et détaillant de vêtements omnicanaux. Leur boutique instantanée Shopify sur le ç leur permet d’offrir une expérience d’achat supérieure.
Avant de se lancer sur tayer0, les pages mobiles de Planet Blue ont mis 10 secondes à se charger. Plus de 70% du trafic mobile du détaillant a sérieusement impacté ses taux de conversion. Planet Blue a compris qu’une refonte de son expérience mobile était nécessaire pour répondre aux demandes des clients et rester compétitif. Le lancement sur Layer0 a réduit le temps de navigation de 95% (16sec → 0.5sec sur ordinateur et 10sec → 0.5sec sur mobile), donnant l’impression d’un catalogue en ligne sans friction lorsque les utilisateurs naviguent sur le site.
Résultats de Planet Blue avec Layer0:
- 31% YoY Lift dans le taux de conversion avec un site instantané sur la Layer0
- transitions 16s → 0.5s réduisant les vitesses de 97% sur le bureau
- transitions 10s → 0.5s réduisant les vitesses de 95% sur mobile
- réduction de plus de 60 % des chargements de la première page en moyenne sur tous les périphériques
- augmentation de 20 % ou plus des taux de satisfaction des clients avec le chargement des pages en un clin d’œil
- Une PWA de commerce électronique ultra-rapide construite avec React Storefront
- Rendu côté serveur et prise en charge AMP
- Prélecture prédictive
- CDN-as-JavaScript pour optimiser les taux de réussite du cache pour le contenu dynamique à la périphérie afin que le magasin puisse prévoir les clics de l’acheteur 5 secondes à l’avance.
Résumé
La transition vers une architecture de commerce sans tête est une initiative majeure pour de nombreux détaillants : Macy’s, Walmart, Target, Nike, Airbnb et bien d’autres ont déjà fait le changement. La tendance gagne du terrain pour trois raisons principales : elle offre une liberté par rapport aux limites de l’outil frontend de la plateforme de commerce électronique, permet la mise en œuvre de technologies Web de pointe qui améliorent la vitesse du site Web et le référencement, et permet des implémentations faciles de cas d’utilisation futurs.
Avec quelques mises en garde discutées ci-dessus, Shopify plus se prête bien à la construction d’un magasin sans tête et à la mise en œuvre de technologies clés centrées sur la vitesse. Pouvez-vous vous permettre d’être laissé pour compte ?
