Au-delà de l’optimisation – les secrets des magasins Magento 2 les plus rapides

Source :nngroup.com

Un magasin de commerce électronique plus rapide et sans friction peut montrer à l’utilisateur plus de produits en une seule session. Cela, à son tour, augmente les taux de conversion. Dans un scénario idéal, le magasin et son interface devraient sortir du chemin et être seulement une toile de fond pour une expérience de magasinage exceptionnelle.

De plus, comme la plupart des magasins de commerce électronique, vous proposez probablement un produit dans un marché où les gens sont très sensibles aux prix. Ce qui aggrave les choses : vos concurrents peuvent offrir les mêmes produits à des prix similaires. Dans ce cas, votre classement SEO et votre expérience de site Web peuvent être parmi les quelques moyens restants pour vous différencier. Et ces deux-là sont plus connectés que de nombreux vendeurs ne le pensent.

Google privilégie les sites Web rapides

Avec la mise à jour Google page Experience qui approche, il est crucial de prêter une attention particulière à la vitesse de votre site Web. L’optimisation des sites Web de commerce électronique pour la vitesse a été identifiée comme l’une des principales initiatives pour de nombreux détaillants en 2020 et au-delà. Et lorsque la mise à jour algorithmique de l’expérience de page sera déployée, les sites plus lents glisseront rapidement dans les classements de recherche et la position SERP. Le moment est venu d’agir.

La première page des résultats de recherche de Google reçoit près de 95% du trafic web, ne laissant que 5% pour les pages SERP restantes. Et bien que Google ait toujours été très vague sur leur algorithme RankBrain et sur la façon dont ses différents composants ont été pondérés, nous savons avec certitude que la vitesse de départ de 2021 va jouer un rôle clé dans le classement des recherches. C’est très probablement la première fois dans l’histoire où Google ouvre le kimono sur les signaux spécifiques qui impactent les résultats de recherche.

Ne pas optimiser votre magasin Magento 2 pour la vitesse vous expose au risque de perdre du trafic organique et des clients potentiels. De nombreux magasins, même les grandes marques, qui ne prennent aucune mesure en 2020, peuvent voir leur trafic de recherche diminuer et subir des pertes de revenus substantielles. Les sites Web qui offrent des expériences plus fluides, meilleures et plus rapides commenceront à dominer les mots-clés organiques les plus recherchés.

Offrez des expériences exceptionnelles, pas seulement des produits

Comme de nombreuses autres plateformes de commerce électronique, Magento 2 a été initialement conçu avec une approche backend et data-first, et très peu d’accent sur l’expérience réelle du client final et la vitesse du site Web. Ils se concentrent sur les SKU, pas sur les personnes. Cela met le fardeau de l’optimisation de la vitesse du site Web sur les clients, intégrateurs de systèmes, concepteurs et développeurs des plateformes.

Que votre boutique fonctionne sur Magento 2 ou sur toute autre plate-forme de commerce électronique ou système backend populaire, si vous voulez offrir l’expérience la plus rapide, vous devrez implémenter des technologies web avancées axées sur la vitesse, et pour cela vous devez d’abord aller sans tête et construire un frontend portable.

Pour un aperçu complet de ce qu’est le commerce électronique sans tête et pourquoi il est fondamental pour les chargements de pages instantanés, regardez ce webinaire.

Lisez la suite pour les tactiques clés derrière les sites Web Magento les plus rapides.

La technologie derrière les magasins Speedy Magento 2

La vitesse du site est particulièrement importante pour le commerce électronique car les achats en ligne sont intrinsèquement une expérience très visuelle. Les magasins sont généralement des sites Web riches en images et la dernière chose que les acheteurs veulent voir est le chargement lent des pages de produits, des images granuleuses et du jank.

Lors de l’optimisation de votre magasin Magento 2 pour la vitesse, vous pouvez implémenter une gamme de tactiques pour le rendre plus rapide – utilisez un thème léger, optimisez les images, supprimez le code javascript bloquant le rendu etc Vous pouvez avoir toute une équipe optimisant votre site Web, mais le problème est que toutes ces techniques standard d’optimisation de la vitesse impliquent de peaufiner les choses qui se produisent généralement après le robinet. Rendre votre site Web vraiment rapide nécessite une combinaison de technologies qui fonctionnent sous le capot avant même que le client clique sur quoi que ce soit. Vous devez passer de la réaction au robinet à l’anticipation (plus d’informations plus tard).

