The cost of javascript frameworks | Tim Kadlec

Oh dear. Tim's put together some actual numbers on the impact that using a frontend framework has on the user. As a proponent of the Jamstack, which pretty much has JavaScript frameworks at its core, these types of articles are always worrying, but they remain absolutely necessary information. So let's rip off the band-aid:

Sites with Angular ship 344% more JavaScript on desktop at the 10th percentile, and 377% more on mobile. Sites with React, the next heaviest, ship 193% more  JavaScript on desktop and 270% more on mobile devices.

Ouch 😢

Vue fares a little better, then comes jQuery (no real surprises there), with "vanilla" websites in the lead (again, not surprising; as Tim puts it, you can't start with JavaScript and expect to ship less). Thread times are similar, though here React is bottom of the pile by a clear margin:

React sites bring up the tail end, spending 248% more time on desktop devices and 658% more time on mobile devices. No, 658% is not a typo. At the 10th percentile, sites with React spend 2.7s on the main thread dealing with all the JavaScript sent down.

In comparison, Angular is rocking 230%-313% at the 10th percentile. This gets "better" as you begin looking at worse sites (i.e. the 90th percentile), but the overall trend persists and the numbers are still terrifying. At the tail-end, React sites are spending 20.8 seconds just parsing the JavaScript! Even more damning for React is that single-framework sites (which should perform better across the board) actually end up performing worse for the bottom 50%. Quite why is debatable, though Tim argues for site migrations meaning that some React sites are still offloading a lot of the work to jQuery, which remains more performant.

Worse still is how badly these framework-based websites perform on mobile.

Even at the 10th percentile, React sites spend 431.5% more time on the main thread on mobile devices as they do on desktop devices.

That's equivalent to over 10 seconds just to load the page properly... Still, whilst these results are even more damning than I would have predicted, there is room for hope. Tim is right in suggesting that vanilla JavaScript is the best alternative, but he also points to other technologies which could be a positive trade-off. More performant frameworks like Svelte and Preact help a lot; SSGs such as Gatsby, NuxtJS, and NextJS also give you massive savings (whew 😊).

He even points out that there are some forks and tools beginning to appear that simply strip all that JS out of the shipped site. For instance, the No JS Gatsby plugin looks pretty great; probably something worth experimenting on for this site.

Explore Other Notes

Older

The thousand island archipelago

Indonesia is a part of the world high on my "to visit" list. Between Komodo dragons, Homo floresiensis, the Wallace Line, and – of course – the delicious satay dishes, there's a lot …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Oh dear. Tim's put together some actual numbers on the impact that using a frontend framework has on the user. As a proponent of the Jamstack, which pretty much has JavaScript frameworks at its core, …</p> </body> </html>
  • Murray Adcock.
Journal permalink