Au plus fort des commandes de logements sur place aux États-Unis, 94 % de la population était touchée. Alors que les restrictions se sont assouplies, les Américains choisissent toujours de rester en sécurité à l’intérieur de leurs maisons et de faire des achats en ligne. Avec la saison des fêtes juste autour du coin, les entreprises de toutes sortes essaient rapidement de trouver la meilleure solution pour créer une expérience de magasinage en ligne supérieure.
Choisir la pile technologique adaptée à votre site, une pile conçue pour les performances, est crucial et loin d’être facile. Les entreprises doivent choisir la bonne plate-forme de commerce électronique, CDN et frontend pour leur entreprise. Nous avons déjà comparé les plateformes Shopify, Magento 2 et Salesforce commerce Cloud et les principaux CDN. Dans cet article, nous nous concentrerons sur les performances des frontends modernes : Angular, Next.js, Nuxt.js, React et vue.js. Nous avons rapidement constaté que Nuxt.js est en tête du peloton, suivi de vue.js et Next.js. Lisez la suite pour nos conclusions détaillées.
React, Angular, vue.js, Next.js, Nuxt.js – comment se comparent-ils ?
Nous avons analysé les scores de Lighthouse 6 pour mobile pour un sous-ensemble de près de 2 000 sites Web à fort trafic exécutant Angular, Next.js, Nuxt.js, React et vue.js pour déterminer quel frontend offre les sites Web les plus rapides. Nous avons rapidement constaté que le score moyen de Lighthouse sur les fronts était de 24, avec une médiane de 19. Bien que cela puisse sembler faible, il est en fait 26% plus élevé que le score de performance moyen pour les 500 principaux détaillants Internet américains en termes de chiffre d’affaires.
Les sites Web Nuxt.js et vue.js se sont battus pour offrir les sites Web les plus rapides. Les sites Nuxt.js ont obtenu en moyenne un score Lighthouse de 27 avec une médiane de 22, et les sites vue.js une moyenne de 27 mais une médiane faible de 20. Alors que vue.js avait quelques valeurs aberrantes impressionnantes, Nuxt.js s’est avéré être le framework le plus fiable pour fournir les sites Web les plus rapides à charger.
Next.js est arrivé troisième, avec un score de performance moyen de 23 avec une médiane de 19,5. Les sites Web Angular ont vu la même moyenne à 23 ; cependant, la distribution des scores de performance pour les sites Angular était plus diversifiée et la médiane a été inférieure à 18. Le frontend avec les pires performances a étonnamment réagi. Il a obtenu un score Lighthouse moyen de 22 et une médiane de 18, même si elle héberge certains des plus grands noms du commerce électronique, y compris Amazon et Groupon.
Nuxt.js s’accumule pour être le framework Web de commerce électronique le plus rapide
Nuxt.js est un framework open-source et sans serveur basé sur vue.js, Node.js, Webpack et Babel.js créé pour construire rapidement des applications isomorphes complexes et rapides. Les avantages de ce framework incluent le fractionnement automatique du code, la mise en cache des pages et le préchargement. Layer0 est fier d’être un sponsor de Nuxt.js pour aider à promouvoir des frameworks open-source modernes travaillant pour faciliter un Web plus rapide. Actuellement, Nuxt.js a 29.4K étoiles sur GitHub.
Les sites Web utilisant Next.js avaient un score Lighthouse moyen solide de 27, juste un point au-dessus de la moyenne des terminaux. Le score médian pour les sites Nuxt.js est tombé à 22, ce qui représente une distribution positivement biaisée. En percentile, un score de 35 marquait le 75e percentile et un score de 49 marquait le 90e percentile. Ce cadre présentait moins d’écart dans les scores que d’autres cadres, démontrant sa capacité à fournir des scores de rendement Lighthouse constamment proches de sa moyenne. Cependant, ces données nous indiquent également que les sites Nuxt.js n’ont pas fourni de hauts extrêmes ou des scores presque parfaits (dans les années 90), tels que les frameworks comme vue.js ou les sites Web Angular, qui seront abordés dans les sections suivantes.
Heavy Industry and Engineering était la catégorie avec les sites Web Nuxt.js les plus rapides, avec un score de performance moyen de 37, un score 42% plus rapide que le score moyen de son framework seul. Catégories mises à part, les sites Nuxt.js les plus rapides étaient Appycouple.com, NJtransit.com et WPS.com, avec des scores de 68, 63 et 48, respectivement. Trivago.com, TrueandCo.com et Garmin.com ont également dépassé la moyenne du cadre avec des notes de rendement notables de 47, 36 et 35, respectivement. Nintendo est tombé à droite à la moyenne avec un score de 20, et en deçà d’un score faible de 10 étaient Nespresso.com et DolceVita.com.
Vue.js arrive en deuxième position
Vue.js est un framework JavaScript open-source pour la construction d’applications monopages qui ont rapidement gagné en popularité au cours des 6 années depuis son lancement en 2014. Il a plus de 171 000 étoiles sur GitHub, ce qui en fait le framework moderne le plus populaire. Son principal atout est qu’il permet aux développeurs de créer rapidement des applications JavaScript en pleine croissance. Il est assez similaire à Angular et React dans la mesure où il est léger et offre des solutions de routage robustes pour les applications de grande envergure.
Les sites Web vue.js ont obtenu la deuxième note de performance la plus élevée, avec une moyenne de 27 et un score médian de 20 – avec la moitié des sites situés au-dessus et au-dessous d’un score de 20. Sur une base de centiles, 75 % des sites vue.js avaient un score de performance de 34 ou moins, et 90 % avaient un score de 55 ou moins.
La catégorie de sites Web la plus rapide dans ce domaine a été ceux de Hobbies et loisirs, avec une note moyenne de 37, y compris Nikon et Fujifilm. Cette catégorie a obtenu des résultats supérieurs de 37 % à ceux de la moyenne des sites Web vue.js. Les 3 sites vue.js les plus rapides ont été PaintScratch.com, iMobie.com et EmmaOneSock.com avec des scores de 96, 93 et 92, respectivement – des scores de performance presque parfaits.
En descendant, les données révèlent que FactoryChryslerParts.com ont obtenu un score de 68, In-n-Out.com ont obtenu un score de 61, Poshmark.com ont obtenu un score de 53 et LouisVuitton.com ont obtenu un score de 34, tous dépassant la moyenne vue.js. Moins impressionnants ont été Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com et Chewy.com, avec des scores faibles de 10-15. Chipotle, Subaru et BMW ont enregistré des performances encore pires, avec des scores inférieurs à 10.
Angular prend la troisième place avec quelques scores presque parfaits
Angular est le plus ancien framework du groupe, créé et développé par Google en 2010 et compte plus de 65 000 étoiles sur GitHub. C’est une solution populaire pour les sites Web de grandes entreprises qui prévoient de faire évoluer leur site rapidement, car Angular est connu pour des applications plus complexes.
Le score de performance moyen des sites Web Angular était de 23 avec une médiane de 18, indiquant une distribution positivement biaisée. 75 % des sites Web Angular ont obtenu un score Lighthouse de 30 ou moins, et 90 % ont obtenu un score de 50 ou moins. Sur un plan catégorique, les sites Web santé ont obtenu les meilleurs résultats sur ce cadre, avec une note moyenne de 28. Certains de ces sites Web sur la santé comprenaient CVS.com, VitaminShoppe.com, LifetimeFtiness.com et Plexus.com.
Deichmann.com, MegaBus.com et ShopStyle.com ont été les 3 meilleurs sites angulaires les plus rapides avec des scores impressionnants de 98, 95 et 83, respectivement. Seuls deux autres sites sont tombés dans le top 5e percentile d’Angular pour la performance, à savoir Cat.com, une puissante société de machines et de moteurs et AerLingus.com, une compagnie aérienne.
Certains sites angulaires sautant au-dessus du score moyen comprenaient Android.com à 51, Expedia.com à 44, PepsiCo.com à 42 et Lamborghini.com à 31. Le score global moyen de Lighthouse d’Angular est passé à 26, Gamefly.com à 25, BaskinRobbins.com à 19, Disney.com à 18 et CocaCola.com à 17. Les marques telles que Xfinity et Patagonia, avec des scores de 15 et 14, sont juste en deçà de la moyenne. Enfin, les données ont révélé que trois compagnies aériennes étaient les sites Web Angular les plus lents : Delta à 3, Frontier à 2 et Spirit à 1.
Next.js est inférieur de 8 % à la note de performance moyenne
Next.js est un framework isomorphe open source basé sur React pour les applications rendues côté serveur et a plus de 52 000 étoiles sur GitHub. Pour assurer un chargement rapide des pages, Next.js divise automatiquement le code et génère dynamiquement le code HTML chaque fois qu’une nouvelle requête arrive avec un serveur.
Les sites Web de ce cadre ont obtenu une note moyenne de performance Lighthouse de 22, soit 8 % de moins que la moyenne. Les données ont montré que 50% des sites Next.js ont obtenu un score inférieur à 20, 75% ont obtenu un score inférieur à 30 et 90% ont obtenu un score inférieur à 43. Catégoriquement, les sites de voyages et de tourisme obtiennent les meilleurs résultats avec Next.js, obtenant un score moyen de 29 pour les phares. Et les trois sites Next.js les plus rapides étaient Bartleby.com, Kelloggs.com et Holidayinnclub.com, obtenant respectivement 89, 73 et 75.
RetailMeNot.com et HermanMiller.com ont chacune dépassé la note moyenne de Lighthouse d’au moins 21 %, tandis que Sears.com, AlexanderMcQueen.com, Ticketmaster.com et RedRobin.com affichent des notes médiocres de 26, 23, 22 et 22, respectivement. Quelques grandes entreprises avec de maigres performances incluent EddieBauer.com, TragerGrills.com, Bonobos.com et Smirnoff.com, avec des scores entre 10 et 15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com et Farri.com ont obtenu de faibles scores Lighthouse de moins de 10.
React accueille des marques impressionnantes avec des scores peu impressionnants
React est une bibliothèque JavaScript open-source développée par Facebook en 2013. Contrairement au reste des frameworks abordés dans cet article, React n’est pas un framework mais une bibliothèque d’interface utilisateur permettant de construire rapidement et facilement des interfaces utilisateur ou des composants d’interface utilisateur. C’est l’une des frontends les plus matures du groupe et c’est aussi l’un des projets les plus populaires sur GitHub, avec plus de 155 000 étoiles à la date de publication de ce blog.
Facebook a déclaré que la stabilité était de la plus haute importance pour eux, car de grandes entreprises comme Twitter et Airbnb utilisent React. Fait intéressant, le rendement n’est pas aussi prioritaire. Les données révèlent que les sites Web React ont obtenu en moyenne un score Lighthouse de 22, soit 8 % de moins que le score global moyen du cadre. Il détient une médiane de 18, avec 75 % de ses sites affichant un score inférieur à 29 et 90 % inférieur à 40.
Vêtements, Accessoires et Chaussures était la catégorie avec la plus grande part de domaines React, mais la catégorie avec le score moyen le plus élevé dans Lighthouse étaient ceux de Mass Merchant, y compris Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon et Overstock. Catégories mises à part, les 3 sites Web les plus rapides React se classent historicrail.com (propriété d’Amazon) à 98, historicaviation.com (propriété d’Amazon) à 91 et flipkart.com à 74.
D’autres grands noms au-dessus de la moyenne de la bibliothèque étaient Amazon à 57, VRBO à 49, Priceline à 47, Wayfair à 39, Lowes à 33 et Netflix à 31. Les noms qui approchaient la note moyenne de la bibliothèque étaient Target à 25, sur la Tab et StitchFix à 24, Gap et Glossier à 21, Victoria’s secret à 20 et Crate et Barrel à 19. Certains des plus grands perdants de l’industrie sont 23andMe.com à 9, Best Buy et Tory Burch à 8, ProFlowers à 6 et Dior à 3.
Résultat
Google Lighthouse est devenu l’outil de facto pour de nombreuses entreprises de commerce électronique pour mesurer les performances de leur site Web. Un score de haute performance signifie que votre site est rapide à charger et, surtout, répond aux attentes des utilisateurs.
La vitesse du site Web est plus importante que jamais, les consommateurs du monde entier se connectant en ligne pour éviter les magasins bondés pendant cette pandémie. Les performances du site Web peuvent varier considérablement en fonction du framework que vous utilisez, ce qui a un impact considérable sur l’expérience utilisateur. Nous avons trouvé quel framework fournit les vitesses les plus rapides en analysant les scores de performance Lighthouse de près de 2 000 sites Web à fort trafic sur des frameworks frontend modernes.
Les sites Web de Nuxt.js sont les plus performants, avec un score de performance moyen de Lighthouse de 27 et une médiane de 22. Vue.js était le deuxième avec le même score de performance moyen de 27, et une médiane de 20. Les sites Web Angular et Next.js avaient le même score moyen de 23, mais Angular avait une médiane plus élevée, ce qui en faisait le troisième cadre le plus rapide. Enfin, React, bien que le framework le plus populaire, se traduisant par les scores de performance les plus bas, avec un score Lighthouse moyen de 22.
Travailler avec Layer0 (maintenant Edgio)
Layer0 permet aux équipes de développement de créer et de déployer rapidement et facilement des applications Web natives de périphérie. C’est la plateforme JAMstack la plus complète du marché – conçue pour exécuter plus de 40 frameworks modernes tels que React, Angular, vue et Next.js – et il a été prouvé qu’elle double la vitesse des développeurs.
Les architectures Web traditionnelles sont également prises en charge pour migrer progressivement vers une architecture headless. Pour les sites nécessitant flexibilité et modernisation, Layer0 aide à réduire les risques et à accélérer le rythme de migration sans avoir à modifier l’architecture sous-jacente ou à effectuer une réécriture complète du site.
