Website-Performance Analysis using Google Lighthouse

For any website whether it’s a new, medium-range or an established website such as Amazon, eBay, Flipkart, etc., page speed loading plays a key role in the business operations. If a page loads more than 4-5 secs then it’s a bottleneck for the business and there's a chance of user dropoff. To analyze the page performance there are many open-source tools in the market, but Google Lighthouse is one of the popular, easy to audit a website and provides detailed reports with Performace, Accessibility, Best Practices, SEO & Progressive web-app analysis and more.

Lighthouse is an opensource, automated tool for improving the quality of website pages. You can run it against any page, open or requiring confirmation. Lighthouse can be utilized and executed in numerous structures, for example, Chrome dev-tools, Chrome extension, and node module also. It runs a progression of reviews against the page, and afterward, it produces a report on how well the page did. From that point, utilize the bombing reviews as markers on the best way to improve the page. Each review has a reference doc clarifying why the review is significant, just as how to fix it.

Performance audits can be executed in multiple ways:

1. Chrome dev-tools.
2. Command-line.
3. Chrome extension.
4. Programatically.

1. Chrome dev-tools:

Let's start with Chrome dev-tools to analyze the page performance.

Steps:
1. Open https://www.amazon.com/
2. Inspect dev-tools/F12
3. Click on the “Audit” tab
4. Choose device mobile/desktop
5. Click generate report

Lighthouse will provide the audit score for performance, accessibility, progressive web apps, best practices & SEO as below.

Lighthouse measures the following performance metrics:

• First Contentful Paint: The primary contentful paint is the first run through the program paints any substance (content, picture, canvas, and so forth) on the screen.
• First Meaningful Paint: The main significant paint is characterized as when the program first puts any “important” component/set of “significant” components on the screen. What is significant is controlled by a progression of heuristics.
• First CPU Idle: The principal CPU inactive is characterized as the main point where the page could react rapidly to enter. It doesn’t think about any point in time before the principal significant paint. The manner in which this is actualized is essentially founded on heuristics. Note: this measurement is as of now in beta, which implies that the hidden meaning of this measurement is in progress.
• Time to Interactive: characterized as the primary point where everything is stacked to such an extent that the page will rapidly react to any client contribution all through the page. Note: this measurement is right now in beta, which implies that the hidden meaning of this measurement is in progress.
• Speed Index: Speed Index gauges how rapidly all the over the-crease content is painted on the screen. The previous pixels are painted, the better you score on the measurement. Clients need an encounter where the vast majority of the substance is appeared on the screen during an initial couple of seconds of starting the page load. Stacking increasingly content prior causes your end-client to feel like the site is stacking rapidly, which adds to the positive client experience. In this manner, the lower your Speed Index, the better.
• Estimated Input Latency: this review quantifies how quickly your application is in reacting to client input. Our benchmark is that the evaluated input inertness ought to be under 50 ms (see documentation here as to why).

And it provides the Accessibility, Best Practices, SEO & PWA audits as below.

Accessibility: These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.

Names and labels: These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader.

SEO: These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. Learn more.

Mobile-Friendly: Make sure your pages are mobile-friendly so users don’t have to pinch or zoom in order to read the content pages.

PWA: below checks validate the aspects of the Progressive Web App.

2. Command-line Execution:

Using npm module — lighthouse, can execute the tests by cmd-line and generate HTML reports.

Steps:
1. Open Terminal
2. npm install -g lighthouse
3. lighthouse <url>. Ex: lighthouse https://www.amazon.com/

Lighthouse will gather information from the website and performs the audits.

HTML Reports:
Using the below commands we can audit & generate HTML reports.

To view results after audits complete:

lighthouse <url> --view https://www.amazon.com/

To generate results to specific folder:

lighthouse <url> --output=json --output-path=./report.json

To run on headless mode:

lighthouse --view --quiet --chrome-flags="--headless" <url>

3. Chrome Lighthouse Extension:

Lighthouse

4. Programmatically:

GoogleChrome/lighthouse

Summary:

Using the Google Lighthouse, we can analyze the website performance in a short time and generate audits for performance, accessibility, progressive web apps, SEO and more. Each audit provides a detailed reference doc explanation, solution and comes with how to fix the issue.

Thanks!

Stay Home — Stay Safe!