De nombreuses technologies Web orientées vitesse nécessitent de séparer le backend du frontend, c’est-à-dire de rendre le frontend portable ou de souscrire à une architecture de commerce sans tête. Passer sans tête facilite l’utilisation des meilleures solutions pour votre frontend et votre backend indépendamment les uns des autres, afin que vous puissiez fournir le site Web le plus rapide sur le backend de votre choix.

Une fois que vous allez sans tête avec votre site de commerce électronique Magento 2, vous pouvez utiliser un frontend portable conçu pour la vitesse comme une progressive Web App (PWA). Exécuter un magasin Magento 2 sans tête avec un frontend PWA nécessite une couverture API solide et une bonne documentation.

Passer sans tête vous permet également de commencer à mettre en œuvre des technologies de pointe supplémentaires qui rendront votre site Web incroyablement rapide, notamment:

• Frontend portable pour des transitions de navigation rapides
• Prise en charge du rendu côté serveur (SSR) et de l’AMP pour des premiers chargements ultra-rapides.
• Prélecture prédictive
• Un CDN de pointe avec Edge computing pour optimiser les taux d’accès au cache pour le contenu dynamique à la périphérie et garder 5 secondes d’avance sur l’acheteur

Examinons dans quelle mesure Magento 2 est adapté à la mise en œuvre de ces technologies et à la prise en charge des sites Web de commerce électronique en moins de seconde.

1. Magento 2 API

Un magasin headless connecte le frontend à la plate-forme de commerce électronique backend via des API. Avant de passer sans tête, il est utile de vérifier si votre plateforme de commerce électronique a une bonne couverture API et si vous pouvez facilement vous connecter à une boutique tierce.

Magento offre une couverture API : les points de terminaison SOAP et REST sont disponibles sur toutes les versions, et la prise en charge native de GraphQL a été ajoutée avec la mise à jour Magento 2. Les PWA et les points de terminaison headless peuvent être créés via l’API GraphQL, cependant, la personnalisation du code et/ou du schéma de base de données de la plate-forme peut perturber la compatibilité des API.

• Formats API Magento 1 : REST, SOAP
• Formats API Magento 2 : REST, SOAP et GraphQL plus moderne

Magento 2 rend relativement facile la création d’API pour prendre en charge les sites web headless et les PWA avec GraphQL comme alternative à ses API web REST et SOAP pour le développement frontend.

2. Construire un frontend PWA pour Magento 2

Les terminaux portables PWA modernes sont comme des applications natives à bien des égards, et leur avantage en termes de vitesse est évident car l’exploration du site Web est plus rapide, ce que les gens font beaucoup lorsqu’ils font des achats en ligne.

Avec une sensation native, un PWA sur Magento 2 se sentira plus rapide. Cependant, lorsque la vitesse est mentionnée dans le contexte des PWA, il s’agit plus de stabilité de mise en page que de vitesse. Au fur et à mesure que vous passez d’une page à l’autre, ces pages ne « rebondissent pas » comme sur un site Web traditionnel. Et les utilisateurs perçoivent généralement ce « rebondissement » comme des chargements de page lents.

Vous avez probablement vu cela se produire de nombreuses fois : vous entrez dans un site Web, puis une annonce ou une bannière se charge quelques secondes plus tard, et tout change, déplaçant tout le thème vers le haut ou vers le bas. Il en résulte des clics involontaires, des distractions et de la frustration pour le client.

Un frontend PWA résout ce problème. Magento PWA Studio est une collection d’outils qui permet aux développeurs de créer des applications web progressives complexes sur Magento 2. Malheureusement, PWA Studio n’est disponible que sur Magento 2,3 ou supérieur, versions que la plupart des vendeurs n’ont pas encore mises à niveau.

Pour résumer, voici les avantages et les inconvénients de la construction d’un frontend PWA pour s’asseoir au-dessus de votre magasin Magento 2.

Avantages de Magento 2 dans les PWA pris en charge:

• Magento offre un certain support PWA. Magento 2 est livré avec les thèmes base et Luma Responsive prêts à l’emploi. Pour les PWA, Magento 2,3 propose une boîte à outils appelée PWA Studio avec un thème de base appelé « Venia ».
• Meilleure stabilité de la mise en page. Avec un frontend PWA, les pages Magento 2 s’affichent plus facilement, c’est-à-dire que les images ne « rebondissent pas » lors du chargement, même sur des pages riches en images.
• Vitesse. Si la PWA est construite correctement, le site Web est plus rapide.

Veuillez noter que les deux derniers avantages reposent sur le rendu côté serveur, qui est possible mais pas toujours disponible pour les frontaux PWA Studio. Plus d’informations plus tard.

