Beyond Optimization : les secrets derrière les magasins Magento 2 les plus rapides

Source :nngroup.com

Une boutique 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 se dégager 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 de vous différencier. Et ces deux-là sont plus connectés que de nombreux vendeurs ne le réalisent.

Google favorise les sites Web rapides

Avec la mise à jour de l’expérience Google page qui approche , il est crucial de prêter une attention particulière à la vitesse de votre site Web. Optimiser les sites Web de commerce électronique pour la vitesse a été identifié 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 la page se déploie, 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 alors que Google a toujours été très vague sur son algorithme RankBrain et la façon dont ses différents composants ont été pondérés, nous savons avec certitude que commencer la vitesse 2021 va jouer un rôle clé dans le classement de recherche. 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 boutique Magento 2 pour la vitesse vous expose au risque de perdre du trafic organique et des clients potentiels. De nombreux magasins – même de grandes marques – qui ne prennent pas de mesures 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é construit à l’origine avec une approche backend et data-first, et très peu d’attention 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 place le fardeau de l’optimisation de la vitesse des sites 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 plateforme de commerce électronique ou système backend populaire, si vous voulez offrir l’expérience la plus rapide possible, vous devrez mettre en œuvre 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 pageloads instantanés, regardez ce webinaire.

Lisez la suite pour les tactiques clés derrière les sites 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, les images granuleuses et le jank.

Lorsque vous optimisez 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 des choses qui se produisent habituellement 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 à ce sujet 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 l’un de l’autre, de sorte que vous pouvez fournir le site Web le plus rapide sur le backend de votre choix.

Une fois que vous êtes 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). L’exécution d’un magasin Magento 2 sans tête avec un frontend PWA nécessite une couverture API solide et une bonne documentation.

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

• Interface portable pour des transitions de navigation rapides
• Rendu côté serveur (SSR) et prise en charge AMP pour des premiers chargements ultra-rapides.
• Préextraction prédictive
• Un CDN à la pointe de la technologie 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 comment Magento 2 est adapté pour implémenter ces technologies et soutenir les sites Web de commerce électronique inférieurs à la seconde.

1. API Magento 2

Un magasin headless connecte le frontend à la plate-forme de commerce électronique backend via des API. Avant de passer sans tête, il vaut la peine 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 le support natif GraphQL a été ajouté avec la mise à jour Magento 2. Les PWA et les points de terminaison headless peuvent être créés via l’API GraphQL, mais la personnalisation du code et/ou du schéma de base de données de la plateforme 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 sans tête et les PWA avec GraphQL comme alternative à ses API Web REST et SOAP pour le développement frontal.

2. Construire un frontend PWA pour Magento 2

Les frontaux portables PWA modernes ressemblent à des applications natives à bien des égards, et leur avantage en termes de vitesse est évident car explorer le site Web est plus rapide, ce que les gens font beaucoup lorsqu’ils font des achats en ligne.

Avec une sensation native-like, 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 disposition que de vitesse. Lorsque vous passez de page en page, ces pages ne « rebondissent » pas comme sur un site Web traditionnel. Et les utilisateurs perçoivent généralement ce « rebond » comme un chargement lent des pages.

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 le thème entier 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 en plus de 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 construire un frontend PWA pour s’asseoir sur votre boutique 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 Responsive base et Luma 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 Magento 2, les pages sont rendues plus facilement, c’est-à-dire que les images ne « rebondissent » pas lorsqu’elles se chargent, même sur les pages riches en images.
• Vitesse. Si le PWA est construit correctement, il rend le site Web 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 frontend PWA Studio. Plus à ce sujet plus tard.

Les défis liés à la fourniture de frontends PWA sur Magento 2:

