Perf Track

Flame logo

Perf Track is a project that aims to track and measure the performance of sites that use popular JavaScript frameworks and libraries. It is not an exercise to compare the performance of frameworks against each other.

Correlation does not imply causation.

Frameworks and performance

Perf Track aggregates results for certain frameworks. Conclusions cannot be drawn on the performance of a particular framework just by using this data.

There are many variables that contribute to final performance characteristics of each site, of which a choice of a framework or library is one. Beyond the core framework, the site developers add their own code and implementation, bring in additional code dependencies and libraries, integrate 1P + 3P services, and so on. A poorly implemented framework may set a bad baseline that makes it hard or impossible to build a fast site, but a well optimized framework does not guarantee a fast site. That is, unless it is strongly opinionated and provides strong developer guard rails that warn or actively prevent the developer from falling off the fast path.

In other words, a statement like "50% of sites that use Framework X have slow paint times, so Framework X must be a bad choice" is false and misleading. If many sites that use Framework X have notably better performance - that may be attributable to better DX that helps developers stay on track, but it may also be because developers that choose Framework X pay closer attention to performance.

Perf Track was built to provide trends and insight to both framework authors and developers. If common success or failure patterns can be found across many sites, we can work together to improve the underlying framework and tooling that sites use to make the web better.

About the data

All data on this site is sourced from:

In addition, the following open-source tools were also used:

Some important points regarding the data used for Perf Track:

Detecting frameworks

Analyzing framework usage and performance at scale is possible with the help of third-party projects that have been integrated into the testing tools used by HTTP Archive.

For most of the frameworks in Perf Track, Wappalyzer is used to filter for all URLs that use it on their site. Like any detection tool however, there are limitations, and some of the frameworks analyzed are either not yet detected by Wappalyzer or need to be improved. Until valid Wappalyzer detections are in place for all the frameworks included in Perf Track, Library Detector for Chrome is used as a suitable alternative when needed.

The full list of frameworks in Perf Track and their detection methods are as follows:

Detector used Notes
Angular Wappalyzer
React Wappalyzer
Next.js Wappalyzer
Gatsby Wappalyzer
Create React App Library Detector Wappalyzer does not have any detections for CRA.
Vue Wappalyzer
Nuxt.js Wappalyzer
Polymer Wappalyzer
Preact Library Detector Wappalyzer detection has false negatives ( issue ).
Svelte Wappalyzer
Sapper Wappalyzer

Until valid detections are in place for React, Create React App and Preact, Library Detector for Chrome is being used as an alternative.

Understanding the results

Perf Track displays two types of aggregated results for every framework:

  1. Page-level information through WebPageTest (such as the total, image, and JavaScript bytes delivered). These results are page-specific and do not directly tell us how well a web page performs, but still provide useful insight.
  2. Real-world user experiences in terms of performance metrics through Chrome UX Report (such as First Contentful Paint, Largest Contentful Paint, etc...). These are origin-aggregated , which means that values are grouped by the entire origin and not just the home page.

All the results on this site are queryable on BigQuery and can be reproduced. Take a look at the full list of queries ( Wappalyzer and Lighthouse ) to run it for yourself, but keep in mind that some of these queries are large (> 500GB) and can be expensive to run.

Contributing

We would love all kinds of contributions! Some high priority items at the moment:

Please take a look at CONTRIBUTING.md and the list of issues to find out ways to help.