Home Articles techniques Le secret derrière les boutiques Shopify plus incroyablement rapides
Applications

Le secret derrière les boutiques Shopify plus incroyablement rapides

About The Author

Outline

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 est longue et continue, et l’adoption à grande échelle 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 inférieur à la 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 grands 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 que votre boutique se classe plus haut dans les SERPs 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 plateformes 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 sur l’optimisation de la vitesse du site Web pour les clients de 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 frontale d’un site (c’est-à-dire la couche de présentation) est découplée de son infrastructure dorsale. 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

Going Headless 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 entraîne des taux de conversion et des améliorations de classement. Le commerce électronique sans tête, également connu sous le nom d’architecture de microservices, est presque un moyen infaillible 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 du contenu, le frontend peut être plus rapide et plus réactif que celui qui laisse le travail dur au navigateur.

2. Liberté de choix

De nombreuses plateformes de commerce électronique offrent à leurs utilisateurs des frontends propriétaires. Shopify plus n’est pas différent et propose une sélection de thèmes responsive basés sur le langage de modélisation Liquid de Shopify. En allant sans tête, vous pouvez complètement vous débarrasser des chaînes de la dépendance vis-à-vis d’un fournisseur et aller au-delà de l’outillage frontend de la plateforme. 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 la pérennité du magasin. Vous possédez le code frontend et pouvez le développer et y investir en toute confiance. Cela vous permet de le déplacer vers une autre plateforme 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 également 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 en charge cette fonctionnalité prête à l’emploi.

5. Prise en charge des cas d ‘ utilisation et des points de terminaison futurs

Avec un frontend sans tête comme progressive Web Apps (PWA)/Single-page applications (spas), l’opérateur peut pérenniser le magasin, ajouter librement de nouveaux points de terminaison et développer des fonctionnalités supplémentaires. Tout ce que vous avez à faire est de vous connecter aux API. Vous pouvez ajouter pratiquement n’importe quel appareil ou plate-forme comme point de terminaison et passer à la caisse pour votre magasin en allant sans tête.

Le secret derrière les magasins Shopify plus les plus rapides

Passer sans tête est la base pour 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, un référencement et des revenus maximaux.

Frontaux PWA portables

En allant sans tête et en couplant Shopify plus avec un frontend portable PWA, vous pouvez obtenir des vitesses de navigation ultra-rapides sur le site Web sur les appareils mobiles. Avec PWA, vos clients bénéficieront d’une expérience améliorée de transitions de pages instantanées. Aussi rapides que les transitions de navigation des PWA, leurs premiers chargements ont tendance à prendre plus de temps que les sites Web traditionnels à 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 PWAs 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 luttent pour 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 calcul de périphérie, un site qui utilise SSR peut atteindre des temps TTFMP presque instantanés.

La SSR garantit aux visiteurs provenant d’e-mails, de médias sociaux et de références une expérience de premiers chargements rapide. Grâce à la prise en charge des SSR, le PWA offre une expérience améliorée de chargement de la première page ultra-rapide et de transitions de page instantanées 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 SEO, 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 les robots d’exploration 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 afficher 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 n’est pas fourni avec la prise en charge SSR intégrée.

Pages mobiles accélérées (AMP)

Google AMP est un framework open-source pour créer des 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, c’est ainsi qu’elles sont livrées rapidement.

Shopify plus n’offre pas la prise en charge AMP ou True SSR prête à l’emploi, ce qui entrave considérablement votre capacité à optimiser les chargements de 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 le frontend. Plus à ce sujet est ci-dessous.

Backend 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 PWA ou une application mobile 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 interface peut avoir besoin d’orchestrer des appels vers plusieurs services et/ou de reformater les données de réponse pour mieux s’adapter à 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 d’échec du cache.

Pour les clients mobiles, trop de requêtes HTTP coûtent cher en termes de temps, ajoutant des millisecondes inutiles à chaque appel. Pour minimiser le nombre de requêtes, le frontend a généralement tendance à obtenir les 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 certaine logique d’interface utilisateur est traitée au niveau BFF.

BFF et vitesse de développement
Un BFF augmente la vélocité des développeurs en laissant des équipes de développement distinctes 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 plate-forme 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 frontal et dorsal basé sur BFF

Préextraction prédictive et CDN avec Edge computing