Les défis de la livraison de frontaux PWA sur Magento 2:

• Les PWA nativement proposés par Magento ne sont pas vraiment plus rapides. Vous avez besoin d’une infrastructure appropriée pour devenir incroyablement rapide. Parfois, une PWA peut même ralentir votre site Web sans la bonne technologie pour le prendre en charge (comme le rendu côté serveur et CDN avec Edge computing). Beaucoup de grands magasins commettent cette erreur. Cela semble un peu contre-intuitif, mais c’est vrai : vous entrez dans la PWA pour gagner en vitesse, mais vous risquez de ralentir votre site Web. Notre analyse montre que les 500 principaux sites Web de commerce électronique américains qui fournissent des PWA ne se chargent pas beaucoup plus rapidement que leurs homologues non-PWA, en moyenne environ 4 secondes.
• Sans SSR & AMP, le premier clic est toujours lent. Magento PWA Studio ne prend pas en charge SSR ou AMP prêt à l’emploi, donc les chargements de la première page ne sont pas si bons. De plus, le premier chargement n’est pas si rapide parce que lorsque vous accédez à une PWA, vous téléchargez l’intégralité de « l’application ». Les chargements de pages suivantes de PWA sont nettement plus rapides que les sites Web traditionnels de plusieurs pages.
• PWA Studio de Magento est similaire aux autres options frontend open-source, mais PWA Studio est spécialement conçu pour la plate-forme. Cela signifie que vous restez enfermé dans l’écosystème Magento, ce qui émousse une partie de la valeur du commerce sans tête.
• Construire une PWA sur Magento à l’aide du PWA Studio natif nécessite des compétences et une chaîne d’outils différentes de celles du développement Magento traditionnel.
• Magento PWA Studio est uniquement disponible sur Magento 2,3 ou version ultérieure. La plupart des magasins Magento n’ont pas encore été mis à niveau vers Magento 2,3.

Dans l’ensemble, choisir un framework PWA open source et portable (c’est-à-dire un framework qui n’est pas nativement intégré à la plateforme mais qui offre une connexion API naturelle) est une meilleure option que le framework produit par le fournisseur que Magento offre dans PWA Studio.

Frameworks frontend tiers pour Magento 2

Les options frontend open source et proposées par le fournisseur sont gratuites, mais le frontend produit par le fournisseur n’est pas portable. Bien sûr, vous pouvez probablement l’emmener sur une autre plate-forme avec un certain effort, mais il n’a certainement pas été conçu pour le permettre. Les frontaux proposés par les vendeurs, comme ceux construits à l’aide de PWA Studio, sont construits par les plates-formes de commerce électronique pour avoir une réponse PWA, non pas parce qu’ils ont l’intention de vous permettre de l’emporter avec vous lorsque vous re-Platform.

Lorsque vous cherchez un frontend PWA qui fonctionnerait avec votre boutique Magento 2, vous recherchez idéalement un framework isomorphe, c’est-à-dire un framework qui restitue la même page en deux versions. Vous n’avez pas à l’écrire deux fois, vous l’écrivez une fois. La première page est rendue côté serveur, et la navigation est rendue côté client.

Il y a quelques frameworks sans tête isomorphes que vous pouvez utiliser pour votre boutique Magento 2 une fois que vous passez sans tête:

• Next.js – un excellent framework React pour les PWA créé par Vercel,
• Nuxt.js – identique à Next.js, mais basé sur vue,
• React Storefront – basé sur Next.js mais livré avec plus de fonctionnalités de Storefront, widgets et connecteurs pour certaines plateformes comme Magento, Shopify et SAP (Hybris). Layer0 est un contributeur majeur du framework PWA open-source React Storefront.
• Angular– permet de créer des frontaux PWA portables avec rendu côté serveur.

Ces quatre frameworks offrent un rendu côté client et côté serveur. Cela signifie qu’il n’y a pas de compromis de vitesse pour la première charge : la première charge et toutes les charges suivantes dans le magasin seront rapides. En outre, nous savons que Google aime les pages avec des temps de rendu courts, ce qui donne aux applications lourdes comme les magasins moins de chances de bien se positionner sans SSR.

Les sites de commerce électronique complexes sont souvent lourds en JavaScript et nécessitent plus d’efforts de la part de Google pour les analyser et les comprendre. Ils diront que cela n’a pas d’importance, mais Google n’aime pas le rendu côté client. Et il peut y avoir des bugs et des problèmes si votre contenu n’est pas affiché correctement. Idéalement, vous devriez rechercher un framework PWA qui effectue le rendu côté serveur hors de la boîte, et PWA Studio de Magento ne le fait pas.

