September 22, 2024
Micro optimizations
This website has a perfect Google Lighthouse score. To keep this website state-of-the-art, I have done a lot of micro optimizations lately.
These micro optimizations make this website probably the fastest website in the world, as this website consists of very few bytes, very few requests and very small images (typically 40kb each).
- Stylesheets and Javascript files are now minified and combined
- The SVG logo in the top left corner is now inlined
- The favicon is now an SVG image
- The double arrow below the title of blog posts is now animated
- The animated underlines now support multi-line links
- The images are now all WEBP or SVG
- The images are further downscaled and now all have a raster layer
- Code blocks now have a slightly better look
- The background now has a subtle SVG noise effect
- When you hover a link, the mascotte in the bottom will now mimic an ‘Oooh’ expression
- You can now navigate to /portfolio
- Buttons now have a position-aware hover effect
The only large files I load are the gigantic banana leafs you see left and right of the screen (on desktop only). However, I load them only after you have interacted with the page and I have compressed them as much as I could. This makes sure they do not slow down your initial page load. If you think that, even with these small animations, the design of this website is spartan, take a look at this Wordpress conversion. Website designs do not get much more mainstream than that. Nevertheless, I have still achieved to get a perfect Google Lighthouse score with that page, proving that mainstream design and an optimized website are not mutually exclusive.
What’s interesting is that these micro optimizations led to a gigantic increase in page vitality. Do you also want to increase your website speed and make your website more attractive with micro optimizations? Contact me!
() Joost van der Schee