Select Page


Fast abstract ↬
Google collects efficiency data from tens of millions of opted-in Chrome browsers world wide and makes use of this data as a efficiency rating issue for its search engine. But it surely additionally makes this data freely obtainable in order that anybody can use it to test the real-world efficiency of particular person web sites. Much more considerably, it’s potential to section this knowledge in keeping with the applied sciences used within the web sites. On this article, Dan Shappir leverages this data to investigate and examine the efficiency of main JavaScript frameworks. Alongside the best way, he uncovers surprising behaviors and solves an online efficiency thriller.

Lately, frameworks have taken over internet growth, and React is main the cost. As of late it’s pretty unusual to come across a brand new web site or internet app that doesn’t depend on some framework, or a platform equivalent to a CMS.

And whereas React’s tagline is “a JavaScript library for constructing consumer interfaces” fairly than a framework, I feel that ship has sailed: most React builders think about it to be a framework and use it as such. Or they use it as part of a bigger utility framework equivalent to NextJS, Gatsby, or RemixJS.

However what value will we pay, as internet builders, for the improved developer expertise offered by such frameworks? And extra importantly what value, if any, do our customers pay for this alternative that we’re making?

Just lately Noam Rosenthal revealed two articles analyzing the frequent advantages and capabilities offered by varied frameworks, and in addition their related prices. I extremely advocate trying out these articles. One of many prices that Noam mentions is the elevated obtain measurement, particularly JavaScript bundle sizes, that stem from using frameworks and different libraries. Particularly, the rise within the quantity of downloaded JavaScript can have a direct influence on web site efficiency. And there are different elements of framework utilization that may influence efficiency as properly.

On this article, I’ll analyze the efficiency price related to varied frameworks, based mostly on discipline knowledge collected by the Google Chrome User Experience Report, or CrUX for brief. I feel this data is each fascinating and helpful, particularly given the wide range of framework and platform decisions at the moment obtainable to front-end and fullstack builders.

Nonetheless, when reviewing this knowledge, it’s necessary to not conflate correlation and causation. Simply because webpages constructed utilizing a specific framework extra usually have higher or poorer efficiency than one other framework doesn’t imply that the framework itself is all the time at fault. For instance, it may very well be as a result of sure frameworks are extra generally used for constructing heavier web sites.

That mentioned, this knowledge can help in making knowledgeable selections about which framework to decide on when implementing front-end tasks. When potential, I would like frameworks which have a better good efficiency ratio.

Gathering Core Internet Vitals From The Discipline

As I beforehand talked about, my major knowledge supply for this evaluation is Google CrUX. CrUX is a cloud-based database into which Actual Consumer Measurements (RUM) are collected from dwell Chrome browser classes. If in case you have opted-in to syncing searching historical past, haven’t arrange a Sync passphrase, and have utilization statistics reporting enabled then everytime you load a webpage utilizing Chrome, details about your session is routinely reported to CrUX. Particularly, the collected measurements embrace the three Core Web Vitals metrics measured for every session.

Lately, these metrics have turn out to be the cornerstone of recent Internet efficiency evaluation:

For every such metric, Google has outlined ranges that may be thought of good (inexperienced), common / wants enchancment (orange), and poor (purple).

Ranges defined by Google for metrics, such as LCP, FID, and CLS
(Large preview)

Beginning in June 2021, these metrics have turn out to be a rating issue for Google search. This additionally will increase their significance.

Along with accumulating discipline knowledge for every such session, artificial measurements are carried out on the web sites, utilizing the WebPageTest software. These lab measurements are collected into one other on-line repository referred to as the HTTP Archive. This consists of analyzing which applied sciences a webpage makes use of, together with which JavaScript frameworks, utilizing the Wappalyzer service.

Google makes it potential to execute queries on each these collections utilizing its BigQuery undertaking. Nonetheless, the best approach to achieve insights from this knowledge is to make use of the Core Web Vitals Technology Report created by Rick Viscomi. (Rick is Employees DevRel Engineer at Google and manages each CrUX and the HTTP Archive.) This report gives a way of interactively graphing performance-related knowledge for varied web-based platforms and applied sciences and simply compares them to one another.

