How to use LightHouse Chrome?

November 9th, 2018
25 Jun 2018
Chandru Rajendran
No Comments

 

What is Chrome lighthouse ?

Why do you need lighthouse app?

What is the difference between Lighthouse tool vs PageSpeed Insights tool?

How to install and use lighthouse chrome?

A real-time case study

How to interpret lighthouse report?

What happens during 10 secs load time?

 

What is Chrome lighthouse ?

In simple terms, it is a chrome extension developed by Google to validate your website/webpage performance in terms of speed, accessibilty, best practices and SEO health. It is a open source and you can find the source code here in the GitHub https://github.com/GoogleChrome/lighthouse

If you are a website owner or a website developer this tools comes handy and reports a lot of meaning full data. The good news is you can run against any webpages whether it is a public or a private pages.

Refer to what the Google overview has to say about the tool –

“Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app”.

 

Why do you need lighthouse app?

If you would like to evaluate your website against various quality parameters and best practises for absolutely free of cost! Just go for it.

 

Lighthouse tool vs PageSpeed Insights tool

My all time favourite tool is PageSpeed without any doubt. However, the big challenge with PageSpeed is you cant run over it for a private pages or password protected web pages. So herein lighthouse comes in you can simply evaluate your application dashboard without much efforts.

 

PageSpeed Vs LightHouse

PageSpeed Vs LightHouse

 

I tried my level best to match the differences.

 

PageSpeed LightHouse
Only for publicly available web pages/websites You can use it for your logged in pages/any private pages
It is cloud tool It sits on your Chrome browser. Simple chrome extension
Only for performance evaluation Can be used to evaluate SEO
Real time report only You can download it for later use

 

How to install and use lighthouse chrome?

It’s pretty simple. Click the below chrome extension (link) and get it installed in your browser.

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en

 

Light House Chrome Extension

Light House Chrome Extension

 

A real time case study

To explain this in real time, I’d like to try this on my website webspeedmaster.com

 

Using Light House on https://www.webspeedmaster.com/

Using Light House on https://www.webspeedmaster.com/

 

How do I get my audit report?

By clicking the extension, you can able to see a popup with two buttons.

Before you Generate report, you can check for the customization reports using the “Options” button.

 

Click "Options" button to view the categories of the required audit

Click “Options” button to view the categories of the required audit

Choose the categories to be included in the report

Choose the categories to be included in the report

If you would like to validate the performance, you can check Performance and Progressive Web App option and leave rest as unchecked. Or in case if you want to see what is in other tabs I’d suggest to check all the options.

Once you are done with the options, click on the generate report here. Kindly refer below image:

 

Click "Generate Report" to view the complete performance report of your website

Click “Generate Report” to view the complete performance report of your website

 

Now the tool (light house) will scan your website for all the potential performance hurdles and provides an audit report in a new window.

Video representation of generating a report using Light House

Video representation of generating a report using Light House

 

You can further see how your website performance on mobile typically 3G or in 4 G networks. This is really useful when you have more mobile users.

 

How to interpret lighthouse report?

Along with mobile and desktop there few more handy options,

  • You could change the option by choosing 3G connection or no throttling, while generating the report.
  • Further, you could change the view (desktop/mobile) according to your preference.

You can refer below image to get more insights,

 

Generating Performance Audit report in the Desktop version - Step by step explanation

Generating Performance Audit report in the Desktop version – Step by step explanation

 

On opening the inspect element (link to explain it) on your website, you could do the steps as followed for the lighthouse tool to generate report for the desktop version.

  • Click on Audits
  • Select the preferred Version
  • Choose the Network
  • Click on Perform an audit

After you follow these simple steps, you could see the detailed report as found in the below images:

Detailed report (Desktop version)

 

Complete performance report of https://www.webspeedmaster.com/ (Desktop Version)

Complete performance report of https://www.webspeedmaster.com/ (Desktop Version)

 

Further, the report gives you the time frame of the following metrics:

  • First paint
  • Contentful paint
  • Meaningful paint and
  • The time to interactive

 

 

"<yoastmark

 

 

"<yoastmark

 

 

 

"<yoastmark

 

 

"<yoastmark

 

Users wish to load a website under 2000ms.

But, quick load also depends on the internet connection as well.

