What Is Google Lighthouse?

What is Google Lighthouse?

Google Lighthouse is a tool that tests the usability and performance of progressive web apps. Apart from web apps, users can also use the tool to examine conventional web pages for their performance and optimization potential.

Unlike many other analysis tools, Google’s new creation offers the possibility to adapt and filter the test conditions to assess the accurate web performance parameters as close to reality as possible.

Introduction to Google Lighthouse

Progressive web apps are web pages that closely resemble mobile apps regarding appearance, functionality, and application possibilities. Web apps offer dynamic content and are extremely popular.

Examples of progressive web apps are websites such as booking.com or Twitter, which have many native app features in their browser version.

For these progressive mobile apps, also known as PWAs, to give users the feeling that they are using a native app, they must meet certain features and performance parameters. Google’s Lighthouse test allows these indicators to be measured and optimized.

Lighthouse is open-source software and is usually used through a Chrome extension (Lighthouse Chrome extension). The handling is effortless: once the Lighthouse Chrome extension is installed, you can access any web page and check its performance by clicking on the extension icon with the mouse. The evaluation is displayed in tables of measured values and graphical representations.

Google Lighthouse analyzes and compares the following areas:

PWA, Performance, Accessibility, Best Practices, and SEO (detailed information is available for each of these areas). Once the analysis is done, the tool automatically offers suggestions for improvement.

Lighthouse is very flexible and offers a large number of comparative and analysis views that you can use to optimize your website. 

The tool is suitable for both novices and professionals. As a rule, professionals and developers don’t usually use Lighthouse with the Chrome extension but rather via the command-line tool, which has much more specific configuration options. However, the command-line device requires node.js to be installed on the webserver beforehand.

Google Lighthouse features in detail.

Lighthouse checks five different aspects of web pages:

Progressive web apps.

Progressive web apps analysis is the core function of Google Lighthouse and has been available since its release. The software analyzes whether the web page is working as intended.

More specifically, Lighthouse checks whether all dynamic elements and content are rendered correctly, whether the page registers a service worker and whether offline functionality is available.

A service worker is a script that is executed to make certain information on the web page also available offline. As a rule, a proxy interface between the web page and the user is usually established for this purpose.

Performance

In the area of performance, Lighthouse analyzes the speed of the web page or web application and checks that the elements that have been loaded are displayed correctly. The analysis consists of the following six subcategories:

First Contentful Paint indicates how long it takes to display the first image or the first complete text on the web page.

First Meaningful Paint indicates when the main contents of the page can be displayed in full.

Speed Index: indicates how long it takes for the contents of the web page to be displayed.

Time To Interactive: indicates how long it takes for the page to load with full interactivity.

First CPU Idle indicates when the activity of the main threads is sufficiently reduced to be able to process user input for the first time.

Estimated Input Latency: indicates an estimate of how many milliseconds it takes for the web page or application to react to user input within the highest loaded five-second window while the page is downloading.

If the latency is greater than 50 milliseconds, it is pervasive for users to consider the page or app as slow.

In addition to analyzing these factors, Lighthouse also offers suggestions for improvement that propose different optimization options to cut loading times.

These include, for example, image compression, JavaScript, or the elimination of resources that could be blocking the rendering of the page. The rest of the analyses in the performance area include recommendations on the following points:

• Use image files in formats that require little storage space and render them in the correct dimensions.
• Provide text and JavaScript in the compressed form if possible.
• Optimize cache memory for improved rendering of static content.
• Avoid redirects and load essential queries in advance to allow fast response times by the server.
• Provide animated content in modern, space-saving formats if possible.
• Keep the data volume of the website as small as possible.
• Use tags and labels in such a way as to improve measurement and tracking results.

More informaition about WEB PERFORMANCE.