For this text, I primarily depend on insights gained from analyzing knowledge introduced utilizing the Core Internet Vitals Expertise Report.

There are just a few caveats to notice when analyzing this knowledge:

  • Whereas discipline knowledge is collected by web page, the Expertise Report shows it per origin. The origin worth is an combination of the values of all of the pages for that origin, computed as a weighted common based mostly on web page site visitors.
  • Alternatively, the ratios of fine origins usually are not weighted. Because of this an origin that has comparatively little site visitors, however enough to be included within the dataset, is counted equally to a very fashionable, high-traffic origin. This side of the computation could be mitigated by filtering origins by recognition rating
  • HTTP Archive solely analyzes the homepage for every origin. Because of this the framework dedication is just made for the house web page, and all different pages belonging to that origin are aggregated for it, no matter in the event that they use it or not, or even when they use another framework.
  • Subdomains are measured as distinct origins.
Extra after bounce! Proceed studying under ↓

Evaluating CWV of JavaScript Frameworks

Let’s begin by evaluating the efficiency of assorted JavaScript frameworks. Particularly the ratio of internet sites constructed utilizing every of those frameworks which have good (inexperienced) scores for all three CWV metrics out of the entire websites constructed utilizing them. Websites which have good scores for all three CWV metrics ought to present a greater consumer expertise when it comes to efficiency, and are additionally eligible for the utmost Google search rating increase.

I’ve filtered the information to incorporate solely classes within the USA with a purpose to remove the influence of various geographical distributions between the totally different frameworks. The ALL line within the graphs refers to all web sites in CrUX, not simply those who use frameworks, and is used as a reference for comparability.

A chart with the percentage of websites with all green CWV for leading frameworks, sessions on mobile in the USA.
Proportion of internet sites with all inexperienced CWV for main frameworks, classes on cellular within the USA. (Large preview)
A chart with the percentage of websites with all green CWV for leading frameworks, sessions on desktops in the USA.
Proportion of internet sites with all inexperienced CWV for main frameworks, classes on desktops within the USA. (Large preview)

Notice: Cell on this case doesn’t embrace iOS gadgets, equivalent to iPhone. It’s because Chrome on iOS is only a skinny wrapper round a Safari core, and doesn’t measure or report CWV. (That is true for all browsers on iOS — they’re all simply Safari on the within.)

Initially, we will see that totally different frameworks produce noticeably totally different outcomes. Furthermore, for higher or worse, these outcomes are principally secure over all the previous 12 months. (Preact is an exception to this, and I’ll clarify the reason for this variation shortly.) This means that scores are significant, and never flukes, or outcomes of statistical anomalies.

Primarily based on these measurements, as Noam Rosenthal’s article signifies, utilizing frameworks does come at a efficiency price: by evaluating to the ALL baseline we see that web sites constructed utilizing any of those frameworks are usually much less more likely to have good CWV than web sites constructed with out frameworks. Whereas some frameworks like React, Preact and Svelte do come near the general common, it’s fascinating to notice that not one of the frameworks present considerably higher efficiency than the others.

React and Preact are basically neck and neck — some could also be stunned by this given how a lot smaller Preact is than React: roughly 4KB obtain vs 32KB (minified and gzipped in each circumstances). Apparently that 28KB obtain distinction isn’t so vital usually. Jason Miller, the creator of Preact recently had this to say about it:

I’ll examine the influence of Server-Aspect Rendering (SSR) and in addition Static Website Technology (SSG) as web page era/supply choices in additional element afterward on this article.

Vue and AngularJS are each in a second-tier — roughly 20-25% much less more likely to get good CWV on cellular, and 15-20% much less seemingly on desktop. (Once more, excluding iOS.) That mentioned, Vue seems to be gaining floor and slowly lowering the hole with React when it comes to efficiency.

The massive dip in Preact efficiency is not associated to any change within the framework itself or its utilization. Slightly it has to do with Preact’s identification by Wappalyzer. Sadly, this service missed most makes use of of Preact previous to November 2021. In consequence, the sooner outcomes for Preact needs to be ignored as being invalid.

