Lighthouse is an open-source automated tool developed by Google, used for testing and improving the quality of web pages in terms of performance, accessibility, search engine optimization(SEO), and more.
In this post, we'll cover how you can use lighthouse to test and analyze any website for performance.
Before we start, let's understand the types of workflows lighthouse offers.
Lighthouse Workflows
lighthouse offers four workflows you can use to run series of test/audits on a web page:
- In Chrome DevTools: You can directly test any web page from your Chrome browser and read your reports in a user-friendly format.
- From the command line: This let's you automate lighthouse runs using shell scripts
- As a Node module: Integrate Lighthouse into your continuous integration systems.
- From a web UI: You can also run Lighthouse directly from a web UI and also link to reports without installing a thing.
We'll be using Chrome DevTools to learn how to test a web page for performance with lighthouse. You can check out any of the workflows above here:
With that out of the way, let's run lighthouse.
Run Lighthouse in Chrome DevTools
Use the following steps to run lighthouse test in your devtools:
Step 1: Download chrome for Desktop
Step 2: Go to the URL of the website you want to test
Step 3: Open chrome Devtools and click the Lighthouse tab
Lighthouse offers three modes you can use to run tests:
- Navigation mode: The navigation mode is useful if you want to analyze a single page load.
- Timespan mode: Timespan is used to analyze user interactions on a web page
- Snapshot mode: It typically analyzes the page in a particular state
Step 4: Select Navigation mode, and since we are testing only for performance, uncheck the other categories except for performance.
Step 5: Click Analyze page load to run lighthouse.
After 30 to 60 seconds, Lighthouse gives you a report on the page.
Performance Analysis
Lighthouse reports your website performance based on five speed metrics, each measuring some aspect of page speed (also called "load speed")
- First Contentful Paint (FCP): Measures the time at which the first image or text becomes visible to users.
- Largest Contentful Paint (LCP): It calculates the amount of time a page takes to load it's largest element to users.
- Total Blocking Time (TBT): Measures the amount of time a page is blocked from reacting to user input, for example, a mouse click
- Cumulative Layout Shift (CLS): Measures the number of layout shifts that occurs as user assess the page.
- Speed Index (SI): Shows how quickly the content of a page is loaded.
After Lighthouse is done testing your website, it assigns an overall performance score to a page based on how it performed for all these metrics. The score can be anything from 0 to 100.
- A score between 90 and 100 indicates the page is well optimized for user experience.
- Anything less that 90 means there are some/significant number of resources on your page that are slowing things down, therefore affecting the overall page experience.
Lighthouse also gives you suggestions. Which you can implement the performance of your web page.
To make you feel a little bit better :-)
Lighthouse also gives you a report of tests your website passed.
Conclusion
In this article, you have learned how to test your website's performance with lighthouse. You can also test your website for things like accessibility, SEO, and more.
If this article was helpful to you, please react to it. Doing so will help me in writing better articles.
Top comments (0)