At the peak of the US shelter-in-place orders, 94% of the population was affected. While restrictions have loosened up, Americans are still choosing to stay safe inside their homes and make their purchases online. With the holiday season right around the corner, businesses of all kinds are quickly trying to figure out what the best solution is to create a superior online shopping experience.
Choosing the right technology stack for your site, one built for performance, is crucial and by no means an easy task. Businesses need to pick the right eCommerce platform, CDN and frontend for their business. We've already compared the Shopify, Magento 2 and Salesforce Commerce Cloud platforms, as well as the leading CDNs. In this article, we will focus on the performance of the modern frontends: Angular, Next.js, Nuxt.js, React and Vue.js. We quickly found that Nuxt.js leads the pack, followed by Vue.js and Next.js. Read on for our detailed finding.
React, Angular, Vue.js, Next.js, Nuxt.js – how do they compare?
We analyzed the mobile Lighthouse 6 scores for a subset of nearly 2,000 high-trafficked websites running Angular, Next.js, Nuxt.js, React and Vue.js to reveal which frontend delivers the fastest websites. We quickly found that the average Lighthouse score across frontends was 24 with a median of 19. While this might sound low, it is actually 26% higher than the average performance score for the leading 500 US internet retailers by revenue.
Nuxt.js and Vue.js websites battled to deliver the fastest websites. Nuxt.js sites averaged a Lighthouse score of 27 with a median of 22, and Vue.js sites averaged a score of 27, but a low median of 20. While Vue.js had a couple of impressive outliers, Nuxt.js proves to be the most reliable framework in delivering the fastest loading websites.
Coming in third was Next.js, holding an average performance score of 23 with a median of 19.5. Angular websites saw the same average at 23, however the distribution of performance scores for Angular sites was more diverse and the median fell short at 18. The frontend with the worst performance was surprisingly React. It held an average Lighthouse score of 22 and median of 18, even though it hosts some of the biggest names in eCommerce, including Amazon and Groupon.
Nuxt.js stacks up to be the fastest eCommerce web framework
Nuxt.js is an open-source, serverless framework based on Vue.js, Node.js, Webpack and Babel.js created to build fast, complex isomorphic applications quickly. The benefits of this framework include automatic code-splitting, page caching and prefetching. Layer0 is proud to be a Nuxt.js sponsor to help promote modern, open-source frameworks working to facilitate a faster Web. Currently, Nuxt.js has 29.4K stars on GitHub.
Websites using Next.js had a solid average Lighthouse score of 27—just a point above the average across frontends. The median score for Nuxt.js sites fell at 22, representing a positively skewed distribution. On a percentile basis, a score of 35 marked the 75th percentile and score of 49 marked the 90th percentile. This framework had less variance in scores compared to other frameworks, demonstrating its capability to deliver Lighthouse performance scores consistently near its average. However, this data also tells us Nuxt.js sites weren’t found to deliver extreme highs, or nearly perfect scores (in the 90s), such as frameworks like Vue.js or Angular websites—which will be discussed in the next sections.
Heavy Industry and Engineering was the category with the fastest Nuxt.js websites, averaging a performance score of 37, a whopping 42% faster than its framework’s average score, alone. Categories aside, the fastest Nuxt.js websites were Appycouple.com, NJtransit.com and WPS.com who held scores of 68, 63 and 48 respectively. Trivago.com, TrueandCo.com and Garmin.com also rose above the framework’s average with notable performance scores of 47, 36 and 35, respectively. Nintendo fell right at the average with a score of 20, and falling short of a low score of 10 were Nespresso.com and DolceVita.com.
Vue.js places as the runner up
Vue.js websites saw the second highest performance scores, with an average of 27 and median score of 20––with half the sites sitting above and below a score of 20. On a percentile basis, 75% of Vue.js sites had a performance score of 34 or below, and 90% of the sites scored a 55 or lower.
The fastest website category within this set of domains were those in Hobbies and Leisure, with an average score of 37, including Nikon and FujiFilm. This category on its own performed 37% better than the average Vue.js website. The top 3 fastest Vue.js sites were PaintScratch.com, iMobie.com and EmmaOneSock.com with scores of 96, 93 and 92, respectively – nearly perfect Performance scores.
Coming down in rank, the data reveals FactoryChryslerParts.com scored a 68, In-n-Out.com scored 61, Poshmark.com scored a 53 and LouisVuitton.com scored a 34—all exceeding the Vue.js average. Less impressive was Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com and Chewy.com delivering low scores of 10-15. Chipotle, Subuaru and BMW had even worse performance, with scores below 10.
Angular takes third place with a few nearly perfect scores
Angular is the oldest framework of the group, created and developed by Google in 2010 and has over 65,000 stars on GitHub. It is a popular solution for large enterprise websites that plan to scale their site quickly, as Angular is known for more complex applications.
The average performance score of Angular websites was 23 with a median of 18, indicating a positively skewed distribution. 75% of Angular websites held a Lighthouse score of 30 or below, and 90% held a score of 50 or below. On a categorical level, Health websites performed the best on this framework, with an average score of 28. Some of these Health websites included CVS.com, VitaminShoppe.com, LifetimeFtiness.com and Plexus.com.
Deichmann.com, MegaBus.com and ShopStyle.com were the top 3 fastest Angular sites with impressive scores of 98, 95 and 83 respectively. Only two other sites fell in Angular’s top 5th percentile for performance, which was Cat.com, a powerful machines and engine company and AerLingus.com, an airline company.
Some of the Angular sites jumping above the average score included Android.com at 51, Expedia.com at 44, PepsiCo.com at 42 and Lamborghini.com at 31. Nearing Angular’s average overall Lighthouse score came Sears at 26, Gamefly.com at 25, BaskinRobbins.com at 19, Disney.com at 18, and CocaCola.com at 17. Falling just short of the average included brand names such as Xfinity and Patagonia with scores of 15 and 14. Finally, the data revealed three airlines to be the slowest Angular websites: Delta at 3, Frontier at 2 and Spirit at 1.
Next.js falls 8% short of the average performance score
Next.js is an open-source React-based isomorphic framework for server-side rendered applications, and has over 52,000 stars on GitHub. To ensure fast page loads, Next.js automatically splits code and dynamically generates the HTML every time a new request comes in with the use of a server.
Websites on this framework averaged a Lighthouse performance score of 22, which is 8% under the average. The data showed that the 50% of Next.js sites delivered a score below 20, 75% scored below 30 and 90% fell below 43. Categorically, Travel and Tourism sites perform the best with Next.js, seeing an average Lighthouse score of 29. And the fastest three Next.js sites were Bartleby.com, Kelloggs.com and Holidayinnclub.com scoring 89, 73 and 75, respectively.
RetailMeNot.com and HermanMiller.com each exceeded its frameworks average Lighthouse score by at least 21%, while Sears.com, AlexanderMcQueen.com, Ticketmaster.com and RedRobin.com deliver mediocre scores of 26, 23, 22 and 22 respectively. A few large corporations with meager performance include EddieBauer.com, TragerGrills.com, Bonobos.com and Smirnoff.com with scores between 10-15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com and Farri.com delivered low Lighthouse scores under 10.
React hosts impressive brands with unimpressive scores
Facebook has stated that stability is of utmost importance to them, as huge companies like Twitter and Airbnb use React. Interestingly, performance is not as prioritized. The data reveals React websites averaged Lighthouse score of 22, falling 8% short of the overall average framework score. It holds a median of 18, with 75% of its sites delivering a score below 29 and 90% falling below 40.
Apparel, Accessories, and Shoes was the category with the largest share of React domains but the category with the highest average Lighthouse score were those in Mass Merchant, including Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam's Club, Groupon and Overstock. Categories aside, the top 3 fastest React websites ranked historicrail.com (owned by Amazon) at 98, historicaviation.com (owned by Amazon) at 91 and flipkart.com at 74.
Some other big names above the library’s average were Amazon at 57, VRBO at 49, Priceline at 47, Wayfair at 39, Lowes at 33 and Netflix at 31. Names nearing the library’s average score were Target at 25, Sur La Tab and StitchFix at 24, Gap and Glossier at 21, Victoria Secret at 20 and Crate and Barrel at 19. Some of the biggest losers in the industry are 23andMe.com at 9, Best Buy and Tory Burch at 8, ProFlowers at 6 and Dior at 3.
Google Lighthouse has become the de facto tool for many eCommerce businesses to measure how their website performs. A high performance score signifies your site is fast to load and most importantly—meets user expectations.
Website speed is more important than ever before with consumers everywhere turning online to avoid crowded stores during this pandemic. Depending on which framework you use, website performance can vary dramatically, greatly impacting the user experience. From analyzing the Lighthouse performance scores of nearly 2,000 highly-trafficked websites on modern frontend frameworks, we found which framework provides the fastest speeds.
Nuxt.js websites perform the fastest, with an average Lighthouse performance score of 27 and a median of 22. Vue.js proved to be the runner up with the same average performance score of 27, and a median of 20. Angular and Next.js websites held the same average score of 23, but Angular held a higher median making it the third fastest framework of the bunch. Finally, React, although the most popular framework, resulted in the lowest performance scores, with an average Lighthouse score of 22.
Layer0 helps large, dynamic websites deliver sub-second page loads – no matter your frontend. Layer0 is your all-in-one solution to develop, deploy, preview, experiment on, monitor, and run your frontend. Test drive it out yourself today for free! Or schedule a call with a site speed specialist to see how Layer0 can deliver instant page loads in just a few weeks.