Checking Prime Websites

After we restrict our view to solely the highest 1,000,000 websites within the USA (based mostly on site visitors) an fascinating change is that Vue nearly catches up with React as a result of the ratio of web sites having good efficiency utilizing Vue goes up and for React it surprisingly goes down:

A chart with the percentage of websites with all green CWV for leading frameworks, sessions on mobile in the USA for the top 1,000,000 websites.
Proportion of internet sites with all inexperienced CWV for main frameworks, classes on cellular within the USA for the highest 1,000,000 web sites. (Large preview)
A chart with the percentage of websites with all green CWV for leading frameworks, sessions on desktops in the USA for the top 1,000,000 websites.
Proportion of internet sites with all inexperienced CWV for main frameworks, classes on desktops within the USA for the highest 1,000,000 web sites. (Large preview)

And we see the identical conduct with the highest 100,000 websites, with React’s ratio truly dipping decrease in order that Vue barely surpasses it. I didn’t attempt to restrict the outcomes much more as a result of utilization numbers for some frameworks dropped so low that they had been not sufficiently statistically vital.

However wanting on the numbers we do have, the truth that Vue efficiency improves for higher-traffic websites maybe signifies that reaching good efficiency with Vue requires higher experience in that framework than merely with the ability to use it? It’s because greater site visitors websites usually tend to be constructed by organizations that may afford to make use of builders which have higher experience. Furthermore, bigger organizations can afford to spend extra on infrastructure that’s optimized for efficiency.

Alternatively, React websites truly go down when limiting the variety of websites measured by site visitors.

Why is it that React builders with higher experience are apparently much less more likely to produce quick loading web sites?

Effectively, that’s a really fascinating thriller that I’ll attempt to remedy.

Analyzing Per Metric

Along with analyzing CWV as an entire, the Expertise Report additionally makes it potential to look at every metric individually. Let’s begin by taking a look at FID:

A chart with the percentage of websites with green FID for leading frameworks, sessions on mobile in the USA.
Proportion of internet sites with inexperienced FID for main frameworks, classes on cellular within the USA. (Large preview)

You might need anticipated that web sites utilizing frameworks would pay a penalty within the responsiveness metric, because it’s the one which needs to be probably the most impacted by the numerous use of JavaScript. However, in follow, this isn’t the case. Actually, the FID metric is actually meaningless, with all frameworks reaching an almost excellent rating.

The identical is true even when wanting on the aggregation of all web sites within the assortment. Because of this, Google is researching a better responsiveness metric and is requesting feedback for the experimental metric they’re already testing.

Analyzing the LCP metric is way more significant:

A chart with the percentage of websites with green LCP for leading frameworks, sessions on mobile in the USA.
Proportion of internet sites with inexperienced LCP for main frameworks, classes on cellular within the USA. (Large preview)

Apparently, LCP scores are a powerful match for CWV as an entire, however extra unfold out: ALL, React, Preact, and Svelte are roughly 10% greater, whereas Vue and AngularJS stay basically the identical. However after we restrict to the highest 1,000,000 websites we see Preact and Svelte enhance some extra, however React doesn’t. In consequence, Vue catches up with it.

A chart with the percentage of websites with green LCP for leading frameworks, sessions on mobile in the USA for the top 1,000,000 websites.
Proportion of internet sites with inexperienced LCP for main frameworks, classes on cellular within the USA for the highest 1,000,000 web sites. (Large preview)

Lastly let’s take a look at CLS, beginning with all web sites:

A chart with the percentage of websites with green CLS for leading frameworks, sessions on mobile in the USA.
Proportion of internet sites with inexperienced CLS for main frameworks, classes on cellular within the USA. (Large preview)

And for the highest 1,000,000 web sites:

A chart with the percentage of websites with green CLS for leading frameworks, sessions on mobile in the USA for the top 1,000,000 websites.
Proportion of internet sites with inexperienced CLS for main frameworks, classes on cellular within the USA for the highest 1,000,000 web sites. (Large preview)

