
Understanding Lighthouse Audits
12 October, 2021
12
12
1
Contributors
What does Lighthouse audit for you?
Lighthouse is a lab testing tool for measuring essential factors of your website.
Those are:
š¹ Performance
š¹ Accessibility
š¹ SEO
š¹ Best practices
š¹ PWA/AMP ready
Those are all factors creating a good user experience!
For what is Lighthouse mostly known?
The lighthouse performance score is the most known audit.
You can quickly check if your website is performing well for low-end devices and poor network conditions.
The report provides breakdowns of what you have to improve!
Why is the Lighthouse performance score "unstable"?
The performance score can change a lot. Knowing this is essential! Repeat the test 5 times, and you get at least three different scores.
The reason for this is:
š¹ Location
š¹ Internet stability
š¹ Extensions
You will reach the most stable result when using the lighthouse report in incognito mode and not running your app in development mode.
When should you start auditing your website?
I have seen this mistake a lot. People start auditing their website when it is not finished at all, and most sections are blank. Audit when you complete a single page. Then enhance the performance for the failed audits!
What should you audit on your website?
The most common mistake is auditing only your homepage and non of the other pages. Audit pages that are visited.
Use a logic that makes sense, for example:
š¹ Blog overview page
š¹ Your longest blog post
š¹ Your blog post with most media
š¹ An average blog post
A performance score with Lighthouse of 100 is good, right?
No. It is perfect.
Having a score of 100 is not a requirement you should aim for, being above 90 and having green flags for Core Web Vitals.
Having analytics will mostly avoid the perfect score. It is essential to find a balance between a good score and the analytics you require for your website.
How can you audit your website in more persistent conditions?
You can do that by setting up a CI Action.
This will automatically run the tests right after a deployment. It is easy and takes a few minutes.
You can read about Lighthouse-CI here: https://github.com/GoogleChrome/lighthouse-ci
Additionally, you should set up an LHCI server. You can upload your reports to the server, and it will display a timeline with each commit as a data point!
You can read more about the LHCI server here: https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md
Where can you audit your websites online with Lighthouse?
š¹ Web dev: https://web.dev/measure
š¹ Page speed insights: https://developers.google.com/speed/pagespeed/insights/
š¹ Chrome dev tools: https://developers.google.com/web/tools/lighthouse
š¹ Chrome extension: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
web development
web performance