Supercharging our web app performance at Sutro
Our vision at Sutro is to allow anyone and everyone to create apps as easily as typing text into a prompt. That’s how we’re democratizing app development. That’s how we’re levelling the playing field. And you can already do exactly that on our platform! But it’s not enough. The apps themselves have to be great.
The thing about great is — it’s a very subjective term. When it comes to software, you know it when you see it, use it and experience it, but often a large amount of the work is in what you don’t see. Because so much of that work is about removing friction, and the totality of a great user experience.
And one of the most noticeable things that frustrates a user is slow software. Imagine — you’ve built an incredible web app using the magical power of Sutro and AI, and you want people to use it. But when they load it up in their browser……. It’s taking its sweet-ass time to do anything. And just like that, the enthusiasm of your user dissipates. Nobody wants to be waiting around — it’s 2024. And ain’t nothing wrong with your internet speed.
With mobile apps, this is less of a problem. You’ve downloaded them in the first place, and you’re good to go. Web apps, however, are a different story. One we’re painfully aware of here at Sutro. So here’s a few things we did to solve this problem.
Step 1: Invent a worst-case scenario for testing
We first came up with a prompt, then modified it in Sutro Studio to create an overly complex, bloated app. We added things we didn’t need to add. Then we added more things! A pinch of unnecessary UI here, a chunk of pointless data there, a boatload of user roles that no single app would ever require. We wanted to make this thing chunky. And we published it. Mission accomplished — this thing was taking an initial load time in the 10’s of seconds. Not good enough. We don’t want any Sutro apps to take 10’s of seconds to load. Ideally, all Sutro apps would load so quickly you wouldn’t even notice. But we’ll take a worst case scenario of 3 or 4 seconds… for now.
Step 2: Identifying the problem
Essentially, what was happening here was that our web apps were serving assets directly from compute servers. While this is straightforward enough, it’s inefficient. Every asset request went through the compute server, creating a bottleneck that delayed response times.
Step 3: Adding NginX, a gateway to efficiency.
Our first move was to integrate NginX — a high-performance HTTP server and reverse proxy. Think of NginX as a diligent gatekeeper, efficiently managing incoming traffic and asset requests. By serving assets directly, NginX reduced the load on our compute servers, resulting in a faster. more responsive experience for end users of Sutro-generated apps.
Step 4: Leveraging CDNs
Our next step was to embrace Content Delivery Networks (CDNs), and for this we decided to use CloudFlare. CDNs are like express distributed cache networks all over the world. They cache static assets to ensure that users everywhere get a swift, localized experience. This move was particularly beneficial for global users of Sutro apps, as it drastically reduces latency.
Step 5: Dynamic Loading of Webpack bundles
Next, we optimised how our apps handle webpack bundles. Instead of loading the entire application upfront, we implemented dynamic loading. This means the app initially only loads the essential parts, with additional components fetched as needed.
The user will only see what they need to see, when they need to see it.
Step 6: Slimming down bundles
Finally, we focused on slimming down the web bundles themselves. By optimising code, and removing unnecessary elements, we reduced the overall size of the apps. Small bundles mean less data to download, which directly translates to quicker load times.
Results and Impact
The impact of these enhancements was quite dramatic. Using the same test app scenario that we tried beforehand, we managed to reduce the initial load time to less than 4 seconds. And remember — that was with a deliberately bloated test app. This means that the vast majority of Sutro apps published on web should now load in no more than 2 seconds! This not only enhances the user experience, but gets us much closer to where we want to be — for all Sutro apps to be great, as quickly as possible after you’ve generated them.
We know there’s much more work to be done. And we’re committed to doing it. Make sure you follow us on Twitter and join our Discord to stay up to date with everything that’s happening here at Sutro.
Let’s level the playing field.
Team Sutro.
