What if there was one single technique that could help increase this score by a lot?
Why having a large JS bundle is bad for performance
Even if the user never accesses “Admin” or “Dashboard” pages, the code for these pages will still have to be loaded. Moreover, if we don’t use pre-rendering techniques, the browser will not show the Home screen until the entire bundle is loaded. Therefore bundle loading process blocks the rendering and increases the time for the First Contentful Paint.
How code-splitting helps
This is where code splitting comes in handy.
Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.
When a user lands on Home, the browser loads 100kb
home.js and immediately starts rendering the Home screen. If then, the user goes to Posts, the browser loads 200kb
posts.js and renders Posts screen, etc. No more unused code, no render-blocking.
How to apply code splitting