Home Blogs Speed vend : le commerce électronique utilise AMP, SSR, PWA et Edge Computing pour passer à la cinquième vitesse
Applications

Speed vend : le commerce électronique utilise AMP, SSR, PWA et Edge Computing pour passer à la cinquième vitesse

About The Author

Outline

Alors que la concurrence dans le commerce électronique se développe de plus en plus, les détaillants sont à la recherche de nouvelles façons de se démarquer, et la frontière concurrentielle se déplace progressivement vers la technologie. L’avènement du multicanal a rendu le parcours client très complexe, mais une chose est certaine : la rapidité compte plus que jamais. L’annonce la plus récente de Google de la mise à jour de l’expérience de page, un nouvel algorithme de classement conçu pour juger les pages Web en fonction de la façon dont les utilisateurs perçoivent l’expérience d’interaction avec eux, est un signe clair que le géant de la recherche met l’accent sur la vitesse perçue vitesse à laquelle un utilisateur perçoit une page comme chargée.

Le nouveau parcours client pour le commerce électronique est instantané. 53% des visiteurs abandonneront un site web mobile s’il faut plus de trois secondes pour le charger. Dans le même temps, chaque retard d’une seconde dans les temps de chargement a été lié à une baisse de 7% des conversions. Les nouvelles technologies permettent maintenant des vitesses de site Web qui étaient auparavant impossibles. Avec une combinaison de frontends portables modernes, de rendu côté serveur (SSR), de pages mobiles accélérées (AMP) et de technologies CDN modernes, les chargements de pages inférieurs à la seconde ne sont pas seulement possibles : ils deviennent le nouveau champ de bataille concurrentiel dans le commerce électronique.

Table des matières

  • L’importance de la vitesse du site Web pour le commerce électronique
  • Vitesse = argent
  • Qu’est-ce que AMP et comment fonctionne-t-il
  • Les start-ups du secteur de la vente au détail surpassent leurs concurrents, qui ont plusieurs milliards de dollars
  • Qu’est-ce que la SSR et comment fonctionne-t-elle ?
  • Que sont les CDN modernes et l’Edge computing ?
  • Résumé

L’importance de la vitesse du site Web pour le commerce électronique

La vitesse du site web impacte l’ensemble de la stratégie digitale, de la visibilité (SEO et SEM), en passant par le trafic, l’expérience utilisateur et finalement les conversions et revenus. Cela résulte directement de l’attention croissante de Google sur le mobile et la vitesse.

Le géant de la recherche a été sur une quête de dix ans pour clarifier que la vitesse du site Web est importante. Ils ont déployé plusieurs mises à jour axées sur les mobiles pour solidifier l’importance de la vitesse des sites Web mobiles comme cruciale pour se classer haut dans les résultats de recherche et SEM.

Ces efforts comprennent l’indexation mobile-first en 2016, AMP avec des annonces mobiles en 2017, la mise à jour de vitesse en 2019 et la prochaine mise à jour du classement page Experience qui sera disponible début 2021. Enfin et surtout, le badge de la honte Google sera bientôt déployé et signalera les sites Web notoirement lents et avertira les utilisateurs naviguant sur le site à partir de la page de résultats des moteurs de recherche (SERP).

En toute justice, en plus d’introduire des changements algorithmiques et de faire honte aux sites Web pour souligner le rôle de la vitesse du site, Google a également créé une gamme d’outils pour faire d’un web plus rapide une réalité. Cela comprend divers outils pour faciliter et mesurer la vitesse du site Web, tels que PageSpeed Insights, AMP, le calculateur d’impact et la carte de score de vitesse mobile, pour n’en nommer que quelques-uns.

Source : Test My site

Test My site de Google est un outil qui vous permet de faire un audit rapide de votre site et d’estimer l’impact potentiel sur les revenus annuels si les recommandations de vitesse du site sont mises en œuvre.

L’effort de création de ces outils est dans l’intérêt de Google puisque 58% des recherches et 65% des revenus publicitaires de l’entreprise proviennent du mobile.

Horaire 1-on-1 Demo

