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”.
If you would like to evaluate your website against various quality parameters and best practises for absolutely free of cost! Just go for it.
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.
I tried my level best to match the differences.
|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|
It’s pretty simple. Click the below chrome extension (link) and get it installed in your browser.
To explain this in real time, I’d like to try this on my website webspeedmaster.com
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.
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:
Now the tool (light house) will scan your website for all the potential performance hurdles and provides an audit report in a new window.
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.
Along with mobile and desktop there few more handy options,
You can refer below image to get more insights,
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.
After you follow these simple steps, you could see the detailed report as found in the below images:
Detailed report (Desktop version)
Further, the report gives you the time frame of the following metrics:
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.
Light House measures the performance using the following categories:
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.
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.
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
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
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”
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 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.
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:
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”
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?”
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.
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.
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?
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.
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.
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.
Lighthouse tests the following;
If your app,
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:
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?
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.
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:
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.