Less can be More, A Lot More
Tags: codenewbie, html, tutorial, beginners
Published: 2020-09-22 07:28:37

After I posted my last article, [Speeding up my website](https://dev.to/alvinqingxing/speeding-up-my-website-1fdl), I wanted to see if I could further optimize [my website](https://alvinlim.me/)'s performance so that it would get a higher score than 80% on Lighthouse ... and after a few major adjustments, I managed to improve its Lighthouse performance score to 100%!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ukb73na9fv12jq0nyuji.png)

How was this done? By ruthlessly minimizing the assets that needed to be loaded and rendered on the screen. In this experiment, less really proved to be a lot more.

**Background Image**

The previous version of the website featured a large background image. Even though I had optimized it by converting it to the compressed WebP format, it still remained the largest asset in the website. To maximize performance, I decided to radically change the look of my website and remove this background image entirely, and replace it with a repeating SVG pattern from [Hero Patterns](https://www.heropatterns.com/). So instead of a photo of the desert, the background of my website is now wallpaper patterned on graph paper.

**JavaScript**

In the previous round of optimization, I had removed the Google Analytics and Google ReCaptcha scripts. The only JavaScript script I kept was the one that built the virtual tabs for my website. To maximize performance I decided to remove this remaining piece of JavaScript.

To replace its functionality, I found inspiration in [Tapas Adhikary](https://dev.to/atapas)'s article [10 useful HTML5 features you may not be using](https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0), in which he showed how the Details/Summary HTML5 element could be used to selectively hide content in a website.

Since this was what the old JavaScript virtual tags had done on the previous iteration of my website, I decided to use  Details/Summary HTML5 tags to selectively hide the coding projects and contact form sections of my website:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9h8kimt0momi6wr2b2x7.png)

This however altered the layout of my website but I saw this as an opportunity to rejuvenate it with a brand new look, and I spent a couple of fun hours experimenting with new fonts and color schemes.

**Minification and Compression**

To make sure that the size of the assets that would be piped from the web server to the browser remained as small as possible, I made sure that Netlify, my web host, was configured to automatically minify and compress them:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uhvbajgb707duuo1xm2j.png)

Further compression comes from the [Brotli compression](https://www.netlify.com/blog/2020/05/20/gain-instant-performance-boosts-as-brotli-comes-to-netlify-edge/) which is deployed automatically on Netlify's Edge network, on which websites on Netlify's generous free tier are hosted.

While there are remain opportunities to further improve performance -- for example, while Netlify minifies CSS, it doesn't do so for HTML -- for the moment I'm happy with the latest round of optimizations.