How my site loads in 1.25s

Last week I received a shocking message from Google. I forgot how it happened but Google asked me if I wanted to test how mobile friendly my site is. After entering my URL I got results I didn’t expect. My site ditisAnton is a very small and simple site, it has only one picture and a few lines of text. Nonetheless, the results opened my eyes.

Shocking results!

As you can see, the first metric has a good score of 93/100. But the loading speeds are way lower than I expected for a site with a total size of 450 KB.

Points to focus on

This report gave me enough motivation to start streamlining my site. I started with a simple one: I was able to save around 70 KB by optimizing the one image with the help of compresspng.com. After that, I enabled gzip compression on the server. The only thing I had to do was change a few lines in my NGINX config file on the server. The next optimization wasn’t from the report by Google but a method used a lot by single page apps (SPA) called lazy loading. On a simple site with a collection of HTML files, you don’t have to bother with lazy loading. On a SPA like my site, the entire site is loaded when you open the site, which can take a long time to load. This happens because the site is rendered by one big JavaScript file. By enabling lazy loading you split that huge file in chunks. Each route is a perfect point to split the code, so if you use a router like react-router or vue-router to serve your routes (ex. ditisanton.nl -> ditisanton.nl/blogs) this is crazy easy. By adding an extra line of code to each route Webpack automatically split my code into chunks. Which resulted in the following result from 450 KB to…

238 KB, still to big

If you look closely at the list of files my site loads you see a few Bootstrap downloads, jQuery and a font I’m not even using. I was using jQuery and Bootstrap only to display a modal when you click a certain button. I decided to build this functionality myself, it took a little more time than just using jQuery and Bootstrap but it saved me almost 100 KB. Another tool to see your site’s performance is Lighthouse, a Chrome plugin. They gave me some more tips to improve my site. See the result for yourself…

Better results

Current size (91.7 KB) and better loading time (1.25s)

I not only managed to get good results from Google’s test but most importantly my site went from 450 KB to 91.7 KB while maintaining the same functionality. This took me one afternoon in total. If you haven’t already, test your site with Google and install the Lighthouse plugin.

Phone

(06) 27002272

Address

Amsterdam, Nederland