Chrome Lighthouse

Have you ever experienced a slow loading website? It must have been a terrible experience. Clicking on a website link seems like such a simple thing. But behind the scenes, hundreds of requests are instantly pinged around the world to bring you the images and text. There’s a lot going on in those few short seconds, and there’s a lot that can go wrong.

Things can start to slow down, taking your website with it.

Here is Chrome Lighthouse to your rescue. 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.

Get started

Choose the Lighthouse workflow that suits you best:

• In Chrome DevTools. Easily audit pages that require authentication, and read your reports in a user-friendly format.
• From the command line. Automate your Lighthouse runs via shell scripts.
• As a Node module. Integrate Lighthouse into your continuous integration systems.
• From a web UI. Run Lighthouse and link to reports without installing a thing.

Note: The CLI and Node workflows require you to have an instance of Google Chrome installed on your machine.

Run Lighthouse in Chrome DevTools

Lighthouse powers the Audits panel of Chrome DevTools. To run a report:

1. Download Google Chrome for Desktop.
2. In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
3. Open Chrome DevTools.
4. Click the Audits tab.
5. Click Perform an audit. DevTools shows you a list of audit categories. Leave them all enabled.
6. Click Run audit. After 30 to 60 seconds, Lighthouse gives you a report on the page.

Tips for Generating Report

1. You can choose from numerous option category focusing on different aspects of the web page , If you are a newbie I will recommend to add the best practices as this is best practical way to learn.
2. Depending on the visitors to your website from mobile or desktops you can choose the desired device.
3. If you want to analyse using slow network , change the network speed to slow 3g using network tab in developer tools.
4. To generate accurate report use incognito mode in chrome.

Analysis of Lighthouse Report

This is the view of performance report , it will show you the performance score for your website , lower the score more you should worry !

Metrics used to calculate performance score

1. First Contentful Paint: It marks the time at which the first text or image is painted.
2. Time to interactive: It is the amount of time it takes for the page to become fully interactive.
3. Speed Index: It shows how quickly the contents of a page are visibly populated.
4. Total Blocking Time: Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds
5. Largest Contentful Paint: It marks the time at which the largest text or image is painted.
6. Cumulative Layout Shift: It measures the movement of visible elements within the view port.

Now lets see how can you increase the performance score

Opportunities: These suggestions can help your page load faster.

Diagnostics: More information about the performance of your application.

Suggestions to help you optimise

1. Added gzip compression for all the pages across website
2. removed unused js across all pages
3. All Image resize which were more than 500 kb
4. Added lazy loading for landing pages
5. Async loading for render blocking js/css