https://www.eifel42.dev/categories/web-technologies/Recent content in Web Technologies on Eifel42Hugoen-USWed, 24 Jun 2026 00:00:00 +0000https://www.eifel42.dev/post/2025-10-09-performance-optimization/Thu, 09 Oct 2025 00:00:00 +0200https://www.eifel42.dev/post/2025-10-09-performance-optimization/<p>This summer, I embarked on a journey to revise the layout of my blog. An update to my Hugo theme customization led to a significant increase in the complexity of the CSS structure. As a result, I faced layout breaks and received disappointing scores on Google&rsquo;s PageSpeed Insights. Today, I proudly celebrate my achievement: my personal blog now boasts a perfect score of 100 points in both mobile and desktop categories. Determined to make a change, I gradually refactored my site to improve its <a href="https://developer.chrome.com/docs/lighthouse">Lighthouse score</a>.</p> <p>One of the most valuable lessons I learned is that optimizing website performance strengthens both security and architecture <a href="https://developer.chrome.com/docs/lighthouse/best-practices/doctype">Lighthouse - Best Pratices</a>. Throughout the optimization process, Software Architecture in Stream shared a truly inspiring <a href="https://www.youtube.com/watch?v=ObT05w23oB8">Web Performance</a> session.</p> <div class="performance-gallery"> <div class="performance-gallery__grid"> <figure class="performance-gallery__item"> <div class="no-photoswipe performance-gallery__media"> <img class="performance-gallery__img" src="https://www.eifel42.dev/images/2025-10-09-performance-mobile.webp" alt="Lighthouse Performance Score 100 for Mobile" loading="lazy" decoding="async" width="400" height="300" /> </div> <figcaption class="performance-gallery__caption">Performance (Mobile)</figcaption> </figure> <figure class="performance-gallery__item"> <div class="no-photoswipe performance-gallery__media"> <img class="performance-gallery__img" src="https://www.eifel42.dev/images/2025-10-09-performance-desktop.webp" alt="Lighthouse Performance Score 100 for Desktop" loading="lazy" decoding="async" width="600" height="400" /> </div> <figcaption class="performance-gallery__caption">Performance (Desktop)</figcaption> </figure> </div> </div>