Should I Use This?

Real numbers

Framework
benchmarks.

Transfer size, carbon footprint, and Web Vitals — measured across actual production deployments of the same application.

This benchmark compares real-world performance metrics across 11 popular JavaScript frameworks. We measure three critical dimensions:

  • Transfer size — The total JavaScript and assets transferred to the browser (KB), measured under realistic network conditions. Smaller is better for UX and bandwidth.
  • Carbon footprint (CO₂) — Estimated greenhouse gas emissions per page load via the Website Carbon Calculator methodology.
  • Web Vitals percentile — Ranking against all websites based on Google's Core Web Vitals (LCP, FID, CLS). 99th percentile is best in class.

About this project: we're systematically building this app in each of the 11 frameworks and measuring real production performance. The 5 measured entries below are complete; the 9 pending entries will be filled in as each framework variant ships.

Frameworks measured

5

with complete data

Pending benchmarks

9

coming soon

Best performer

A+

highest grade achieved

The full dataset

Complete benchmark data

Click any column header to sort. Pending entries (marked with "—") will be added as measurements complete.

Astro

Static Astro site with zero JavaScript

A+

Transfer

58 KB

CO₂

0.005g

Percentile

99th

SvelteKit

SvelteKit deployed to Firebase hosting

A+

Transfer

179 KB

CO₂

0.016g

Percentile

97th

SvelteKit

SvelteKit deployed to Cloudflare Pages

A+

Transfer

309 KB

CO₂

0.027g

Percentile

95th

Astro

Astro site with Svelte island components

A+

Transfer

414 KB

CO₂

0.036g

Percentile

93th

SvelteKit

SvelteKit variant B, heavily interactive

B

Transfer

1008 KB

CO₂

0.089g

Percentile

79th

Insights

Key findings

  • 1

    Static rendering wins for content sites

    Astro's static approach achieves the smallest footprint (58 KB) and highest performance (99th percentile) by shipping zero JavaScript by default. Island architecture allows selective interactivity without bloat.

  • 2

    Framework choice matters more than hosting

    SvelteKit shows consistent A+ grades across Firebase (179 KB) and Cloudflare (309 KB) deployments — compiler-based approaches yield performance benefits regardless of infrastructure.

  • 3

    Carbon footprint scales with payload

    CO₂ scales linearly with transfer size. Astro's 58 KB produces 0.005g CO₂ per load; SvelteKit's interactive variant (1008 KB) emits 0.089g — nearly 18× more. Small optimizations compound at scale.

  • 4

    Compiler-based frameworks lead in performance

    Svelte and Astro dominate the rankings with A+ grades and the smallest bundles. These approaches shift work to build time, reducing runtime overhead.

Method

Methodology

How we measure

Each framework is used to build a version of this application (a hybrid quiz/marketing/blog/benchmark site). We measure the production bundle after optimization and deploy to modern hosting. Measurements come from:

  • Transfer size: Chrome DevTools network over 4G throttling, all resources for initial page load.
  • CO₂ emissions: Website Carbon Calculator using 0.419g per GB transferred plus green-hosting adjustments.
  • Web Vitals: CrUX data from real users on the same app, measured against Google's Core Web Vitals thresholds.

Fair comparison

Each implementation follows the framework's recommended best practices. We don't artificially optimise one framework over another but do account for legitimate variant differences (e.g., SvelteKit adapter overhead on different hosts).

Grade scale

A+Top 99th percentile, <200 KB, <0.020g CO₂
A90th+, <400 KB, <0.040g CO₂
B75th+, <800 KB, <0.080g CO₂
C50th+, <1.5 MB, <0.150g CO₂
D/FBelow 50th percentile or excessive payload

Need help deciding?

Not sure which fits your project?

Performance isn't everything. Consider your team's expertise, timeline, ecosystem, and feature requirements. Take the personalised recommendation quiz to find the best fit for your specific use case.

Take the recommendation quiz

About this benchmark project

This benchmark is part of a larger experiment to evaluate how 11 popular JavaScript frameworks perform when used to build the exact same application. Rather than synthetic benchmarks, we measure real production deployments with identical functionality, helping developers make informed decisions based on actual performance data. All measurements are transparent and reproducible — source for each framework variant is on GitHub.