How to improve the initial page load

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 needed, check if content of each file is what you want: Are the files minified? Are the images compressed? Aren’t their dimensions unnecessarily too big?

2. Quickly check if your app is served over HTTP/2

Your initial page load may be delayed because (obviously) the required files haven’t been delivered yet. You could speed it up by fetching more files in parallel thanks to HTTP/2. It also comes with header compression, which basically means you can fetch more files at once and with smaller size.

Am I using HTTP/2?

  1. Open Chrome DevTools
  2. Open the Network tab
  3. Add the Protocol column if it’s not already there (HOW TO)
  4. Refresh the page and check the Protocol column
  5. If the used protocol is not HTTP/2, check how your server can be configured for HTTP/2

3. Quickly check if your web server uses HTTP compression

All the production files should be minified and compressed in your build pipeline by now. However, there’s more you can do — does your server use (the most suitable) HTTP compression? Before the web server sends you each file, it can be compressed with gzip, brotli or another compression technique, and then a browser can decompress the received data.

Does my server compress files?

  1. Open Chrome DevTools
  2. Open the Network tab
  3. Click on a fetched file in the Name column
  4. Check if response headers contain content-encoding. If its value is gzip or br, you’re good. If not, check how your web server can be configured to enable HTTP compression. Make sure you don’t compress files that are already compressed(jpg, png, gif, woff), compressing them again would make their sizes larger.

4. Quickly check your dependencies

There’s only little chance that your app doesn’t use any third-party libraries. You should always keep your dependencies up-to-date, preferably automatically with a bot, e.g. Dependabot. Newer versions may include performance optimization that can boost your app.

5. Quickly serve what you’ve got

Initially you don’t have to fetch the whole app. The necessary minimum for acceptable user experience is 1 HTML file, 1 JS file for the current route and 1 CSS file for the current route. Everything else can be loaded later.

font-display

If your app needs to fetch a web font, browsers first render text in an invisible font by default, and then after 3 seconds they display the text in your font or a fallback font. The default behavior can be changed with the font-display descriptor. You can read a more detailed description with a nice example on https://font-display.glitch.me/.

async / defer

When a browser reads an HTML file and finds a script tag, the script is fetched, parsed, compiled and executed. That blocks your main thread and your app freezes and becomes unresponsive. If the blocking script is not essential for the initial page, the blocking can be fixed with async and defer attributes on the script tag. More on that on https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store