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+ | 58 KB | 0.005g | 99th |
| SvelteKit SvelteKit deployed to Firebase hosting | A+ | 179 KB | 0.016g | 97th |
| SvelteKit SvelteKit deployed to Cloudflare Pages | A+ | 309 KB | 0.027g | 95th |
| Astro Astro site with Svelte island components | A+ | 414 KB | 0.036g | 93th |
| SvelteKit SvelteKit variant B, heavily interactive | B | 1008 KB | 0.089g | 79th |
Astro
Static Astro site with zero JavaScript
Transfer Size
58 KB
CO₂ Emissions
0.005g
Percentile
99th
SvelteKit
SvelteKit deployed to Firebase hosting
Transfer Size
179 KB
CO₂ Emissions
0.016g
Percentile
97th
SvelteKit
SvelteKit deployed to Cloudflare Pages
Transfer Size
309 KB
CO₂ Emissions
0.027g
Percentile
95th
Astro
Astro site with Svelte island components
Transfer Size
414 KB
CO₂ Emissions
0.036g
Percentile
93th
SvelteKit
SvelteKit variant B, heavily interactive
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 QuizAbout 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.