Right here we see each React and Preact, particularly React, going considerably down, leading to Vue surpassing each of them.

In different phrases, for Vue, each the ratio of fine LCP and CLS enhance after we test high websites solely. For React, alternatively, LCP stays principally the identical, whereas CLS truly degrades.

This might point out {that a} purpose for the efficiency degradation seen for high websites utilizing React is a rise within the quantity of advertisements on pages. Advertisements usually adversely influence CLS as a result of as they seem they push different content material down. Nonetheless, I don’t assume that’s the case as a result of it doesn’t clarify the distinction in conduct between React and the opposite frameworks. Additionally, you’d count on advertisements to influence LCP as properly, however we see that LCP stays basically the identical.

To attempt to higher perceive this conduct, let’s test different webpage elements visualized by the Expertise Report.

Analyzing Further Webpage Points

Along with efficiency scores, the Expertise Report allows evaluation of useful resource obtain sizes. It’s well-known that the quantity of JavaScript utilized by a web page can have a direct influence on its efficiency as a result of all of the code must be downloaded, parsed and executed. Let’s examine the quantity of JavaScript downloaded by the assorted frameworks:

A chart with JavaScript download size in KB for mobile in the USA
JavaScript obtain measurement in KB for cellular within the USA. (Large preview)

Unsurprisingly, web sites that use frameworks obtain considerably extra JavaScript than web sites generally. This is because of all of the performance required for Single Web page Functions (SPA), equivalent to routing and client-side rendering.

Additionally unsurprisingly, web sites constructed utilizing Svelte obtain much less JavaScript than every other of those frameworks. That is because of the Svelte compiler dealing with at build-time a number of performance that different frameworks must carry out at run-time. In consequence, Svelte doesn’t must deploy the code required for such performance. It’s additionally potential that builders utilizing Svelte place a higher premium on delivering lean-and-mean webpages than builders utilizing different platforms.

That mentioned, the 226KB distinction between the median for Svelte websites and React websites solely interprets to a 2.4% improve within the quantity of web sites which have good CWV. This highlights the superb enchancment that browsers have been in a position to obtain in dealing with bigger JavaScript payloads, for instance by parsing the JavaScript off of the principle thread, in the course of the obtain. I assume that caching, each within the browser and CDNs, contributes to this as properly.

It’s additionally fascinating to notice that web sites and apps utilizing Preact truly obtain extra JavaScript than these utilizing React. Maybe these websites selected Preact in an effort to scale back their whole weight. In any occasion, this will likely clarify why we didn’t see noticeable efficiency enhancements for Preact over React: no matter advantages Preact gives are offset by the applying code itself.

After we take a look at the highest 1,000,000 we see that the quantity of JavaScript will increase, with the fascinating exception of Vue.

A chart with JavaScript download size in KB for mobile in the USA for the top 1,000,000 websites.
JavaScript obtain measurement in KB for cellular within the USA for the highest 1,000,000 web sites. (Large preview)

This may occasionally clarify why we noticed such a major enchancment for Vue for the highest websites, in comparison with the opposite frameworks. Within the case of these different frameworks, it seems that no matter higher experience the builders engaged on high websites could have, it doesn’t translate to diminished JavaScript obtain sizes. Really, the other is true — maybe because of the additional performance offered by such web sites.

One other very fascinating comparability is the quantity of picture knowledge downloaded:

A chart with the images download size in KB for mobile in the USA.
Photographs obtain measurement in KB for cellular within the USA. (Large preview)

Right here we see that websites constructed utilizing React, Svelte and Angular obtain considerably much less picture knowledge than web sites generally. This may occasionally must do with such websites leveraging fashionable methods for lowering picture downloads, equivalent to lazy loading and newer picture codecs. Apparently, Angular websites obtain considerably much less picture knowledge than every other framework.

Wanting on the high websites we see a major improve in picture downloads throughout the board.

A chart with the images download size in KB for mobile in the USA for the top 1,000,000 websites.
Photographs obtain measurement in KB for cellular within the USA for the highest 1,000,000 web sites. (Large preview)

