Chapter 3: The Fastest Next.js App Of The Galaxy
A profound lesson for the students of web performance arts
Hi Web Perf Piranhas
(yes this will be the theme here, it will also make sense later)
In this chapter I will share something profound that fundamentally changed the way I look at web performance. There is a Next.js app that’s objectively the most performant of them all. (And I wrote it! 😎 But you can too!)
What does that mean? It means we actually have an objective goal! Unlike with most things real-life, we know for certain what’s the ideal we are supposed to aim for as web performance engineers. And that’s great news, it will make our jobs way less ambiguous!
I know it doesn’t make much sense so let’s put an end to the intro. Here is the Fastest Next.js Website of The Galaxy! And here is the source code too! Take a good look and if you are confused about what you see (or don’t see) come back here and continue down below.
That’s right, it’s an empty page with the least amount of HTML I could squeeze out of a Next.js build. If you feel cheated or let down I get it, but believe me, whatever you feel, if you had any emotional reaction at all, that feeling will actually help to make this lesson the more memorable and this worths remembering for sure!
Most of you already know that web performance is a tradeoff. But what the fastest web app of the galaxy can help us realize, is that we have to sacrifice everything our sites have in order to achieve ultimate performance! This is a transformative realization with deep implications. Let’s unpack it!
When working on performance optimization, our real goal is to make our web apps resemble the fastest website of them all: the completely empty website, as much as possible!
That means we should eat away the meat of the websites we work on like a hungry pack of piranhas! This idea might not feel right, it might not seem useful, but it actually is when you learn to utilize it!
Every technique we employ to improve web performance is making our website either permanently or temporarily (that’s when we do clever stuff) more alike the ideal website!
Just think about what cutting the page up into multiple chunks and delaying their loading really does. Or what the downscaled placeholder images do to our initial bundles. What’s the practical result of caching resources? That’s right, all of these techniques make our websites in certain situations more like the fastest website of all.
The more you are willing to sacrifice to make your website resemble that ideal form the better performance you will get! The more you deviate from it, the more performance will suffer. It’s a cold, hard truth we have to accept as web performance engineers.
Our work is all about finding the optimal way to minimize the difference between the empty website and ours, and making the price to be paid acceptable. These guides will teach you how to find the right balance in your specific situation.
🧠 Performance Mindset
This is a lesson that’s extremely important to really ingrain a performance mindset in us. The conclusion: become the bloodthirsty web perf piranha you are supposed to be and eat up those sites with endless appetite.
If you enjoyed this chapter check out the full table of contents for the series!
