Finally,

I

Got

100

on

Lighthouse

Score

I have been working on improving the performance of my website for a while now. I am happy to announce that I finally got a perfect score of 100 on Lighthouse.

What is Lighthouse?

Lighthouse is an open-source tool developed by Google that helps you improve the quality of your web pages. It provides a set of audits that analyze your website’s performance, accessibility, best practices, and SEO. Lighthouse generates a report with suggestions on how to improve your website’s performance and user experience.

I struggled to increase the Lighthouse score, so I read many things about Core Web Vitals and how to improve them.

Core Web Vitals

Core Web Vitals are a set of metrics that measure the user experience of a web page. They focus on three aspects of user experience:

• loading performance
• interactivity
• visual stability.

The Core Web Vitals are:

• Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): Measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
• Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

How I Improved My Lighthouse Score

I followed the suggestions provided by Lighthouse and focused on improving the Core Web Vitals. Here are some of the things I did to improve my Lighthouse score:

1. Optimized Images: I compressed and resized images to reduce their size and improve loading performance.
2. Lazy Loading: I implemented lazy loading for images and videos to improve loading performance.
3. Minified CSS and JavaScript: I minified CSS and JavaScript files to reduce their size and improve loading performance.
4. Reduced Server Response Time: I optimized server response time by caching resources and using a content delivery network (CDN).
5. Eliminated Render-Blocking Resources: I deferred the loading of render-blocking resources to improve loading performance.

By implementing these optimizations, I was able to achieve a perfect score of 100 on Lighthouse. I am thrilled with the results and excited to continue improving the performance of my website.

If you are looking to improve the performance of your website, I highly recommend using Lighthouse and focusing on the Core Web Vitals. It’s a great way to ensure that your website provides a fast and seamless user experience.

It’s not about being the best, it’s about being better than you were yesterday.