Planifiez une conversation consultative pour apprendre comment Edgio (Layer0) XDN peut vous aider à atteindre des chargements de pages inférieurs à la seconde. Cliquez ici !

Vitesse = argent

Il est de notoriété publique que la vitesse du site Web a un impact sur l’expérience client et les revenus, en particulier sur les appareils mobiles.70 % des consommateurs déclarent que la vitesse du site a un impact sur leur volonté d’achat. Amazon a calculé qu’une seconde de retard dans le chargement de la page coûterait 1,6 G$ de perte de revenus par an. Pour vendre plus, vous devez vous assurer que partout où un visiteur atterrit, par exemple, votre liste de produits ou vos pages de description de produits, le contenu se charge rapidement et sans effort. De même, le processus de paiement devrait être rapide et simple. Cela jette les bases d’un réengagement et incite l’acheteur à revenir et à acheter plus de vous.

Cependant, dans l’état actuel des choses, il devient de plus en plus difficile de fournir des expériences mobiles rapides. En plus de sites Web mal optimisés et gonflés avec des images surdimensionnées et un code désordonné, une page mobile fait en moyenne 214 requêtes serveur, dont une centaine sont liées à la publicité. Par conséquent, une page moyenne prend 15,3 secondes pour se charger sur un appareil mobile (sur 4G). Certains des détaillants les plus compétitifs peuvent réduire les temps de chargement des pages mobiles à seulement 3-5 secondes, mais il reste encore de la place à l’amélioration. Et ce n’est pas un problème que la 5G peut résoudre.

C’est le compromis irréconciliable entre les publicités, la personnalisation, l’analyse et le suivi et une excellente expérience utilisateur

La base de la vitesse

Le premier élément de construction pour fournir des chargements de première page ultra-rapides est d’utiliser AMP pour le trafic de recherche et SSR pour les autres canaux. La deuxième étape consiste à assurer des chargements de pages ultérieurs incroyablement rapides. Ceci est fait avec des frontaux portables conçus pour la vitesse, tels que progressive Web Apps (PWA). Le dernier pilier est un CDN moderne avec des capacités de calcul de périphérie pour réduire chaque milliseconde possible les charges de page.

En fait, Google a recommandé un parcours client idéal dans lequel un site Web fournit d’abord une page AMP aux utilisateurs de recherche, puis les fait passer à la version PWA complète du site sur les pages suivantes. Et puisque près de la moitié du trafic sur le site Web des détaillants provient de la recherche organique, la prise en charge des programmes AMP et PWA est logique.

Ce sujet a été largement discuté à Google I/O 2017.

Avec les PWA, les développeurs peuvent offrir des expériences très attrayantes et rapides qui rivalisent avec les applications natives. Cependant, en ce qui concerne le trafic généré par la recherche, AMP est l’option la plus rapide possible avec des temps de chargement médians d’ une demi-seconde.

Ainsi, en un mot, grimper plus haut dans SERP nécessite une combinaison d’AMP et de SSR pour des premières charges rapides et de PWA pour des transitions de navigation ultra-rapides. Le problème est que c’est plus facile à dire qu’à faire, car il faut que les sites de commerce électronique d’entreprise ajoutent le support SSR, ce qui est une tâche complexe en soi, et maintiennent deux sites Web distincts, un pour la PWA (généralement écrit en React, Angular, vue, Next, ou Nuxt) et l’autre dans AMP HTML.

Les pages AMP sont si rapides car elles sont préextraites, pré-rendues et mises en cache par un CDN (Content Delivery Network). Le cache AMP de Google fournit la plupart des pages AMP.

Ainsi, les fondements de la vitesse du site Web se composent de ces trois éléments clés:

SSR + AMP pour des premiers chargements rapides

À partir de SERP, les utilisateurs sont dirigés vers une version AMP de la page pour des chargements de première page incroyablement rapides. SSR fait de même pour les visiteurs de tous les autres canaux, y compris les e-mails, les réseaux sociaux et les références.

Interface portable PWA pour des vitesses de navigation ultra-rapides

