Last weekend I did one of those typical boring tasks you always feel too lazy to do: Checking the whole blog CSS to remove all the unused Bootstrap clutter. Some time ago I fully removed all the javascript from the site (excepting an async stats ping ajax call using vanilla js and deferred 5 seconds) and I never used comments or forms since I migrated to the blog to Pelican (almost 3 years ago), so I was expecting lots of unused stuff... but the CSS went from around 50KB minimized, to less than 15KB!
It might seem extreme, but one hobby (obsession?) that I have is to try to apply speed ups to my tiny blog to play with different techniques and tips, so achieving that small size, plus not using web-fonts (I hate the loading blinking until font is rendered and fallback fonts are a patch), keeping always the content minimized, supporting Gzip and cache expiration headers, make me feel good knowing it loads as fast as possible.
I don't apply everything I read about if is not worth it, though. As an example, deferring image loading to visible viewport is something I did in the past but the gain was so small (as I don't abuse images on posts, and many are pure text) that instead I started properly compressing images... well, really obsessively, as I applied Google's Guetzli compressor to all existing images (you can achieve around 20%-25% size saving on a JPG), so they simply load quickly. But then, with some images the size of any 85% quality exported JPG is already so small that is not worth the 2-3 minutes of Guetzli compression (at least on my old laptop), so I'm more selective now on what to squeeze and what to leave as a standard JPG.
The blog does not need it, but at my portfolio I've also inlined CSS (one less HTTP request) and the small company logos are a sprite sheet so it's also a single HTTP request instead of one per logo (plus some PNG palette reductions making the file weight ~10KB).
I also like to run "crazy" compatibility and speed tests from time to time, like browsing the blog on my Nintendo 3DS or with my Kindle (which is has to be worse and slower than most phones on Earth), just because "why not?", for fun. Browsing from an ebook reader having so powerful phones is absurd but a decent challenge.
And all of this comes to light after reading an interesting post , The Cost of Javascript In 2018, which contains lots of interesting advices on pretty actual techniques (specially if you are working with SPAs and/or modern javascript frameworks). Definitely recommended reading.
Update: Link to the great Smashing Magazine's Front-End Performance Checklist 2019, a huge article containing most if not all state-of-the-art performance improvements and tips you can apply to web applications, static resources and the like. A must read.
Tags: Development