Bottom line : L’expérience PWA native que vous obtenez avec PWA Studio sur Magento 2,3 n’offre pas d’énormes améliorations de vitesse. Mais lancer Magento PWA Studio sur Layer0 vous permettra d’obtenir un site Web plus rapide.

Construire un Magento plus rapide 2

Les frontaux portables sans tête comme les PWA présentent de nombreux avantages en termes de vitesse. Un bon PWA vous mènera de lent à rapide, mais il ne vous obtiendra pas instantanément. Pour cela, vous devez combiner correctement des technologies de pointe, telles que:

1. Rendu côté serveur (SSR) et AMP

Magento 2,3 offre un outillage limité pour implémenter le rendu côté serveur. Il est implémenté via des modèles de moustache dans le cadre de la spécification ASCENDANTE DE Magento PWA Studio. Vrai SSR exécute le code complet côté client sur le serveur (pas seulement les modèles de moustache). Par conséquent, le SSR avec ASCENDANT est limité à des zones spécifiques (comme le shell de l’application), ou les développeurs doivent dupliquer le code à la fois dans le code React côté client et dans les modèles de moustache côté serveur pour chaque page ou zone qui doit prendre en charge le SSR.

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.

Les défis de la mise en œuvre de SSR et AMP sur la boutique Magento 2:

• Magento n’offre aucun support intégré pour AMP. La prise en charge d’AMP nécessite des extensions tierces et/ou la reconstruction de votre thème existant pour ajouter vous-même ces fonctionnalités. Cela entrave considérablement votre capacité à optimiser les chargements de la première page sur mobile.
• Sur Magento 2, la prise en charge du vrai SSR avec UPWARD nécessite l’exécution et la maintenance d’une flotte de serveurs Node.js.

2. Un CDN moderne

Un réseau de diffusion de contenu (CDN) peut stocker des fichiers multimédias. Les CDN ont été conçus pour accélérer le chargement du contenu de votre site web (images, vidéos et code (JavaScript, CSS) et autres éléments de votre site web). Lorsque quelqu’un accède à votre site Web, le CDN raccourcit le chemin vers le contenu, de sorte qu’il n’est pas nécessaire d’y accéder à partir du serveur à travers le pays. Le CDN le place dans toutes les grandes villes, de sorte que le temps d’accès à ce contenu est beaucoup plus court. Certaines personnes peuvent avoir un CDN mais ne le savent même pas.

Les CDN traditionnels sont destinés aux sites Web statiques, pour stocker des images, du texte et d’autres éléments qui ne changent pas souvent. Mais les magasins modernes, avec des prix dynamiques et des recherches d’inventaire en temps réel, ont besoin de bien plus que cela.

Même lorsque les réseaux mobiles deviennent de plus en plus rapides et que nous avons toutes ces vitesses 4G et 5G, les sites web mobiles restent toujours aux mêmes vitesses, généralement autour de 3-5 secondes par chargement de page. Cela ne s’est pas amélioré même si presque tous les principaux sites de commerce électronique utilisent un CDN aujourd’hui.

Les défis de l’intégration d’un CDN avec Magento 2

• La version sur site de Magento n’est pas livrée avec une intégration CDN prête à l’emploi, bien que vous puissiez toujours utiliser le CDN de votre choix.
• Magento commerce (Cloud) dispose d’un module de mise en cache intégré, mais ce n’est pas un vrai CDN. Il manque les points de présence distribués (POP) qu’un CDN réel aurait.

Layer0 CDN-as-JavaScript peut remplacer votre CDN ou travailler avec lui. Nous avons près de 100 POPS. Les sites Web sur Layer0 voient un taux moyen d’accès au cache de 95%+ pour le contenu dynamique à la périphérie.

Planifiez une conversation consultative pour découvrir comment Layer0 peut vous aider à obtenir des chargements de page en moins de seconde sur Magento 2.

Nous sommes là pour vous aider

Layer0 rend un magasin Magento rapide et sans tête super simple, du développement et du déploiement aux rollbacks faciles. Vous pouvez le faire pour n’importe quel frontend sans tête moderne : Next, Nuxt, React, SAP/Spartacus, React Storefront, vue Storefront — nous les prenons tous en charge.

Vitesse et ascenseur de conversion. Combinées, l’augmentation du taux de conversion et l’augmentation du trafic organique génèrent un effet synergique pour votre site de commerce électronique, qui se traduira directement en revenus. En gérant un magasin plus rapide, vous ne faites pas que monter dans le SERP. Dans les marchés plus concurrentiels, cela signifie que vos concurrents perdent du trafic vers votre site Web. Les sites Web sur Layer0 voient une augmentation moyenne de 15 à 30% des taux de conversion et du trafic de recherche.