PWA prend le relais pour fournir des vitesses de navigation instantanées à mesure que le visiteur navigue à travers les pages suivantes du site Web. De cette façon, les consommateurs bénéficient d’une expérience améliorée de chargement de première page ultra-rapide et de transitions de page instantanées au-delà de la première page.

Préchargement prédictif + CDN moderne

Le préchargement prédictif et un CDN moderne avec des capacités d’informatique de périphérie vous permettent de diffuser des données dynamiques vers la périphérie et de là vers les navigateurs des utilisateurs avant qu’ils ne le demandent. Cela vous permet de mettre en cache et de servir ce que les consommateurs attendent – les données JSON qui se traduisent par les différents produits que vous avez en stock, leurs prix et leurs informations. C’est ainsi que les sites Web de commerce électronique et d’autres sites Web basés sur des bases de données peuvent offrir des expériences instantanées et rester 5 secondes en avance sur les taps des consommateurs (par exemple, précharger une page de description de produit sur laquelle un utilisateur est le plus susceptible de cliquer avant de cliquer sur le lien).

Maintenant que nous comprenons les trois piliers qui forment la base de la vitesse du site Web, nous pouvons plonger plus profondément dans chacun.

Qu’est-ce que AMP et comment fonctionne-t-il

Google AMP est un framework open-source pour la création de pages web mobiles avec des temps de chargement médians de 500ms. AMP crée des expériences meilleures et plus rapides sur le Web mobile en simplifiant le HTML et en appliquant des limitations strictes sur CSS et JavaScript. Ces pages sont ensuite mises en cache et pré-rendues sur le serveur Google, c’est ainsi qu’elles sont livrées si rapidement.

Les avantages de AMP

Les pages AMP permettent des charges de page médianes de 500 ms pour le trafic provenant de SERP de Google. Ces vitesses sont possibles parce que les serveurs Google ont pré-extrait et pré-rendu le contenu AMP dans le navigateur d’un utilisateur avant de cliquer sur le lien de la page AMP. Pour le site de commerce électronique moyen, la recherche Google (organique et payante) représente environ 50% de leur trafic, de sorte que ces gains peuvent s’appliquer à un grand pourcentage de votre trafic.

Les sites qui utilisent AMP voient également des avantages en termes de taux de rebond réduits, car les utilisateurs qui peuvent généralement rebondir en attendant le chargement d’une page bénéficieront désormais d’une expérience ultra-rapide.

Comment AMP + PWA change le jeu

La combinaison AMP et progressive Web Apps (PWA) couvre l’ensemble du parcours client, de la recherche, ce qui le rend rapide de bout en bout L’acheteur charge la page AMP à partir d’un Google SERP, puis, lors de la navigation sur la page AMP, les ressources nécessaires à la version PWA du site se chargent en arrière-plan. De cette façon, lorsque l’utilisateur agit (par exemple, clique n’importe où sur le site), le PWA a déjà une longueur d’avance sur le préchargement du contenu pour la page suivante, et à partir de là, toutes les transitions restantes sont des transitions de navigation rendues côté client et non des navigations fraîches.

Pourquoi tout le monde n’utilise-t-il pas AMP ?

La combinaison AMP et PWA est un match fait au paradis pour la vitesse, mais c’est un cauchemar de développement. La prise en charge efficace de la technologie implique la création de deux versions de votre site : une dans la langue dans laquelle votre interface est écrite (qui a tendance à être JavaScript-heavy ou CSS-heavy) et une autre qui suit les normes du projet AMP. Et ce n’est que le début : chaque correction de bogue, changement de mise en page, nouvelle fonctionnalité, etc. Peut nécessiter d’être propagé aux bases de code AMP et PWA.

Le framework React Storefront et Layer0 permettent aux développeurs de prendre en charge AMP dans leurs applications React.

Les start-ups du secteur de la vente au détail surpassent leurs concurrents, qui ont plusieurs milliards de dollars

En utilisant la technologie Layer0 AMP, le détaillant de mode AKIRA fournit non seulement les premiers chargements instantanés de la recherche, mais surpasse également Amazon, Nordstrom, Zappos et d’autres grandes marques pour les phrases clés.