Le préchargement prédictif est une fonctionnalité avancée utilisée pour pré-mettre en cache et afficher la page que les visiteurs sont les plus susceptibles de visiter avant de cliquer dessus. Un CDN moderne avec des capacités de calcul de périphérie 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 touche.

En préchargeant et en diffusant des données dynamiques vers 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 d’accès au cache de 95%+ pour le contenu dynamique à la périphérie, tandis que le site Web de commerce électronique moyen a un taux d’accès au cache moyen de 15%. Cette différence, associée à la prélecture prédictive, maintient les grands sites de commerce électronique de 5 secondes d’avance sur l’acheteur, peu importe où ils tapent.

Est-il difficile d’aller sans tête avec Shopify plus?

Le choix d’une plateforme de commerce électronique pour gérer votre magasin devrait tenir compte de la prise en charge par la plateforme des sites Web sans tête et des technologies permettant des sites inférieurs à la seconde. De nombreuses plateformes de commerce électronique sont monolithiques et 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 sans tête, Shopify plus permet aux détaillants d’exécuter des magasins sans tête et d’utiliser un cadre frontal différent (tel que React Storefront) ou un CMS sans tête comme Contentful, qui est utilisé par de nombreuses versions sans tête Shopify.

Shopify plus offre une collection propriétaire solide d’API de vitrine, rendant possible le passage sans tête 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 fonctionnalités et technologies prêtes à l’emploi axées sur la vitesse. 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 est toujours un excellent choix car il permet aux détaillants d’aller relativement facilement 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 de l’API GraphQL l’API Storefront est disponible dans le format moderne et évolutif GraphQL.

Shopify plus contre

  • Aucune infrastructure PWA prête à l’emploi Shopify plus ne prend pas en charge les PWA nativement. Cependant, certains commerçants exécutent des PWA sur la plateforme. Pour ce faire, le magasin peut nécessiter un Backend for Frontend (BFF), qui vous permet d’exécuter des microservices entre l’API de la vitrine et le frontend PWA. C’est une façon 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 n’ offre aucune solution exclusive de pages mobiles accélérées (AMP) (bien que la mise en œuvre d’AMP soit possible avec des applications payantes de Shopify App Marketplace).
  • Couverture API alors que Shopify a des API décentes autour des produits, et il n’y a pas de couverture API complète pour beaucoup d’autres choses. Par exemple, alors que le panneau de configuration Shopify plus permet à 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 bras de fer et de solutions de contournement.
  • Throttling 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 d’API mentionnés ci-dessus, les requêtes peuvent ne pas toujours être de véritables appels d’API, et la couche BFF les comptera toujours comme provenant d’un seul utilisateur. Cela se produit même si la couche, elle proxyde 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 pages inférieurs à la seconde pour les sites 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 geste 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 unique de vêtements biologiques sélectionnés à un designer international et détaillant de vêtements omnicanal. Leur Shopify Store instantané sur le ç leur permet d’offrir une expérience d’achat supérieure.

Avant de se lancer sur tayer0, le chargement des pages mobiles de Planet Blue prenait 10 secondes. Plus de 70 % du trafic mobile du détaillant a eu un impact important sur 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:

  • Hausse de 31% par an du taux de conversion avec un site instantané sur le Layer0
  • transitions de 16 s → 0,5 s réduisant les vitesses de 97% sur le bureau
  • transitions de 10s → 0,5s réduisant les vitesses de 95% sur mobile
  • réduction de plus de 60 % des chargements de première page en moyenne sur tous les appareils
  • augmentation de plus de 20 % des taux de satisfaction client avec chargement des pages en un clin d’œil

  • Un PWA de commerce électronique incroyablement rapide construit avec React Storefront
  • Rendu côté serveur et prise en charge AMP
  • Préextraction prédictive
  • CDN-as-JavaScript pour optimiser les taux de succès du cache pour le contenu dynamique à la périphérie afin que le magasin puisse prédire 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 d’autres ont déjà fait le changement. La tendance gagne du terrain pour trois raisons principales : elle offre une liberté par rapport aux limitations de l’outillage frontal de la plateforme de commerce électronique, permet la mise en œuvre de technologies Web de pointe qui boostent la vitesse du site Web et le SEO, et permet des implémentations faciles des futurs cas d’utilisation.

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 ?