I’m so excited to finally get my blog up and running, even though it still like a draft until now but I cannot wait to share it 😝 .
In this post, I'd like to take a screenshot of the initial state of this web app so that I can compare it later. As I mentioned, there are still many things to implement and improve.
Lighthouse score
As you can see that the score I got is pretty bad for this simple web app. So, the goal is to make it all green.
Next.js app bundle
We saw there are at least 3 types of information that need to be noticed which are Size, First Load JS and First Load JS shared by all.
Here’s what the docs say
Size – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
First Load JS – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.
Basically, when user visit a page, First Load JS is the size of all JS assets they have to download, plus the additional assets client-side.
Size is the client-side assets as I said above.
First Load JS shared by all as the name suggest, is the JS assets that user has to download when they visit every single route.
Eg: For /posts/[slug] page
- Route-specific client-side: 245 kB
- Route-specific server-side: (363 - 245 - 112 = 6) kB
- Total server side (363 - 245 = 118) kB
- Total (client + server) = 363 kB
That’s the explanation for the app bundle size. In the end, my goal is to make it all green and maintaining it while I’ve more pages to add up.
Share this post