What is and when should we use the Google "Lighthouse Inspector"
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps, I consider it as one of the most complete tool for auditing website
Its known that if a website loads in more than 2 seconds, will cause a bad impression in most of the users, this tool is able to help us on the Load Performance testing of the site, listing the components that take
To have a general idea of how your website is, you can run the first scan as it is by default, by clicking: "Analyze page load"
You will get 5 areas analyzed and its scores, that are highlighted by colors (Green, meaning its good, Orange that means we can improve and Red that will be the areas were we will need to focus) :
- Performance
- Accessibility
- Best Practices
- SEO
- PWA
Each item that was analyzed is clickable (you can click the score directly, and you will be redirected to the selected section)
For example, if we do click Performance, we will be redirected here:
you will see details on your Metrics, by example:
In this case since we are analyzing this blog and the content is kind of light and not to much animations, we can see that the metrics are quite good, here is an example of a site that needs some improvement so you can see how the Lighthouse inspector gives the feedback that needs to be addressed
Here is an example where it show us what image we can optimize for a better site performance, and as well suggest the type of images we can use, that offer better compression
"Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats."
Here I will attach from another page that has some improvements that we can do on imagery regarding accessibility, from the ADA report, and some feedback that it gives, when we are missing som of the Alt Tags
As we can read:
"Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats."
One of the major strengths of this, is that it provides the paths of the elements, where those are at, so you can locate those elements quite easy
Examples we can have tons, so I will encourage you as dev or QA, to run the Lighthouse Inspector and start checking some results, we always have opportunities were we can improve out pages, and this is one of the tools that gives a more specific, clear and to the point feedback, its always way better to have all of our scores in Green or Orange