As developers, we often overlook the significance of app user experience when choosing a framework for our projects. But what if I told you that building the same app 10 times can revolutionize your understanding of mobile performance? In this article, I'll share my journey of evaluating different frameworks and the surprising implications it had on my approach to app development.
The Quest Begins
My team needed a new framework for an upcoming project. We required something that would work seamlessly on mobile devices, as our users – real estate agents working in the field – rely heavily on their phones to access our apps at open houses, parking lots, and other areas with limited internet connectivity. Slow-loading apps can make them look unprofessional, which is unacceptable.
I started by comparing Next.js (our current default framework) with SolidStart and SvelteKit (alternatives I'd heard good things about). However, as I began building implementations and measuring bundle sizes, I noticed significant differences. Next.js bundles came in at 154 to 176 kB compressed, while SolidStart and SvelteKit delivered 30 to 54 kB compressed. This raised an important question: Are these differences specific to individual framework implementations or systematic across framework families?
The Scope Expands
As I dug deeper, I realized that my initial evaluation was too narrow. If I wanted to make a well-informed recommendation for our team, I needed to test all major meta-frameworks and understand the full landscape of alternatives. Three frameworks became ten.
A Tale of Two Bundles
The results were staggering. At one end of the spectrum, Marko delivered 12.4 kB raw (6.8 kB compressed) bundles, while Next.js shipped 486.1 kB raw (150.9 kB compressed) bundles – a 39x difference in raw size for the homepage. For the board page, Marko delivered 88.8 kB raw (28.8 kB compressed) versus Next.js's 563.7 kB raw (176.1 kB compressed), a 6.11x difference in compressed size.
These differences translate to real seconds on cellular networks, which is critical for our users who rely on our apps in areas with spotty internet connectivity.
The Business Cost of Slow Performance
Research from Tammy Everts at SpeedCurve reveals that slow performance can have devastating consequences. While site downtime causes 9% permanent user abandonment, slow performance causes 28% permanent abandonment – a staggering 3x worse. Furthermore, slowdowns occur 10x more frequently than outages, resulting in roughly 2x total revenue impact despite lower per-hour costs.
The Real-World Cost
A 147 kB difference at 3G speeds translates to roughly 1 second additional download time plus 500ms to 1s for parse and execution on mobile CPUs. Total: 1.5 to 2 seconds slower between frameworks. Even as 3G networks phase out, the real estate agents we're building for regularly experience 3G-equivalent speeds.
The Importance of First Impressions
Cache busting is standard, which means users will download again and again. First impressions matter – so do second, third, and tenth impressions. Your users remember negative experiences far more than positive ones.
The Frameworks' Priorities
In the end, I discovered that the difference between frameworks reflects fundamentally different engineering priorities. Some frameworks prioritize runtime flexibility, shipping extensive abstractions to support wide use cases. Others prioritize runtime size and mobile performance from the ground up.
By evaluating these frameworks and their priorities, we can optimize our app user experience for mobile devices and provide a seamless experience for our users – regardless of their location or internet connectivity.