Auf dem Höhepunkt der US-Notunterkünfte waren 94 % der Bevölkerung betroffen. Obwohl sich die Beschränkungen gelockert haben, entscheiden sich die Amerikaner immer noch dafür, in ihren Häusern sicher zu bleiben und Online-Einkäufe zu tätigen. Die Weihnachtszeit steht vor der Tür, und Unternehmen aller Art versuchen schnell, die beste Lösung für ein überragendes Online-Shopping-Erlebnis zu finden.
Die Wahl des richtigen Technologiestapels für Ihren Standort, einer Technologie, die auf Leistung ausgelegt ist, ist entscheidend und keineswegs einfach. Unternehmen müssen die richtige eCommerce-Plattform, das richtige CDN und das richtige Frontend für ihr Unternehmen auswählen. Wir haben bereits die Plattformen Shopify, Magento 2 und Salesforce Commerce Cloud mit den führenden CDNs verglichen. In diesem artikel konzentrieren wir uns auf die Leistung der modernen Frontends: Angular, Next.js, Nuxt.js, React und Vue.js. Wir fanden schnell heraus, dass Nuxt.js das Ruder anführt, gefolgt von Vue.js und Next.js. Lesen Sie weiter für unsere detaillierten Ergebnisse.
React, Angular, Vue.js, Next.js, Nuxt.js – wie vergleichen sie sich?
Wir analysierten die mobilen Lighthouse 6-Punktzahlen für eine Teilmenge von fast 2.000 Websites, auf denen Angular, Next.js, Nuxt.js, React und Vue.js ausgeführt wurden, um herauszufinden, welches Frontend die schnellsten Websites bereitstellt. Wir fanden schnell heraus, dass der durchschnittliche Wert von Lighthouse in Frontends 24 betrug, mit einem Median von 19. Dies mag zwar niedrig klingen, liegt aber tatsächlich 26 % über dem durchschnittlichen Leistungswert der führenden 500 US-Internethändler nach Umsatz.
Nuxt.js und Vue.js Websites kämpften um die schnellsten Websites. Nuxt.js-Standorte ermittelten im Durchschnitt einen Lighthouse-Wert von 27 mit einem Median von 22, Vue.js-Standorte durchschnittlich 27, aber einen niedrigen Median von 20. Obwohl Vue.js einige beeindruckende Ausreißer hatte, erwies sich Nuxt.js als das zuverlässigste Framework bei der Bereitstellung der Websites mit den schnellsten Ladezeiten.
Auf dem dritten Platz stand Next.js mit einem durchschnittlichen Leistungswert von 23 und einem Median von 19,5. Bei Angular-Websites war der Durchschnitt mit 23 gleich, die Verteilung der Performance-Scores für Angular-Websites jedoch vielfältiger und der Median lag bei 18. Das Frontend mit der schlechtesten Leistung war überraschend reagierend. Es erzielte einen durchschnittlichen Lighthouse-Wert von 22 und einen Median von 18, obwohl es einige der größten Namen im E-Commerce beherbergt, darunter Amazon und Groupon.
Nuxt.js ist das schnellste E-Commerce-Web-Framework
Nuxt.js ist ein serverloses Open-Source-Framework, das auf Vue.js, Node.js, Webpack und Babel.js basiert, um schnelle, komplexe isomorphe Anwendungen schnell zu erstellen. Zu den Vorteilen dieses Frameworks gehören automatisches Code-Splitting, Seiten-Caching und Prefetching. Layer0 ist stolz darauf, ein Nuxt.js-Sponsor zu sein, um moderne Open-Source-Frameworks zu fördern, die ein schnelleres Web ermöglichen. Derzeit hat Nuxt.js 29,4 km Stars auf GitHub.
Websites, die Next.js verwenden, hatten einen soliden durchschnittlichen Lighthouse-Wert von 27 – nur einen Punkt über dem Durchschnitt in allen Frontends. Der mediane Wert für Nuxt.js-Standorte fiel auf 22, was eine positiv verzerrte Verteilung darstellt. Auf Perzentilbasis markierte ein Score von 35 das 75. Perzentil und ein Score von 49 das 90. Perzentil. Dieses Framework wies im Vergleich zu anderen Frameworks weniger Abweichungen bei den Bewertungen auf, was seine Fähigkeit beweist, die Leistung von Lighthouse konsistent nahe dem Durchschnitt zu liefern. Aus diesen Daten geht jedoch auch hervor, dass Nuxt.js-Websites (in den 90er Jahren) keine extremen Höhen oder nahezu perfekten Punktzahlen liefern konnten, wie z. B. Frameworks wie Vue.js oder Angular-Websites – die in den nächsten Abschnitten besprochen werden.
Heavy Industry and Engineering war die Kategorie mit den schnellsten Nuxt.js-Websites und erreichte im Durchschnitt eine Performance-Bewertung von 37, was 42 % schneller ist als die durchschnittliche Bewertung des Frameworks allein. Die schnellsten Nuxt.js-Websites waren Appycouple.com, NJtransit.com und WPS.com, die Punktzahlen von 68, 63 und 48 erreichten. Trivago.com, TrueandCo.com und Garmin.com stiegen ebenfalls über dem Durchschnitt des Gemeinschaftsrahmens mit bemerkenswerten Leistungswerten von 47, 36 und 35. Nintendo fiel mit einer Punktzahl von 20 genau auf den Durchschnitt, und hinter einer niedrigen Punktzahl von 10 lag er bei Nespresso.com und DolceVita.com.
Vue.js wird als Nächstplatzierter platziert
Vue.js ist ein Open-Source-JavaScript-Framework für die Erstellung von einseitigen Anwendungen, die im Laufe von 6 Jahren seit seiner Einführung im Jahr 2014 schnell an Popularität gewonnen haben. Es hat über 171.000 Sterne auf GitHub und ist damit das beliebteste moderne Framework. Der Hauptgrund dafür ist, dass Entwickler schnell wachsende JavaScript-Anwendungen erstellen können. Es ähnelt Angular und React, da es leicht ist und robuste Routing-Lösungen für große Anwendungen bietet.
Die Webseiten von Vue.js verzeichneten die zweithöchsten Leistungsbewertungen mit einem Durchschnitt von 27 und einem Medianwert von 20 – wobei die Hälfte der Websites über und unter 20 lag. Auf Perzentilbasis wiesen 75 % der Vue.js-Standorte eine Performance-Bewertung von 34 oder darunter auf, und 90 % erreichten 55 oder weniger.
Die schnellste Website-Kategorie innerhalb dieser Domain waren die in Hobbies und Freizeit mit einer Durchschnittsnote von 37, darunter Nikon und Fujifilm. Diese Kategorie war 37 % besser als die durchschnittliche Vue.js-Website. Die drei schnellsten Vue.js-Sites waren PaintScratch.com, iMobie.com und EmmaOneSock.com mit 96, 93 und 92 – fast perfekte Performance.
Nach dem Rang wurden FactoryChryslerParts.com mit 68 Punkten, In-n-Out.com mit 61 Punkten, Poshmark.com mit 53 Punkten und LouisVuitton.com mit 34 Punkten bewertet – alle übertreffen den Vue.js-Durchschnitt. Weniger beeindruckend waren Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com und Chewy.com, mit niedrigen Werten von 10:15. Chipotle, Subaru und BMW hatten noch schlechtere Leistungen mit weniger als 10 Punkten.
Angle belegt den dritten Platz mit ein paar fast perfekten Punktzahlen
Angular ist das älteste Framework der Gruppe, das 2010 von Google geschaffen und entwickelt wurde und über 65.000 Sterne auf GitHub hat. Es ist eine beliebte Lösung für Websites großer Unternehmen, die ihre Website schnell skalieren möchten, da Angular für komplexere Anwendungen bekannt ist.
Der durchschnittliche Performance-Score von Angular-Websites betrug 23 mit einem Median von 18, was auf eine positiv verzerrte Verteilung hindeutet. 75 % der Websites von Angular hatten eine Lighthouse-Bewertung von 30 oder darunter und 90 % eine Bewertung von 50 oder darunter. Auf kategorischer Ebene haben Gesundheits-Websites mit einer durchschnittlichen Punktzahl von 28 die besten Ergebnisse in diesem Rahmen erzielt. Einige dieser Gesundheits-Websites umfassten CVS.com, VitaminShoppe.com, LifetimeFtiness.com und Plexus.com.
Deichmann.com, MegaBus.com und ShopStyle.com waren die drei schnellsten Angular-Standorte mit beeindruckenden Werten von 98, 95 und 83. Nur zwei weitere Standorte fielen in Angular’s oberstes 5. Perzentil, nämlich Cat.com, ein leistungsstarkes Maschinen- und Motorenunternehmen und AerLingus.com, eine Fluggesellschaft.
Einige Angular Sites, die über dem Durchschnittswert lagen, waren Android.com bei 51, Expedia.com bei 44, PepsiCo.com bei 42 und Lamborghini.com bei 31. Die durchschnittliche Gesamtpunktzahl von Lighthouse erreichte Angular mit 26, Gamefly.com mit 25, BaskinRobbins.com mit 19, Disney.com mit 18 und CocaCola.com mit 17. Knapp hinter dem Durchschnitt lagen Markennamen wie Xfinity und Patagonia mit 15 und 14 Punkten. Schließlich ergab sich aus den Daten, dass drei Fluggesellschaften die langsamsten Websites von Angular sind: Delta bei 3, Frontier bei 2 und Spirit bei 1.
Next.js liegt um 8 % unter dem durchschnittlichen Leistungswert
Next.js ist ein reaktionsbasiertes isomorphes Open-Source-Framework für serverseitig gerenderte Anwendungen und verfügt über mehr als 52.000 Sterne auf GitHub. Um ein schnelles Laden der Seiten zu gewährleisten, teilt Next.js automatisch Code auf und generiert dynamisch HTML, wenn eine neue Anforderung mit einem Server eingeht.
Websites in diesem Framework ergaben einen durchschnittlichen Wert von 22 Lighthouse, was 8 % unter dem Durchschnitt liegt. Die Daten zeigten, dass 50 % der Next.js-Standorte eine Bewertung unter 20 erreichten, 75 % unter 30 und 90 % unter 43 erreichten. Kategorisch gesehen schneiden Reise- und Tourismus-Websites mit Next.js am besten ab und erreichen eine durchschnittliche Lighthouse-Punktzahl von 29. Und die schnellsten drei Next.js-Sites waren Bartleby.com, Kelloggs.com und Holidayinnclub.com, mit 89, 73 und 75.
RetailMeNot.com und HermanMiller.com übertrafen jeweils die durchschnittliche Lighthouse-Punktzahl des Frameworks um mindestens 21 %, während Sears.com, AlexanderMcQueen.com, Ticketmaster.com und RedRobin.com mittelmäßige Punktzahlen von 26, 23, 22 und 22 liefern. Zu den wenigen großen Unternehmen mit dürftiger Leistung zählen EddieBauer.com, TragerGrills.com, Bonobos.com und Smirnoff.com, mit Punktzahlen zwischen 10 und 15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com und Farri.com lieferten niedrige Werte von Lighthouse unter 10.
React präsentiert beeindruckende Marken mit unbeeindruckenden Bewertungen
React ist eine Open-Source-JavaScript-Bibliothek, die 2013 von Facebook entwickelt wurde. Im Gegensatz zu den anderen in diesem artikel behandelten Frameworks ist React kein Framework, sondern eine UI-Bibliothek, mit der Benutzeroberflächen oder UI-Komponenten schnell und einfach erstellt werden können. Es ist eine der ausgereiftesten Frontends der Gruppe und ist auch eines der beliebtesten Projekte auf GitHub, mit mehr als 155.000 Stars zum Veröffentlichungsdatum dieses Blogs.
Facebook hat erklärt, dass Stabilität für sie von größter Bedeutung ist, da riesige Unternehmen wie Twitter und Airbnb reagieren. Interessanterweise wird Leistung nicht so priorisiert. Die Daten zeigen, dass React-Websites im Durchschnitt einen Lighthouse-Wert von 22 erreichten und damit 8 % unter dem durchschnittlichen Gesamtwert des Frameworks lagen. Der Median liegt bei 18, wobei 75 % der Standorte eine Punktzahl unter 29 und 90 % unter 40 erreichen.
Apparel, Accessories, and Shoes war die Kategorie mit dem größten Anteil an React-Domains, aber die Kategorie mit dem höchsten durchschnittlichen Lighthouse-Score waren diejenigen in Maß Merchant, darunter Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon und Overstock. Abgesehen von den Kategorien rangierten die 3 besten Websites mit der schnellsten Reaktion auf historicrail.com (Eigentum von Amazon) auf 98, historicaviation.com (Eigentum von Amazon) auf 91 und flipkart.com auf 74.
Andere große Namen, die über dem Durchschnitt der Bibliothek lagen, waren Amazon bei 57, VRBO bei 49, Priceline bei 47, Wayfair bei 39, Lowes bei 33 und Netflix bei 31. Namen, die sich der Durchschnittsnote der Bibliothek näherten, waren Target bei 25, Sur La Tab und StitchFix bei 24, Gap und Glossier bei 21, Victoria’s Secret bei 20 und Crate and Barrel bei 19. Zu den größten Verlierern der Branche zählen 23andMe.com bei 9, Best Buy und Tory Burch bei 8, ProFlowers bei 6 und Dior bei 3.
Fazit
Google Lighthouse ist für viele E-Commerce-Unternehmen das de facto-Tool zur Messung der Website-Performance geworden. Eine hohe Performance bedeutet, dass Ihre Website schnell geladen werden kann und, was am wichtigsten ist, die Erwartungen der Benutzer erfüllt.
Die Geschwindigkeit der Website ist wichtiger denn je, da Verbraucher überall online gehen, um überfüllte Geschäfte während dieser Pandemie zu vermeiden. Die Performance der Website kann je nach verwendetem Framework stark variieren, was sich stark auf die Benutzererfahrung auswirkt. Wir fanden heraus, welches Framework die schnellsten Geschwindigkeiten bietet, indem wir die Leistungswerte von Lighthouse von fast 2.000 Websites mit hohem Datenverkehr in modernen Frontend-Frameworks analysierten.
Nuxt.js Websites sind am schnellsten mit einer durchschnittlichen Performance von 27 und einem Median von 22. Vue.js war der zweite mit dem gleichen durchschnittlichen Leistungswert von 27 und einem Median von 20. Die Websites von Angular und Next.js erreichten dieselbe durchschnittliche Punktzahl von 23, aber Angular erreichte einen höheren Median und war damit das drittschnellste Framework. Schließlich ist React, obwohl das beliebteste Framework, das zu den niedrigsten Leistungsbewertungen führt, mit einem durchschnittlichen Lighthouse-Ergebnis von 22.
Mit Layer0 arbeiten (jetzt Edgio)
Layer0 ermöglicht Entwicklerteams die schnelle und einfache Erstellung und Bereitstellung Edge-nativer Webanwendungen. Sie ist die umfassendste JAMstack-Plattform auf dem Markt, die für mehr als 40 moderne Frameworks wie React, Angular, Vue und Next.js entwickelt wurde. Sie verdoppelt nachweislich die Entwicklergeschwindigkeit.
Herkömmliche Webarchitekturen werden ebenfalls unterstützt, um schrittweise auf Headless-Architekturen zu migrieren. Für Standorte, die Flexibilität und Modernisierung benötigen, hilft Layer0 dabei, Risiken zu reduzieren und das Migrationstempo zu beschleunigen, ohne die zugrunde liegende Architektur zu ändern oder einen kompletten Standort neu zu schreiben.