Avant d’utiliser la technologie Layer0, la première page d’AKIRA se charge de façon impressionnante en moyenne 4,8 secondes, et les pages suivantes sont chargées en 2,5 secondes.

AKIRA a été en mesure d’améliorer ces résultats et d’obtenir des chargements de pages inférieurs à la seconde en utilisant la technologie avancée intégrée dans Edgio (Layer0): un PWA de commerce électronique avec rendu côté serveur et conversion AMP, Layer0 CDN-as-JavaScript offrant un taux de réussite de 95%+ pour le contenu dynamique à la périphérie (et gardant le site Web 5 secondes d’avance sur l’acheteur), et le backend JavaScript sans serveur de Layer0 pour le frontend afin d’optimiser les serveurs et les API.

Avec Edgio (Layer0), le détaillant a vu un coup de pouce immédiat dans de nombreux domaines:

  • Les premiers temps de chargement ont chuté de 70,8% à près d’une seconde
  • Les transitions de navigation ont chuté à un incroyable 500 ms.
  • La moitié des pages du site Web se chargent maintenant en moins de 500 ms.
  • Le taux de conversion mobile a augmenté de 37,25%

Lighthouse est également un excellent reflet de ces améliorations : le score de performance d’AKIRA a obtenu un boost de 36 points, surpassant 75% des sites sur le Web et offrant une expérience de navigation améliorée pour les clients.

Lire l’étude de cas complète AKIRA.

Annie Selke est un autre exemple stellaire de la façon dont investir dans la vitesse du site Web peut aider un détaillant à monter la page de résultats du moteur de recherche.

Avant de sauter sur Edgio (Layer0), la vendeuse maison et décoration Annie Selke n’apparaissait même pas au-dessus du pli des résultats de recherche Google. Aujourd’hui, avec une augmentation de 32% du trafic organique et une augmentation de 40,41% du trafic organique mobile, elle surpasse ses concurrents de plusieurs milliards de dollars.

Si vous êtes intéressé, il y a aussi une étude de cas Annie Selke sur notre site Web où nous allons dans le nitty-gritty.

Pour les détaillants en ligne comme AKIRA et Annie Selke, un site Web mobile performant est un fruit à faible coût. Cela peut être exactement ce dont ils ont besoin pour résister à la concurrence acharnée des géants du commerce électronique comme Amazon, Nordstrom et Zappos.

Plus le site est rapide, plus il se classe haut, comme un SEO instantané garanti. Il y a beaucoup d’exemples dans le portfolio Edgio (Layer0) qui le prouvent. AKIRA, Annie Selke et Shoe Carnival ne sont que quelques-uns qui surpassent de nombreux grands noms, dont Amazon.

Layer0 offre une combinaison de technologies de pointe pour mettre le commerce électronique à la vitesse:

  • ECommerce PWA avec prise en charge du rendu côté serveur et conversion AMP
  • Préextraction prédictive
  • CDN-as-JavaScript offrant un taux de réussite du cache de plus de 95 % pour le contenu dynamique à la périphérie qui garde le site Web 5 secondes d’avance sur l’acheteur.
  • Le backend Layer0 Serverless-JavaScript pour frontend optimise les serveurs et les API.

Horaire 1-on-1 Demo

Planifiez une conversation consultative pour apprendre comment Edgio (Layer0) peut vous aider à atteindre des chargements de pages inférieurs à la seconde. Cliquez ici !

Qu’est-ce que le rendu côté serveur et comment fonctionne-t-il ?

Server-side Rendering (alias SSR) est une technique populaire pour afficher une page PWA normalement côté client uniquement sur le serveur, puis envoyer une page entièrement rendue au navigateur. Le bundle JavaScript du client peut alors prendre le relais et le PWA peut fonctionner normalement. SSR traduit essentiellement les pages JavaScript en HTML, un langage que les robots de recherche et les navigateurs comprennent sur le serveur. Cela garantit que les navigateurs et les robots de recherche peuvent facilement livrer et indexer vos pages.

Un avantage majeur de l’utilisation de SSR a une application qui peut être crawlée et indexée correctement par chaque moteur de recherche. Cela facilite le référencement et fournit des métadonnées aux canaux de médias sociaux.