So, 3G connection naturally loads the webpages little slow. Typically in this case, when the website loads under 5000ms are considered to reach the perfect goal.

For the users having the faster network, the webpage load time should be under 2000ms. In this case, loading a website under 1000ms is considered to reach the perfect goal.

Kindly refer to the below metrics table to see how users experience the delay in performance.

 

What happens during 10 secs load time?

 

Source: Google (For more info on RAILS standards please refer this, https://developers.google.com/web/fundamentals/performance/rail

Source: Google (For more info on RAILS standards please refer this, https://developers.google.com/web/fundamentals/performance/rail

 

 

Light House measures the performance using the following categories:

  • Performance
  • Progressive Web App
  • Accessibility
  • Best Practices
  • SEO

 

I’ve come across many tools which provide the report and suggest many ways for the optimization.

But I would say that the light house is way ahead of the other tools with respect to precision data.

Even though light house identifies all the potential performance related issue,  you still need to depend on another software to fix them.

Once you are done with the audit report, analyze your website here, https://www.speedboost.xyz for fixing any issues that were reported by Light House.  You can speed up the website approximately 20 minutes after your initial configuration.

Now, let’s see how the LightHouse tool gives technical details on each category.

 

Performance:

It examines the loading speed of your website and provides every progression of the site frame by frame.

Here in the below report, light house provides you with a solution pointing out the exact sections where speed can be improved.

 

Screenshot of scores of all the metrics - Light House report

Screenshot of scores of all the metrics – Light House report

 

First contentful paint :

It refers to any kind of change that happens in the browser when you try to load the website.  When you try to load a website the first thing you see is blank white screen and anything after is called First Contentful Paint, it can be anything background colour, a grid, or even a black dot 🙂

IMAGE REFERENCE – a) Blank white screen and b) screen with some changes

First meaningful paint:

It is often triggered when any content is displayed. It might be an image, text or video. In another words, anything that is defined in the DOM (Document Object Model)

If you really want to know more about the first contentful and meaningful paint, kindly refer this Gtmetrix article

Speed Index:

The lower the score, the better. It shows how fast the contents of a page are visibly populated quickly with a load time target of less than 1250 ms.

If you would like to go deep into the complex mathematical calculation please refer this article “How Speed Index Calculated

Estimated Input Latency: 

The target here is less than 50 ms. As per Google’s recommendation, a webpage should respond to user interactions within 100ms. A high latency will definitely result in very slow load of the webpage.

Time to Interactive:

Time taken for a user to completely access the website in every aspect. A good target is to load a webpage in under 2-3 seconds.

First CPU Idle:

 

Light House report - Performance score - Metrics explained

Light House report – Performance score – Metrics explained

 

Opportunities:

This metric helps you in improvising the web speed.

The metrics found below helps you in saving the memory, which ultimately triggers the load speed to be much faster than the earlier.

Some of these are:

Server Response time:

There is plenty of reasons for causing Slow Server Response time and there are many factors that affect the server response time. If you would like to know every cause for the slow server response time refer ” How to Fix Slow Server Response Time

WebP

Nowadays, webp is one of widely used images formats. It’s a modern image format which compresses the image in lossless format.

WebP images can be 25 – 35% lesser than the size compared to the other formats such as png or jpeg file.

For more insights, kindly refer “What is WebP?

 Eliminate render blocking:

There’s a lot you can do about improving your site speed.

Most optimizations can be found through eliminate render blocking CSS, JS.

Render blocking is the common among most of the websites.

So, after a detailed study, we have posted an article which helps you to remove the render blocking CSS and JS.

Property Size images:

The images that are displayed on the user’s screen should never be larger than the version of those rendered. Naturally larger images affects the webpage load time.

It’s recommended to go for “responsive images”, as we get multiple versions of each and every image and then specify the version used for your HTML, CSS and so on.

Defer unused CSS:         

The perfect way to reduce the latency.  An excellent way to do it is to defer or remove the CSS rules that are not actually utilized by the current web page.

To read more about the technical details on how to parse CSS, JS file, kindly have a look into Christos post “How to remove unused CSS?

Light House report - Performance score - Opportunities explained

Light House report – Performance score – Opportunities explained

 

Defer off screen images – when expanded

Here in the metric, you could see that the image file “…04/we-serve-the-world-3.png” is loaded only in the below the fold and it is offscreen. To know what is below the fold and above the fold?