• Les PWA proposés nativement par Magento ne sont pas vraiment plus rapides. Vous avez besoin d’une infrastructure appropriée pour devenir incroyablement rapide. Parfois, un PWA peut même ralentir votre site Web sans la technologie appropriée pour le prendre en charge (comme le rendu côté serveur et le 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 meilleurs sites de commerce électronique américains qui fournissent des PWA ne se chargent pas beaucoup plus rapidement que leurs homologues non-PWA, avec une moyenne d’environ 4 secondes.
• Sans SSR & AMP le premier clic est toujours lent. Magento PWA Studio ne prend pas en charge SSR ou AMP immédiatement, donc les chargements de première page ne sont pas si géniaux. De plus, le premier chargement n’est pas si rapide parce que lorsque vous accédez à un PWA, vous téléchargez l’ensemble de « l’application ». Les chargements de pages suivantes de PWA sont nettement plus rapides que les sites Web traditionnels à plusieurs pages.
• PWA Studio de Magento est similaire aux autres options frontend open-source, mais PWA Studio est conçu spécifiquement pour la plate-forme. Cela signifie que vous restez enfermé dans l’écosystème Magento, ce qui réduit une partie de la valeur du commerce headless.
• Construire un PWA sur Magento à l’aide du PWA Studio natif nécessite un ensemble de compétences et une chaîne d’outils différents de ceux 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 portable open source (c’est-à-dire un framework qui n’est pas intégré nativement à la plateforme mais qui offre une connexion API naturelle) est une meilleure option que le framework Magento produit par le fournisseur dans PWA Studio.

Frameworks frontend tiers pour Magento 2

Les options frontend open source et offertes par le fournisseur sont gratuites, mais le frontend produit par le fournisseur n’est pas portable. Bien sûr, vous pouvez probablement le prendre 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 des plateformes de commerce électronique pour avoir une réponse PWA, non pas parce qu’ils ont l’intention de vous laisser 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 existe quelques frameworks sans tête isomorphes que vous pouvez utiliser pour votre boutique Magento 2 une fois que vous êtes 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 est livré avec plus de capacités de vitrine, 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 le premier chargement : le premier chargement et tous les chargements suivants dans le magasin seront rapides. De plus, 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 explorer 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, ce que PWA Studio de Magento ne 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 2 plus rapide

Les frontaux portables sans tête tels que 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é. 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 Mustache dans le cadre de la spécification ASCENDANTE de Magento PWA Studio. True SSR exécute le code côté client complet sur le serveur (pas seulement les modèles Mustache). Par conséquent, SSR avec UPWARD 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 Mustache côté serveur pour chaque page ou zone qui doit prendre en charge SSR.

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.

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 ces fonctionnalités par vous-même. Cela entrave considérablement votre capacité à optimiser les chargements de 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 dans tout 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 cache intégré, mais ce n’est pas un vrai CDN. Il manque les points de présence distribués (POPS) qu’un vrai CDN aurait.

Layer0 CDN-as-JavaScript peut remplacer votre CDN ou fonctionner à côté de lui. Nous avons près de 100 pop. Les sites Web sur Layer0 voient un taux moyen de succès du cache de 95%+ pour le contenu dynamique à la périphérie.

Planifiez une conversation consultative pour apprendre comment Layer0 peut vous aider à atteindre des chargements de page inférieurs à la seconde sur Magento 2.

Nous sommes là pour vous aider

Layer0 rend le fait d’avoir un magasin Magento rapide et sans tête super simple, du développement et du déploiement aux retours en arrière 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 en charge tous.

Vitesse et élévateur 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 n’êtes pas seulement plus élevé dans le SERP. Dans des 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 vélocité 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 plate-forme JavaScript sans serveur.

Collaboration. Chaque fois que vous écrivez un nouveau code, un environnement de pré-production est automatiquement généré. Vos collaborateurs 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 inférieur à la seconde.

Test A/B réel. 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 instantané. Par exemple, vous pouvez déployer canary pour 5 % des utilisateurs. Avec Layer0, vous écrivez des règles de routage comme vous écrivez votre application et vous avez un contrôle total sur la division du trafic.

Layer0 est également livré avec un suivi des performances et des tableaux de bord pour suivre tout cela.

Échelle illimitée. Même le Black Friday, Layer0 s’adaptera automatiquement pour absorber l’augmentation de l’achalandage 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é PCI niveau 1 DSS avec WAF, DDoS et protection contre les bots pris en charge immédiatement.

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

Un site de commerce électronique instantané peut avoir un impact énorme sur vos résultats. Nous l’avons vu plusieurs fois avec nos clients. Par exemple, le géant des cadeaux et des fleurs, 1-800-Flowers a vu une augmentation de 50% des conversions à partir de son site Web inférieur à la 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 le Layer0, ce qui a entraîné une augmentation de 24% des conversions.

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

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

Les deux premiers garantissent des vitesses de page ultra-rapides, de l’atterrissage à la caisse. Les deux dernières permettent au site Web de rester 5 secondes en avance sur l’acheteur en prédisant son prochain déplacement, en préchargeant les données JSON à partir de la périphérie où elles ont été mises en cache et en les diffusant sur le navigateur. De cette façon, l’utilisateur a l’impression que tout le site est déjà sur son téléphone et qu’il n’y a plus de notion de « chargement de page ».

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

AKIRA surpasse Amazon, Nordstrom, Zappos et d’autres concurrents de plusieurs milliards de dollars pour des 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 beaucoup plus importantes et des budgets dédiés à l’optimisation des moteurs de recherche.

SSR pour un trafic hors recherche plus rapide

AKIRA utilise la capacité de rendu côté serveur intégrée 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, les pages suivantes se chargeant en 500 ms. C’est un avantage concurrentiel tout à fait dans un marché qui moyenne 3-5 secondes par chargement de page.