Simplicité. Chez Layer0, notre objectif est de rendre le Web instantané et simple, même si nous soutenons la tendance headless, ce qui n’est pas une tâche simple. Les sites Web sur Layer0 voient une augmentation de 20 % de la vitesse des développeurs et de l’agilité de l’entreprise simplement en plaçant le code au centre de leur flux de travail avec notre plateforme JavaScript sans serveur.

Collaboration. Chaque fois que vous écrivez un nouveau code, un environnement de pré-production est automatiquement généré. Votre équipe QA et les parties prenantes de l’entreprise peuvent le tester et fournir des commentaires avant même que le code ne soit fusionné.

Passez de Magento 1 à Magento 2 en 12 semaines ET obtenez un site Web en moins de seconde.

Test A/B vrai. Les tests a/B ralentiront votre site Web. Il ne servirait à rien d’avoir un site Web optimisé pour la vitesse et puis les tests A / B ruinent vos efforts. Avec Layer0 (Edgio), vous pouvez expérimenter sur votre site web mais l’avoir toujours instantanément. Par exemple, vous pouvez faire des déploiements canary pour 5% des utilisateurs. Avec Layer0, vous écrivez des règles de route comme vous écrivez votre application et vous avez un contrôle total sur la division du trafic.

Layer0 est également livré avec une surveillance des performances et des tableaux de bord pour tout suivre.

Évolutivité illimitée. Même le vendredi fou, Layer0 évolue automatiquement pour absorber l’augmentation du trafic vers votre magasin. Avec un tiers des acheteurs américains visitant un site Web sur Layer0 chaque mois, vous savez que vous êtes entre de bonnes mains.

Sécurité. Le Layer0 est prêt pour l’entreprise, certifié DSS PCI niveau 1 avec WAF, DDoS et BOT-mitigation pris en charge dès la sortie de l’emballage.

Comment les magasins réussis le font : le magasin Magento 2 instantané d’AKIRA sur la Layer0

Un site Web de commerce électronique instantané peut avoir un impact considérable sur vos résultats. Nous l’avons vu de nombreuses fois avec nos clients. Par exemple, le géant des cadeaux et des fleurs, 1-800-Flowers, a vu une hausse de 50% des conversions à partir de son site Web en moins de seconde. Venus Fashion en est un autre exemple, le détaillant de mode est passé de 15,25% de son site web se chargeant en moins d’une seconde à 72,75% sur la Layer0, ce qui a entraîné une hausse de 24% des conversions.

Le détaillant de mode AKIRA a augmenté son taux de conversion de 37,25% avec un site web en moins de seconde sur le Layer0. AKIRA est passé instantanément par une combinaison de technologies avancées:

• 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 avec capacités de Edge computing

Les deux premiers garantissent des vitesses de page fulgurantes de l’atterrissage à la caisse. Les deux derniers garantissent que le site Web reste 5 secondes d’avance sur l’acheteur en prédisant son prochain mouvement, en préchargeant les données JSON à partir du bord où elles ont été mises en cache et en les diffusant sur le navigateur. De cette façon, l’utilisateur a l’impression que l’ensemble du site est déjà sur son téléphone et qu’il n’y a plus de notion de « chargement de page ».

Prise en charge AMP sans friction pour un trafic de recherche plus rapide et un meilleur référencement

AKIRA devance Amazon, Nordstrom, Zappos et d’autres concurrents de plusieurs milliards de dollars pour les phrases clés. Comment ? Le détaillant de mode fournit des premiers chargements instantanés à partir de la recherche en utilisant la technologie de conversion AMP de React Storefront.

Chaque page du site Web du détaillant reçoit une version AMP générée automatiquement. Cela donne au détaillant l’avantage concurrentiel nécessaire pour devancer les géants du commerce électronique avec des équipes et des budgets beaucoup plus grands dédiés à l’optimisation des moteurs de recherche.

SSR pour un trafic sans recherche plus rapide

AKIRA utilise la capacité de rendu côté serveur intégrée de Layer0 pour fournir des premiers chargements instantanés pour les canaux non-recherche. Affichage, réseaux sociaux, e-mails, références et autres moyennes de trafic hors recherche juste au nord d’une seconde, avec chargement des pages suivantes en 500 ms. C’est un avantage concurrentiel dans un marché qui est en moyenne de 3-5 secondes par chargement de page.