How to improve the initial page load

The QUICK WINS edition

You know how annoying it is to open a web app and all you get is a white screen. You wait and wait and wait…and then you close the page because you can find a much faster alternative. But this time it’s even worse…the slow app is yours 😥 Let’s make it faster with a few QUICK improvements! 💪

Photo by chuttersnap on Unsplash

1. Quickly check what you’re fetching

Do you really know what is fetched when the app is opened for the first time? You may be using a module bundler like Webpack, a framework asset compilation pipeline or other built tools like Gulp, that make files ready for production release. Chances are that the pipeline was set up by someone else or you just forgot to configure something correctly, and now your production build contains something you wouldn’t expect.

Let’s check what you’ve got there

1. Build your app in production mode
2. Open the app in a browser(Chrome)
3. Use Chrome DevTools to check what happens on the network (HOW TO)
4. Go through all network requests, check if there’s something you didn’t intend to fetch. If so, find out why the unnecessary file is fetched and prevent that.
5. Now if you fetch only what’s…