Google Light­house is a tool that tests pro­gress­ive web apps for user-friend­li­ness and per­form­ance. Besides web apps, users can also assess con­ven­tion­al websites for per­form­ance and op­tim­isa­tion potential with the tool. Unlike many other analytics tools, Google’s new tool lets you adapt and filter test con­di­tions for the most realistic eval­u­ation of actual website per­form­ance para­met­ers.

In­tro­duc­tion to Google Light­house

Pro­gress­ive web apps (PWAs) are websites that look, work and are operated like mobile apps. Web apps offer dynamic content and are now very popular. Examples of PWAs include websites like booking.com and Twitter, which share a sur­pris­ing number of features with native apps in their browser versions.

To enable PWAs to make users feel like they are operating native apps, they have to fulfil specific per­form­ance para­met­ers and prop­er­ties. You can use the Google Light­house test to measure and optimise these per­form­ance aspects. Light­house is an open-source software and is generally used as a Chrome extension. It is very simple to use: After in­stalling the Light­house Chrome extension, you can open any website and test its per­form­ance by clicking the extension icon. Eval­u­ation is provided in detailed tables of meas­ure­ments and graphics.

Google Light­house analyses and compares the following areas: PWA, per­form­ance, ac­cess­ib­il­ity, best practices, and SEO. You can access detailed in­form­a­tion on each of the areas analysed. After analysis, the tool provides ad­di­tion­al tips to improve the site.

Light­house is extremely flexible and offers you many valuable analytics and com­par­at­ive insights, which you can use to optimise your website. Thanks to the variable con­fig­ur­a­tion, you can map any con­ceiv­able scenario for analysis. The tool is suitable for beginners, advanced users, and pro­fes­sion­als. Pros and de­velopers generally don’t use the Light­house Chrome extension. Instead, they use the command line, which can be con­figured in far greater detail. However, you have to install node.js on the webserver in advance in order to use the command line.

What exactly does Google Light­house do?

Light­house evaluates a given website in five different cat­egor­ies.

Pro­gress­ive web apps

Google Light­house’s core function, which has been available since release, is analysing pro­gress­ive web apps. The software analyses whether the website works as intended. In detail, Light­house checks for correct dis­play­ing of all elements and dynamic content, instances of service worker re­gis­tra­tion on the website, and avail­ab­il­ity of offline func­tion­al­ity. A service worker is a script that is run to make website in­form­a­tion available offline, too. Generally, this is done by setting up a proxy interface between the website and users.

Per­form­ance

When it comes to per­form­ance, Light­house analyses the speed of the website or web app and checks whether the elements loaded are correctly displayed to the user. Analytics consists of the following six sub-cat­egor­ies:

  • First Con­tent­ful Paint – indicates how long it takes until the first image or first text is displayed in full on the website.
  • First Mean­ing­ful Paint – indicates when the main contents of the website are fully visible.
  • Speed Index – shows how quickly the website contents are shown.
  • Time To In­ter­act­ive – indicates when the page is fully loaded and ready for in­ter­ac­tion.
  • First CPU Idle – indicates the time when the main thread activity on the website is low enough to process user entries for the first time.
  • Estimated Input Latency – estimates how many mil­li­seconds the page or web app takes to react to user entries during the five-second window with the highest CPU util­isa­tion when loading the page. If latency is more than 50 mil­li­seconds, users often perceive the page or app as slow.

Besides analysing the above factors, Light­house also suggests im­prove­ments. The sug­ges­tions provide a wide range of op­tim­isa­tion options to reduce loading times. For example, this includes com­press­ing images, JavaS­cript or breaking up resources that could block website rendering. Other per­form­ance analytics functions also include re­com­mend­a­tions across the following points:

  • Deliver image files in formats with small file sizes and correct di­men­sions.
  • Provide com­pressed texts and JavaS­cript.
  • Enable cache op­tim­isa­tion for improved display of static content.
  • Avoid redirects and load the most important requests in advance to speed up server response times.
  • Deliver animated content in compact, modern video formats where possible.
  • Minimise the website’s data volume.
  • Add mark-ups and tags ap­pro­pri­ately to improve the results of meas­ure­ments and tracking.