This may occasionally must do with high websites being extra content-rich. Particularly, high websites are more likely to have extra advertisements in them, that are primarily photographs. And, as we’ll see, there are different potential explanations as properly.

The Influence Of SSR And SSG

As Jason Miller said within the tweet that I beforehand quoted, technical decisions involving webpage supply have the best influence on the CWV metrics, particularly on LCP. Strategies equivalent to Server-Aspect Rendering (SSR) and Static Website Technology (SSG) ship contentful HTML to the browser from the get-go, enabling it to show the content material instantly because it arrives. That is often a lot sooner than visible content material could be generated by client-side rendering methods, particularly when the contentful HTML is cached in a CDN or the browser itself. Nonetheless, correctly implementing the required infrastructure for this technique of operation could be difficult when utilizing a JavaScript framework. In consequence, lately we’ve witnessed the introduction of a number of internet utility frameworks that present this performance out-of-the-box for the main JavaScript frameworks and UI libraries.

Given all this, we count on web sites constructed utilizing these internet utility frameworks to have a noticeably greater ratio of fine CWV metrics than web sites constructed utilizing simply the JavaScript frameworks or libraries.

To find out if that is certainly the case, I used the Core Internet Vitals Expertise Report to match the ratio of internet sites having good CWV for React, Vue and Svelte generally with the identical ratio for the main internet utility frameworks which can be constructed on high of them:

A chart with the percentage of websites with all green CWV sessions on mobile in the USA.
Proportion of internet sites with all inexperienced CWV classes on cellular within the USA. (Large preview)

We instantly discover that SvelteKit is ready to present a lot greater efficiency than every part else. That being mentioned, there are solely 33 web sites on this dataset that use SvelteKit. This quantity is just too low to attract conclusions concerning its means to persistently ship good efficiency. However will probably be fascinating to see if its efficiency holds up as its utilization will increase.

We will see that whereas the Gatsby framework does certainly present a considerably greater ratio of fine CWV than React generally, that is not the case for NextJS. And whereas NuxtJS does present a greater ratio than Vue generally, that ratio continues to be decrease than for React.

Additionally, why did I embrace Wix on this graph? In spite of everything, Wix isn’t an online utility framework constructed on high of a JavaScript framework. Or is it?

Really, Wix is carried out utilizing React, and because of this, each Wix web site can also be recognized as a React web site, similar to Gatsby and NextJS. In different phrases, although you don’t explicitly write React code when utilizing Wix — in spite of everything, it’s a drag-and-drop web site builder — it does generate a React web site for you. Furthermore, Wix additionally employs SSR like Subsequent.js and makes use of CDN like each NextJS and Gatsby. And it has a better good efficiency ratio than both of them.

Now let’s think about the variety of web sites constructed utilizing every certainly one of these applied sciences:

A chart with a number of sessions on mobile in the USA
Variety of classes on cellular within the USA. (Large preview)

Not solely does Wix considerably outpace the favored internet utility frameworks, however actually a few third of React web sites within the USA are literally Wix web sites!

That is vital as a result of, at such a excessive ratio, Wix efficiency noticeably impacts the efficiency measured for React web sites as an entire. Luckily, as we noticed within the efficiency graph, Wix truly has a better ratio of fine CWV than React websites generally. In different phrases, Wix truly raises the efficiency scores measured for React.

However after we restrict to the highest 1,000,000 web sites within the USA the ratios change considerably:

A chart with a number of sessions on mobile in the USA for the top 1,000,000 websites
Variety of classes on cellular within the USA for the highest 1,000,000 web sites. (Large preview)

The ratio of Wix and all different internet utility frameworks out of the entire React web sites drop considerably when wanting solely on the high 1,000,000 web sites. On this dataset, solely 14% of React websites are constructed with Wix. Because of this Wix’s influence on React’s basic efficiency is far diminished when wanting solely at high websites. This can be a vital purpose why React’s good efficiency ratio truly degrades when inspecting solely the highest websites, not like the opposite JavaScript frameworks.

In different phrases, Wix is the answer to the thriller of React’s surprising efficiency profile.

Efficiency Metrics For Internet Utility Frameworks