Since user can’t see the offscreen images, we don’t have to load the images that are are displayed in the below the fold.

In this scenario, following this metric, we could save 54 kb for one particular image file.

If you are able to save 54kb in just one image file, then think of the all the files when followed defer offscreening metric.

You just could save a huge load lag which results in the faster loading time.

 

Light House report - Performance score - Opportunities - Defer Offscreen images explained

Light House report – Performance score – Opportunities – Defer Offscreen images explained

 

About the WebP, converting the file “…01/about-us.png” to webP format might save you 17 kb.

Normally the image reduction would be 25-30%. It is recommended that you choose the webP format.

 

Light House report - Performance score - Opportunities - Serve images in next-gen formats explained

Light House report – Performance score – Opportunities – Serve images in next-gen formats explained

 

Diagnostics:

The last metric in the performance is the diagnostics.

You need to formulate the ability to use cache and reuse previously acquired resources. This is the most vital aspect and a noted parameter for the performance.

About the critical request chain: It displays the necessary resources which are required for the initial render of the web page.

You could minimize the resources and its download size or you could defer the download of unwanted resources.

By doing the above, you could reduce the length of chains which in turn facilitates the quick load of the page.

 

Light House report - Performance score - Diagnostics explained

Light House report – Performance score – Diagnostics explained

 

Progressive Web App:

 Lighthouse tests the following;

If your app,

  • Can load in offline or fluctuating networks
  • Is relatively fast and quick
  • Is served from a secure origin
  • utilizes several accessibility best practices

It’s a basically a set of checklists, that focuses on load speed, brand colors, custom splash screens and more.

These are the details that a website with dedicated applications must check and ensures that the app is reliable and engaging in all aspects.

Kindly refer to the below link for more insights:

Progressive web apps checklist 

 

Light House report - Progressive Web App explained

Light House report – Progressive Web App explained

 

Accessibility:

It is simply the experience of the users who is typically a naïve user or a user who has a different way of approach to things that you expect out of them.

This category checks the website to ensure that people with special needs could use it. (Poor Vision, persons suffering from any types of impairments)

Kindly refer what is web accessibility and fundamentals?

 

Light House report - Accessibility explained

Light House report – Accessibility explained

 

Best Practices:

This category checks major recommendations for modernizing the webpage and to avoid performance dropdowns.

For instant: usage of HTTPS, deprecated API’s, request of permission from the user and much more. This section consists of both the failed and the passed tests lists.

 

Light House report - Best Practices explained

Light House report – Best Practices explained

 

SEO:

The last in the category evaluates the performance of your website against basic search engine optimization(seo) best practices.

Lighthouse tool uses the Google’s ranking factor to determine the level of optimizations done and how well it is optimized.

This means that you are being provided with the additional inputs and data so that it could increase your search rankings.

Kindly refer to Google’s recommendation on SEO:

 

Light House report - SEO explained

Light House report – SEO explained

 

Light House report - Runtime Settings

Light House report – Runtime Settings

 

 

Should I try lighthouse? Yes Try it:

I wouldn’t say that the Google Chrome Light House is the master of all the SEO analyzing tools, but it is the most valuable addition, which provides you a robust analysis of your website.

It’s an excellent extension which covers almost all the metrics and gives you precision audit report of your website, able to be used for optimization.

Being in this industry for almost 15 years, we have seen way more tools. I would say, go for it.

on the other hand, don’t miss

Having gathered all the metrics, you would need a developer to fix it for a better performance, right?

Nowadays more and more web-owners are tending towards knowing more technical details about the websites they own. Considering it, https://www.speedboost.xyz/ is one step ahead.

It not only displays the files to be optimized, it goes further and allows you to fix it right away.

You could try using the free trial version. Our technical specialist will help you with any questions.

 

 

 

 

 

Chandru Rajendran

Chandru Rajendran (Chadd) is a professional blogger. He loves to explore newer technologies and analyzes everything from User point and shares his knowledge for the easy understanding. A nature-loving fanatic keeps on gaining technical experience, in addition to being an analyst. He is the product manager of SpeedBoost Cloud Software.
Follow Chandru Rajendran on

Leave a Reply

Your email address will not be published. Required fields are marked *