Les avantages de la SSR

SSR peut également souvent aider à améliorer les performances car une application entièrement chargée est envoyée du serveur à la première demande. Pour les applications non triviales, cependant, votre kilométrage peut varier parce que SSR nécessite une configuration qui peut devenir un peu compliquée et créer une plus grande charge de serveur. Heureusement, il existe des services et des outils, comme les frontends isomorphes et Layer0 avec support SSR prêts à l’emploi.

En fin de compte, l’utilisation du rendu côté serveur pour votre site Web dépend de vos besoins spécifiques et des compromis qui conviennent le mieux à votre cas d’utilisation.

Que sont les CDN modernes et l’Edge computing ?

L’Edge computing est une philosophie de réseau axée sur le rapprochement de l’informatique de la source de données et la réduction de la latence et de l’utilisation de la bande passante dans le processus. L’utilisation de nombreuses technologies différentes peut mettre en œuvre cela. Rapprocher le calcul de la périphérie du réseau (ordinateur d’un utilisateur, appareil IoT ou serveur de périphérie) minimise la quantité de communication longue distance qui doit se produire entre un client et un serveur.

CDN avec capacités de Edge computing Vous pouvez réduire le temps de trajet entre les serveurs du site Web et le navigateur de l’utilisateur en diffusant le contenu vers le point de présence (POP) CDN le plus proche de l’utilisateur (de sorte qu’un utilisateur à San Francisco a livré du contenu à partir d’un point de vente dans South San Francisco tandis qu’un utilisateur à New York reçoit du contenu à partir d’un point de vente à Brooklyn).

Les avantages des CDN avec Edge computing

Les CDN stockent une version mise en cache de votre site Web dans plusieurs emplacements pour assurer un chargement plus rapide des pages. Chacun de ces POP contient plusieurs serveurs de mise en cache responsables de la livraison de contenu aux visiteurs à proximité.

Le CDN-as-JavaScript de Layer0 porte le concept à un autre niveau. C’est un CDN sensible aux applications qui comprend votre application. Il utilise le même langage que vos développeurs frontaux connaissent déjà et vous donne un contrôle total sur la mise en cache. En conséquence, les sites Web utilisant Layer0 voient des taux de réussite du cache de 95 %+ pour le contenu dynamique à la périphérie.

Les capacités de calcul de périphérie de Layer0 CDN-as-JavaScript vous gardent 5 secondes d’avance sur l’acheteur en préchargeant de manière prédictive les pages suivantes les plus probables et en les diffusant en périphérie avant qu’elles ne soient demandées, de sorte qu’elles soient mises en cache et prêtes pour l’utilisateur avant qu’il ne clique sur un lien vers elles.

Résumé

De longs temps de chargement peuvent ruiner l’expérience d’un utilisateur et le classement de recherche d’un site Web. AMP résout une partie de ce problème – il rend la première page de la recherche incroyablement rapide. Mais ce n’est que la moitié de la bataille. Pour que votre site Web soit à la vitesse supérieure, il faut aller plus loin et adopter une approche plus holistique – une combinaison de technologies telles que les pages mobiles accélérées (AMP), les frontends portables modernes, le rendu côté serveur (SSR) et les CDN dotés de capacités de calcul de périphérie.

Layer0 aide 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. Il inclut également un CDN-as-JavaScript qui offre un taux de réussite du cache de 95 % ou plus pour le contenu dynamique, contre seulement 15 % pour les autres CDN.

Layer0 fournit constamment des charges de pages médianes inférieures à 500 ms pour les grands sites Web de commerce électronique avec des dizaines de tags et de scripts, sans parler de la tarification dynamique et des recherches d’inventaire en temps réel. Ces gains de vitesse sont connus pour conduire à 15-30% de conversion des élévations, une meilleure visibilité, portée, et, finalement, chiffre d’affaires plus élevé.

Planifiez une conversation consultative avec un expert en vitesse du site pour voir comment nous pouvons vous aider à obtenir un avantage concurrentiel avec un site de commerce électronique instantané!