However what about NextJS and NuxtJS? Why don’t they supply the anticipated efficiency advantages throughout the board that we see with Gatsby (and in addition with Wix)? Analyzing every metric individually could reveal the foundation causes for this conduct.

As earlier than, the FID metric has basically no influence on the general efficiency ratio as all frameworks obtain a very good FID ratio above 97%.

Issues get extra fascinating after we examine CLS ratios:

A chart with the percentage of websites with green CLS, sessions on mobile in the USA
Proportion of internet sites with inexperienced CLS, classes on cellular within the USA. (Large preview)

We will see that NextJS truly surpasses React, however that Gatsby continues to be forward. Additionally, NuxtJS is smack within the center between Vue and React.

Since all these frameworks have basically the identical good FID ratios and shut good CLS ratios, this means that the principle explanation for the distinction between these frameworks is LCP:

A chart with the percentage of websites with green LCP, sessions on mobile in the USA.
Proportion of internet sites with inexperienced LCP, classes on cellular within the USA. (Large preview)

As anticipated we see that Gatsby is considerably forward of React, and in addition that React generally is forward of Subsequent.js. On condition that NextJS makes use of SSR / SSG and fashionable picture codecs, that is stunning. Actually, that is one thing to be careful for when using that framework.

NuxtJS has made vital progress on this regard in latest months and has surpassed NextJS for good LCP which is actually the identical as React generally.

Let’s see if the LCP variations could be defined by the picture obtain sizes since bigger photographs are sometimes detrimental to LCP:

A chart with the images download size in KB for mobile in the USA.
Photographs obtain measurement in KB for cellular within the USA. (Large preview)

It’s fascinating to see that web sites utilizing NuxtJS and Vue obtain considerably extra picture knowledge than web sites that use React, and that NuxtJS is ready to obtain a reasonably good LCP ratio regardless of this.

Gatsby and NextJS are each environment friendly when it comes to the quantity of the downloaded picture knowledge. Because of this the improved good LCP ratio that Gatsby gives doesn’t stem simply from diminished picture sizes. To me, this means that Gatsby is probably going in a position to begin the obtain of the most important picture sooner and to raised prioritize it versus different web page sources.

Apparently, the Gatsby homepage makes use of WebP for photographs and the NextJS homepage makes use of AVIF.

Abstract

All the frameworks that I reviewed on this article have good efficiency ratios greater than 0%, which suggests you can construct fast-loading websites, as measured by CWV, utilizing any of them. Likewise, all these frameworks have good efficiency ratios which can be decrease than 100%, which suggests you can additionally construct slow-loading websites utilizing any of them.

That mentioned, we noticed vital variations between the nice efficiency ratios of the assorted frameworks. Because of this the probability {that a} web site constructed utilizing a selected framework can have good efficiency could be very totally different than for an additional framework. Actually, that is one thing to contemplate when deciding which framework to make use of.

Alternatively, we additionally noticed that such variations could be deceptive — for instance, it initially appeared that React has a noticeably higher-good efficiency ratio than Vue. However after we successfully excluded most Wix web sites, that are included in React’s statistics, by wanting solely at greater site visitors websites, Vue truly catches up with React.

As well as, sure frameworks which have a fame for higher emphasis on efficiency, equivalent to Preact and Svelte, don’t essentially have a bonus for CWV. Will probably be fascinating to see if their influence will increase when Google introduces a brand new responsiveness metric to switch FID in CWV.

Much more surprisingly, some Internet Utility frameworks don’t have a bonus both, regardless of their built-in help for SSG / SSR and using CDNs. In different phrases, utilizing a Internet Utility framework isn’t a silver bullet for efficiency.

Particularly, it seems that NextJS and NuxtJS have a methods to go when it comes to growing the chance that websites constructed utilizing them have good CWV. Their graphs are on a major upward development, particularly NuxtJS, however are nonetheless noticeably decrease than Gatsby or Wix and even the ratio for all web sites generally. Hopefully, their enhancements will proceed they usually’ll achieve catching up.

Smashing Editorial
(vf, yk, il)