Image: Google Lighthouse diagnostic and optimisation potential
Present­a­tion of dia­gnost­ic and op­tim­isa­tion potential for an analysed website

Ac­cess­ib­il­ity

Google Light­house also assesses how suitable the website or pro­gress­ive web app is for phys­ic­ally disabled people. Spe­cific­ally, Ac­cess­ib­il­ity tests whether important elements like buttons or links are described suf­fi­ciently or images and graphics have a voice-over function that outputs the contents audibly for the blind.

Image: Accessibility analysis in Google Lighthouse
The Ac­cess­ib­il­ity analysis indicates how ac­cess­ible the website is for people with dis­ab­il­it­ies. The final result is shown at the top as a score.

Best Practices

In Best Practices, Light­house primarily analyses the security aspects of the website or PWA. In this test, the tool assesses whether en­cryp­tion tech­no­lo­gies like TLS are used, website resources are from secure sources, and that JavaS­cript libraries are con­sidered safe. Light­house also analyses whether connected databases are secure and points out insecure commands and any older APIs being used.

Image: Best Practices in Google Lighthouse
You can also use Google Light­house to assess whether your web service is con­sidered trust­worthy.

SEO

Google Light­house performs various tests to analyse how well search engines can process the app or website. However, these tests in Light­house are very limited. Light­house outputs the analysis results on a scale from 0 to 100 points. If the site or app does not get full marks, op­tim­isa­tion is essential and the website operator will need to act.

Light­house focuses on search engine op­tim­isa­tion for mobile devices. The feature analyses and tests the website or pro­gress­ive web app to determine whether it is mobile-friendly and whether tags and metadata are optimised.

Image: SEO analytics in Google Lighthouse
Google Light­house assesses the technical con­di­tions for search engine op­tim­isa­tion.

How do you use Google Light­house?

Users have been able to directly install the Google Light­house Chrome extension for several years now. In general, Light­house can be used in many different ways. However, they all have one thing in common: Google’s Chrome browser must be installed on the computer where Light­house is to be used.

The easiest way to use Light­house is via Google DevTools. Light­house is available in the audit tab. You can also use the afore­men­tioned Chrome plug-in. The advantage of the Light­house Chrome option is that the latest version of the tool is always available. Users can also operate Light­house via the command line. This has the advantage that you can also use the Build tools. You can use a Node module for this purpose.

What in­form­a­tion does Light­house provide?

Google Light­house provides key per­form­ance in­dic­at­ors for the user ex­per­i­ence like “First Con­tent­ful Paint” or “First Input Delay”, and it does so in a very simple way. In order to analyse scenarios as precisely as possible, the tool simulates real con­di­tions, es­pe­cially on mobile devices, by adapting CPU per­form­ance and other factors that apply to users in their everyday lives.

After the analysis, Light­house assigns scores between 0 and 100, with 100 being the best result. You can use these scores as a guide to help you eliminate potential errors and optimise per­form­ance. When analysing the website’s load speed, it breaks the scores down into three cat­egor­ies. Scores from 0 to 49 (red) are rated slow, 50 to 89 (orange) are rated average and from 90 to 100 (green) are rated fast.

Based on these results, you can make the necessary ad­just­ments and op­tim­isa­tions to speed up the website’s load times. The analysis results are output for all meas­ur­able events including per­form­ance for PWAs, ac­cess­ib­il­ity, best practices, and SEO.

Image: Overall evaluation in Google Lighthouse
Google Light­house delivers all results at a glance.

The Light­house tests give operators of websites or pro­gress­ive web apps a lot of in­form­a­tion and analytics that enable them to optimise their offerings. The colour scale and re­com­men­ded tips enable even beginners to take the first steps towards op­tim­ising their sites them­selves.

Go to Main Menu