Lighthouse

The primary reason I chose Astro for developing my website was its exceptional performance, resulting in high lighthouse scores. I wanted to challenge myself by achieving a perfect triple 100/100 score in all lighthouse metrics while implementing new features. Although aiming for such perfection may not be necessary or practical for commercial projects, it provided an excellent opportunity for me to explore something different instead of creating yet another Next.js project.

Research

During my research, I had the idea of incorporating pictures of myself into the website, potentially on the /about page. However, as I scrolled through my phone gallery filled with numerous pictures of my adorable cats, I realized that adding them to the page would enhance its visual appeal far more. Initially, I thought adding images would be complicated, involving tedious optimizations such as selecting the right file format, dimensions, high-resolution support, and compression rates. Luckily, similar to Next.js, Astro offers its own Image Component.

Usage

Once I added the images to the /assets directory and enabled the experimental assets feature (required for using the Image component), I incorporated the Image component into the /index page. Everything looked great on localhost, so I committed my changes to the repo. The lighthouse score was nearly perfect, achieving 97/100 (unacceptable) points in the performance metrics. Lighthouse suggested reducing the image sizes, which I promptly addressed by adjusting the quality property on the Image component. This small modification elevated the score to a perfect 100/100.

Summary

Adding images without compromising the lighthouse test results turned out to be much simpler than I anticipated. Once again, I’m grateful for Astro’s brilliant documentation, which made the process both enjoyable and straightforward. On the homepage, you can now marvel at the delightful presence of my beloved cats, Pyza and Chałka.