At the peak of the US shelter-in-place orders, 94% of the population was affected. While restrictions have loosened up, Americans still choose to stay safe inside their homes and make purchases online. With the holiday season right around the corner, businesses of all kinds are quickly trying to figure out the best solution 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 easy. Businesses must pick the right eCommerce platform, CDN and frontend for their business. We’ve already compared the Shopify, Magento 2 and Salesforce Commerce Cloud platforms and 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 findings.
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 27 but a low median of 20. While Vue.js had a couple of impressive outliers, Nuxt.js proved 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 a 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 to 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, which 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 is an open-source JavaScript framework for building single-page applications that have rapidly increased in popularity over the course of 6 years since its launch in 2014. It has over 171,000 stars on GitHub, making it the most popular modern framework. Its primary draw is that it lets developers quickly build fast, growing JavaScript applications. It’s quite similar to Angular and React in that it is lightweight and offers robust routing solutions for large applications.
Vue.js websites saw the second highest performance scores, with an average of 27 and a 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% scored 55 or lower.
The fastest website category within this domain were those in Hobbies and Leisure, with an average score of 37, including Nikon and FujiFilm. This category 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 68, In-n-Out.com scored 61, Poshmark.com scored 53 and LouisVuitton.com scored 34—all exceeding the Vue.js average. Less impressive were Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com and Chewy.com, delivering low scores of 10-15. Chipotle, Subaru 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 were Cat.com, a powerful machines and engine company and AerLingus.com, an airline company.
Some 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 whenever a new request comes in with a server.
Websites on this framework averaged a Lighthouse performance score of 22, which is 8% under the average. The data showed that 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
React is an open-source JavaScript library developed by Facebook in 2013. Unlike the rest of the frameworks covered in this article, React is not a framework but a UI library for quickly and easily building user interfaces or UI components quickly and easily. It’s one of the most mature frontends in the bunch and is also one of the most popular projects on GitHub, with more than 155,000 stars as of this blog’s publishing date.
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 a 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’s 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.
Bottom-line
Google Lighthouse has become the de facto tool for many eCommerce businesses to measure their website performance. A high-performance score signifies your site is fast to load and, most importantly—meets user expectations.
Website speed is more important than ever, with consumers everywhere turning online to avoid crowded stores during this pandemic. Website performance can vary dramatically depending on which framework you use, greatly impacting the user experience. We found which framework provides the fastest speeds by analyzing the Lighthouse performance scores of nearly 2,000 highly-trafficked websites on modern frontend frameworks.
Nuxt.js websites perform the fastest, with an average Lighthouse performance score of 27 and a median of 22. Vue.js was 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. Finally, React, although the most popular framework, resulting in the lowest performance scores, with an average Lighthouse score of 22.
Work with Layer0 (now Edgio)
Layer0 allows dev teams to quickly and easily build and deploy edge-native web apps. It is the most complete Jamstack platform on the market – built to run over 40 modern frameworks such as React, Angular, Vue, and Next.js – and is proven to double developer velocity.
Traditional web architectures are also supported to migrate to headless architecture gradually. For sites needing flexibility and modernization, Layer0 helps reduce risk and increase the pace of migration without the need to change the underlying architecture or do a full site rewrite.