Alors que la concurrence dans le commerce électronique devient de plus en plus féroce, les détaillants sont à l’affût de nouvelles façons de se démarquer, et la frontière concurrentielle se déplace régulièrement vers la technologie. L’avènement du multicanal a rendu le parcours client très complexe, mais une chose est certaine : la vitesse compte plus que jamais. L’annonce la plus récente de Google de la mise à jour de l’expérience de la 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 – la 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 frontaux portables modernes, de rendu côté serveur (SSR), de pages mobiles accélérées (AMP) et de technologies CDN modernes, les chargements de page en moins de 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 l’AMP et comment fonctionne-t-il
- Les entreprises de vente au détail surpassent leurs concurrents de plusieurs milliards de dollars
- Qu’est-ce que le SSR et comment fonctionne-t-il ?
- Que sont les CDN modernes et l’informatique de périphérie ?
- Résumé
L’importance de la vitesse du site Web pour le commerce électronique
La vitesse du site impacte toute la stratégie digitale, de la visibilité (SEO et SEM) au trafic, à l’expérience utilisateur et finalement aux conversions et revenus. Cela résulte directement de l’accent croissant de Google sur le mobile et la vitesse.
Le géant de la recherche a été dans une quête de dix ans pour clarifier que la vitesse du site Web compte. Ils ont déployé plusieurs mises à jour axées sur le mobile pour solidifier l’importance de la vitesse des sites Web mobiles comme cruciale pour un classement élevé dans les résultats de recherche et le SEM.
Ces efforts incluent l’indexation mobile-first en 2016, AMP avec les annonces mobiles en 2017, la mise à jour de vitesse en 2019 et la prochaine mise à jour de page Experience Ranking qui sera mise en ligne début 2021. Enfin, le Google badge of Shame sera bientôt déployé et signalera les sites Web notoirement lents et avertira les utilisateurs qui naviguent vers 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 inclut divers outils pour faciliter et mesurer la vitesse du site Web, tels que PageSpeed Insights, AMP, le calculateur d’impact et le tableau de bord de vitesse mobile, pour n’en nommer que quelques-uns.
Source : tester 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 le chiffre d’affaires annuel 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.
Programme de démonstration 1-en-1
Planifiez une conversation consultative pour découvrir comment le XDN Edgio (Layer0) peut vous aider à obtenir 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 affirment que la vitesse du site a un impact sur leur volonté d’acheter. Amazon a calculé qu’une seconde de retard dans le chargement de la page coûterait 1,6 milliard de dollars 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 les pages de description de produits, le contenu se charge rapidement et sans effort. De même, le processus de paiement doit être rapide et simple. Cela construit les bases du réengagement et rend l’acheteur enclin à 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 du code désordonné, une page mobile fait en moyenne 214 requêtes serveur , dont une centaine sont liées à la publicité. En conséquence, une page prend en moyenne 15,3 secondes à charger sur un appareil mobile (en 4G). Certains détaillants parmi les plus compétitifs peuvent réduire les temps de chargement des pages mobiles à seulement 3-5 secondes, mais il reste encore des améliorations à apporter. 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
La première pierre de construction pour fournir des charges 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 extrêmement 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 Edge computing pour réduire chaque milliseconde possible de 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 les sites Web des détaillants provient de la recherche organique, la prise en charge de l’AMP et de la 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 ultra-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 de AMP et SSR pour des premiers chargements rapides et PWA pour des transitions de navigation ultra-rapides. Le problème est qu’il est plus facile à dire qu’à faire, car il faut que les sites Web de commerce électronique d’entreprise ajoutent la prise en charge SSR, ce qui est une tâche complexe en soi, et maintiennent deux sites Web distincts, l’un pour la PWA (généralement écrit en React, Angular, vue, Next ou Nuxt) et l’autre en AMP HTML.
Les pages AMP sont si rapides car elles sont pré-récupérées, 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.
Frontend portable PWA pour une navigation ultra-rapide
PWA prend le relais pour fournir des vitesses de navigation instantanées lorsque le visiteur navigue sur les pages suivantes du site Web. De cette façon, les consommateurs bénéficient d’une expérience améliorée de chargements rapides de la première page et de transitions instantanées de page 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 de Edge computing vous permettent de diffuser des données dynamiques à la périphérie et de là vers les navigateurs des utilisateurs avant qu’ils ne les 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 pressions 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 l’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 500 ms. AMP crée de meilleures expériences 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, ce qui explique comment elles sont livrées si rapidement.
Les avantages de l’AMP
Les pages AMP permettent des chargements de page médians de 500 ms pour le trafic provenant du SERP de Google. Ces vitesses sont possibles parce que les serveurs Google pré-récupèrent et pré-restituèrent 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 dans la réduction des taux de rebond, 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 la donne
La combinaison AMP et progressive Web Apps (PWA) couvre l’ensemble du parcours du client, de la recherche, ce qui le rend rapide de bout en bout. L’acheteur charge la page AMP à partir d’un SERP Google, puis, tout en naviguant 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 prend des mesures (par exemple, clique n’importe où sur le site), la PWA a déjà pris 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 de nouvelles navigations.
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 en termes de développement. La prise en charge de la technologie implique la création de deux versions de votre site : une dans le langage dans lequel votre frontend est écrit (qui a tendance à être lourd en JavaScript ou en CSS) et une autre qui suit les normes du projet AMP. Et ce n’est que le début : chaque correction de bogue, changement de disposition, nouvelle fonctionnalité, etc peut nécessiter d’être propagé à la fois aux bases de code AMP et PWA.
Le framework React Storefront et Layer0 facilitent grandement la prise en charge d’AMP par les développeurs dans leurs applications React.
Les entreprises de vente au détail surpassent leurs concurrents de plusieurs milliards de dollars
En utilisant la technologie Layer0 AMP, le détaillant de mode AKIRA fournit non seulement des premiers chargements instantanés à partir 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 chargeait en moyenne de 4,8 secondes, et les pages suivantes se chargeaient 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 une technologie avancée intégrée à Edgio (Layer0) : une PWA de commerce électronique avec rendu côté serveur et conversion AMP, Layer0 CDN-AS-JavaScript fournissant un taux de réussite de cache de plus 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 frontend pour 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 % à 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 été augmenté de 36 points, surpassant 75 % des sites sur le Web et offrant une expérience de navigation client améliorée.
Lisez l’étude de cas complète AKIRA .
Annie Selke est un autre exemple remarquable de la façon dont investir dans la vitesse du site Web peut aider un détaillant à grimper sur la page des résultats des moteurs de recherche.
Avant de sauter sur Edgio (Layer0), le détaillant de maison et de 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 devance ses concurrents de plusieurs milliards de dollars.
Si vous êtes intéressé, il y a aussi une étude de cas d’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 facile à porter. Ce peut être exactement ce dont ils ont besoin pour résister à la concurrence incessante des géants du commerce électronique comme Amazon, Nordstrom et Zappos.
Plus le site est rapide, plus il se classe, comme un SEO instantané et garanti. Il y a beaucoup d’exemples dans le portefeuille Edgio (Layer0) qui le prouvent. AKIRA, Annie Selke et Shoe Carnival ne sont que quelques-uns qui dépassent de nombreux grands noms, y compris Amazon.
Layer0 offre une combinaison de technologies avancées pour mettre le commerce électronique à la vitesse:
- PWA de commerce électronique avec prise en charge du rendu côté serveur et conversion AMP
- Prélecture 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 maintient le site Web 5 secondes d’avance sur l’acheteur.
- Le backend Layer0 Serverless-JavaScript pour frontend optimise les serveurs et les API.
Programme de démonstration 1-en-1
Planifiez une conversation consultative pour découvrir comment Edgio (Layer0) peut vous aider à obtenir des chargements de pages inférieurs à la seconde. Cliquez ici !
Qu’est-ce que le rendu côté serveur et comment fonctionne-t-il ?
Le rendu côté serveur (alias SSR) est une technique populaire pour le rendu d’une page PWA normalement côté client uniquement sur le serveur, puis l’envoi d’une page entièrement rendue au navigateur. Le bundle JavaScript du client peut alors prendre le relais et la 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 aide au référencement et à fournir des métadonnées aux canaux de médias sociaux.
Les avantages du SSR
SSR peut également souvent aider à la performance, car une application entièrement chargée est envoyée depuis le serveur à la première requête. 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 frontaux 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 ont le plus de sens pour votre cas d’utilisation.
Que sont les CDN modernes et l’informatique de périphérie ?
L’informatique de périphérie est une philosophie de mise en réseau qui vise à rapprocher l’informatique de la source des données et à réduire la latence et 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 d’informatique de périphérie 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 CDN le plus proche de l’utilisateur (de sorte qu’un utilisateur à San Francisco livre du contenu à partir d’un point de vente dans le sud de 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 à plusieurs endroits 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 frontend 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 % ou plus pour le contenu dynamique à la périphérie.
Les capacités de Edge computing 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 n’appuie sur un lien vers elles.
Résumé
Les 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 recherche incroyablement rapide. Mais ce n’est que la moitié de la bataille. Pour mettre votre site Web à jour, 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 terminaux portables modernes, le rendu côté serveur (SSR) et les CDN avec des capacités de Edge computing.
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 fournit un taux de réussite de cache de 95 % ou plus pour le contenu dynamique, contre seulement 15 % pour les autres CDN.
Layer0 fournit constamment des charges médianes de pages inférieures à 500 ms pour les grands sites Web de commerce électronique avec des dizaines de balises et de scripts, sans parler des prix dynamiques et des recherches d’inventaire en temps réel. Ces gains de vitesse sont connus pour conduire à 15 à 30% de remontées de conversion, une meilleure visibilité, une meilleure portée et, finalement, des revenus plus élevés.
Planifiez une conversation consultative avec un expert en vitesse de site pour voir comment nous pouvons vous aider à obtenir un avantage concurrentiel avec un site Web de commerce électronique instantané!
