How to Measure Website Performance using Lighthouse Tool

This Article explains how to measure website performance using Google Lighthouse tool using chrome extension and DevTools

Connect with Author — www.dhirubhai.net/in/vivekbasavegowdaramu

Video with detailed explanation — https://youtu.be/yFtocboN7qQ

What Is Lighthouse Tool

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

Why Lighthouse

How many times have you opened a page and it keeps buffering and you decide to close or move on? Very often!

Some interesting facts?:

• 46% of people say waiting for pages to load is the worst part of their mobile browsing experience
• On average, people spend 70% longer on pages that load in five seconds
• For every 100 milliseconds your site takes to load, your conversion rate can drop by 7%

It does not matter how good your application is unless it can serve all end users swiftly, performance and page responsiveness is very crucial for any application and Lighthouse tools help to provide early feedback for single user performance so that fixes can be implemented at the early stage avoiding re-work later.

Some of the major reason to use Lighthouse tool are -

• Open-Source
• Fully Automated
• Early Performance Testing
• Report for Mobile

Lighthouse Tool from Chrome Browser

You can install Lighthouse tool as chrome extension (search for ‘Lighthouse chrome extension’ in Google and you will endup in below page)

Click “Add to chrome”

Open Lighthouse Chrome extension in the website where you want to run report and click on “Generate Report”

Lighthouse will run audit report and present you with results

Lighthouse Tool from DevTools

Another way to run Lighthouse report without installing extension or if you have restriction to install in your company machine due to compliance/firewall is by using DevTools, right click on the webpage where you want to run report and select “Inspect” and open “Lighthouse” tab

Click on “Analyze page load”, if you want to analyze you webpage for mobile then you can select Mobile radio button as shown below

Your page view will show as mobile and when a report is generated fun facts are also displayed.

Lighthouse will complete audit report and present you with results

Lighthouse Report Analysis

Report is very self-explanatory and provides a good scoring percentage

you can expand any section to know more about the result and understand how to fix the issue.

If you are interest to know more about any topic, click on “Learn more”

I hope this was informative and you learnt something new today.