Should I Use This?

Framework Benchmark Results

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

  • •Transfer Size — The total amount of JavaScript and assets transferred to the browser (in kilobytes), measured under realistic network conditions. Smaller is better for user experience and bandwidth costs.
  • •Carbon Footprint (CO₂) — The estimated greenhouse gas emissions per page load, calculated using the Website Carbon Calculator methodology. Accounts for data transfer energy consumption and server hosting emissions.
  • •Web Vitals Percentile — How the framework ranks against all websites, based on Google's Core Web Vitals (LCP, FID, CLS). 99th percentile is best in class.

About This Project: This site is part of the benchmark experiment. We're systematically building versions of this application using each of the 11 frameworks and measuring their real-world performance. The 5 measured entries below are complete; the 9 pending entries will be filled in as each framework variant is built and tested.

Frameworks Measured

5

with complete data

Pending Benchmarks

9

coming soon

Best Performer

A+

highest grade achieved

Complete Benchmark Data

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

Astro

Static Astro site with zero JavaScript

A+

Transfer Size

58 KB

CO₂ Emissions

0.005g

Percentile

99th

SvelteKit

SvelteKit deployed to Firebase hosting

A+

Transfer Size

179 KB

CO₂ Emissions

0.016g

Percentile

97th

SvelteKit

SvelteKit deployed to Cloudflare Pages

A+

Transfer Size

309 KB

CO₂ Emissions

0.027g

Percentile

95th

Astro

Astro site with Svelte island components

A+

Transfer Size

414 KB

CO₂ Emissions

0.036g

Percentile

93th

SvelteKit

SvelteKit variant B, heavily interactive

B

Transfer Size

1008 KB

CO₂ Emissions

0.089g

Percentile

79th

Key Findings

  • ✓

    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.

  • ✓

    Framework Choice Matters More Than Hosting

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

  • ✓

    Carbon Footprint Scales with Payload

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

  • ✓

    Compiler-Based Frameworks Lead in Performance

    Svelte and Astro (compiler-based) dominate the rankings with A+ grades and the smallest bundle sizes. These approaches shift work to build time, reducing runtime overhead and delivering better user experiences.

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 platforms. Measurements are taken via:

  • →Transfer Size: Chrome DevTools network analysis over 4G throttling, measuring all resources transferred for initial page load.
  • →CO₂ Emissions: Calculated via Website Carbon Calculator using data transfer energy consumption (0.419g per GB transferred) and green hosting adjustments.
  • →Web Vitals: CrUX (Chrome User Experience Report) data aggregated from real users accessing the same application, measured against Google's Core Web Vitals thresholds.

Fair Comparison

Each implementation uses the framework's recommended best practices. We don't artificially optimize one framework over another. We account for legitimate variant differences (e.g., SvelteKit deployed to different hosts may have different sizes due to adapter overhead).

Grades Scale

A+: Top 99th percentile, <200 KB, <0.020g CO₂

A: 90th+ percentile, <400 KB, <0.040g CO₂

B: 75th+ percentile, <800 KB, <0.080g CO₂

C: 50th+ percentile, <1.5 MB, <0.150g CO₂

D/F: Below 50th percentile or excessive payload

Not Sure Which Framework Fits Your Project?

Performance isn't everything. Consider your team's expertise, timeline, ecosystem maturity, and feature requirements. Take our personalized 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 code for each framework variant is available on GitHub.