Au plus fort des commandes de refuges en 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 qui approche à grands pas, 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, conçue pour la performance, est crucial et en aucun cas facile. Les entreprises doivent choisir la plate-forme de commerce électronique, le CDN et le frontend adaptés à leur activité. 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 découvrir nos résultats détaillés.
React, Angular, vue.js, Next.js, Nuxt.js – comment se comparent-ils ?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Nous avons analysé les scores de Lighthouse 6 pour un sous-ensemble de près de 2 000 sites Web à fort trafic utilisant Angular, Next.js, Nuxt.js, React et vue.js pour révéler quel frontend fournit les sites Web les plus rapides. Nous avons rapidement constaté que le score moyen de Lighthouse sur les frontend é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 revenus.
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 ont obtenu en moyenne 27, mais une médiane basse 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 à chargement rapide.
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 affichaient la même moyenne à 23 ; cependant, la distribution des scores de performance pour les sites Angular était plus diversifiée et la médiane était inférieure à 18. Le frontend avec les pires performances a été étonnamment React. Il a obtenu un score Lighthouse moyen de 22 et une médiane de 18, même s’il héberge certains des plus grands noms du commerce électronique, dont Amazon et Groupon.
« Notre site Web est la passerelle de notre marque, et il doit fonctionner de manière optimale pour générer des conversions et des revenus. Grâce à la plateforme d’applications Edgio, notre site est désormais ultra-rapide et nos versions sont devenues beaucoup plus faciles à déployer. »
Joe Schmo – Développeur logiciel
Nuxt.js s’assemble pour être le framework web de commerce électronique le plus rapide
Nuxt.js est un framework open-source sans serveur basé sur vue.js, Node.js, Webpack et Babel.js créé pour construire rapidement des applications isomorphes complexes. 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 Nuxt.js pour aider à promouvoir des frameworks modernes et open-source qui facilitent un Web plus rapide. Actuellement, Nuxt.js a 29.4k étoiles sur GitHub.
Les sites Web utilisant Next.js ont obtenu un score Lighthouse moyen solide de 27, juste un point au-dessus de la moyenne sur les frontend. 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 de variance dans les scores comparativement aux autres cadres, ce qui démontre sa capacité à fournir des scores de performance Lighthouse constamment proches de sa moyenne. Cependant, ces données nous indiquent également que les sites Nuxt.js ne délivraient pas de hauts extrêmes ou des scores presque parfaits (dans les années 90), comme les frameworks comme les sites Web vue.js ou Angular, qui seront abordés dans les prochaines sections.
Heavy Industry and Engineering était la catégorie avec les sites web Nuxt.js les plus rapides, avec une moyenne de score de performance de 37, un énorme 42% plus rapide que le score moyen de son framework à lui seul. Mis à part les catégories, les sites Nuxt.js les plus rapides ont été 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 augmenté au-dessus de la moyenne du cadre avec des scores 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 bas de 10 étaient Nespresso.com et DolceVita.com.
Explorez les produits d’application Edgio pour de meilleures performances
Applications
Réduction de la latence, amélioration des performances
Performances
Répondez aux données en temps réel pour les applications de chat en direct ou les jeux.
Vue.js se place en deuxième position
Vue.js est un framework JavaScript open-source pour la création d’applications monopage qui ont rapidement augmenté en popularité au cours des 6 ans 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 attrait 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 enregistré le deuxième score de performance le plus élevé, avec une moyenne de 27 et un score médian de 20 – avec la moitié des sites situés au-dessus et en dessous d’un score de 20. Sur la base des percentiles, 75 % des sites vue.js avaient un score de performance de 34 ou moins, et 90 % avaient un score de 55 ou moins.
Les catégories de sites Web les plus rapides dans ce domaine étaient celles de Hobbies and Leisure, avec une note moyenne de 37, y compris Nikon et Fujifilm. Cette catégorie a obtenu des résultats 37 % supérieurs à la moyenne des sites Web vue.js. Les 3 meilleurs sites vue.js étaient PaintScratch.com, iMobie.com et EmmaOneSock.com avec des scores de 96, 93 et 92, respectivement – des scores de Performance presque parfaits.
En descendant au classement, les données révèlent que FactoryChryslerParts.com ont obtenu une note de 68, In-n-Out.com une note de 61, Poshmark.com une note de 53 et LouisVuitton.com une note de 34, tous dépassant la moyenne de vue.js. Les 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 connu des performances encore plus mauvaises, avec des scores inférieurs à 10.
« Quote de tirage brillante »
Joe Schmo – Développeur logiciel
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. Il s’agit d’une solution populaire pour les sites Web de grandes entreprises qui envisagent de faire évoluer leur site rapidement, car Angular est connu pour ses applications plus complexes.
Le score de performance moyen des sites Angular était de 23 avec une médiane de 18, indiquant une distribution positivement biaisée. 75 % des sites Web Angular avaient un score Lighthouse de 30 ou moins, et 90 % avaient un score de 50 ou moins. Sur le plan catégorique, les sites de Santé ont obtenu les meilleurs résultats sur ce framework, 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 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 compagnie de machines et de moteurs et AerLingus.com, une compagnie aérienne.
Certains sites angulaires sautant au-dessus du score moyen incluaient Android.com à 51, Expedia.com à 44, PepsiCo.com à 42 et Lamborghini.com à 31. Approchant le score global moyen d’Angular pour Lighthouse, Sears est arrivé à 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 révèlent que trois compagnies aériennes sont les sites Angular les plus lents : Delta à 3, Frontier à 2 et Spirit à 1.
Next.js est inférieur de 8 % au score de performance moyen
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 en moyenne un score 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% sont tombés en dessous de 43. Catégoriquement, les sites de voyages et de tourisme obtiennent les meilleurs résultats avec Next.js, avec un score moyen de Lighthouse de 29. Et les trois sites Next.js les plus rapides étaient Bartleby.com, Kelloggs.com et Holidayinnclub.com, avec 89, 73 et 75, respectivement.
RetailMeNot.com et HermanMiller.com ont chacun dépassé le score Lighthouse moyen de leurs cadres d’au moins 21 %, tandis que Sears.com, AlexanderMcQueen.com, Ticketmaster.com et RedRobin.com affichent des scores 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 donné des scores Lighthouse faibles en dessous 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 pour construire rapidement et facilement des interfaces utilisateur ou des composants d’interface utilisateur. C’est l’un 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é est de la plus haute importance pour eux, car de grandes entreprises comme Twitter et Airbnb utilisent React. Fait intéressant, les performances ne sont pas aussi prioritaires. 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 framework. Il détient une médiane de 18, avec 75% de ses sites délivrant un score inférieur à 29 et 90% tombant en dessous de 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 Lighthouse le plus élevé était ceux de Mass Merchant, y compris Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, sam’s Club, Groupon et Overstock. Mis à part les catégories, les 3 sites React les plus rapides se classent historicrail.com (appartenant à Amazon) à 98, historicaviation.com (appartenant à Amazon) à 91 et flipkart.com à 74.
D’autres grands noms au-dessus de la moyenne de la bibliothèque étaient Amazon à 57 ans, VRBO à 49 ans, Priceline à 47 ans, Wayfair à 39 ans, Lowes à 33 ans et Netflix à 31 ans. Les noms approchant la note moyenne de la bibliothèque sont 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 ans, Best Buy et Tory Burch à 8 ans, ProFlowers à 6 ans et Dior à 3 ans.
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 performance élevé 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 tournant 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 très fréquentés sur des frameworks frontaux modernes.
Les sites web Nuxt.js sont les plus rapides, avec un score moyen de performance Lighthouse de 27 et une médiane de 22. Vue.js a été finaliste avec le même score de performance moyen de 27, et une médiane de 20. Les sites Web Angular et Next.js ont obtenu le même score moyen de 23, mais Angular a une médiane plus élevée, ce qui en fait le troisième framework le plus rapide. Enfin, React, bien que le framework le plus populaire, se traduit par les scores de performance les plus bas, avec un score Lighthouse moyen de 22.
