To get started with Google Lighthouse and Chrome DevTools

Websites-Performance, Open Source, measure, and improve To get started with Google Lighthouse and Chrome DevTools

With Google Lighthouse, developers can measure the performance of websites, as well as the usability of your Web Apps. The test conditions can be flexible to customize.

Companies

Google Lighthouse displays comprehensive reports in the measurement of web pages.Google Lighthouse displays comprehensive reports in the measurement of web pages.

(Image: Joos / Google)

The focus of Google Lighthouse Progressive Web Apps (PWA) are available. But other Web applications can be tested by the flexible test conditions. Since PWAs to the websites of behavior generally, such Apps on devices, the performance has to be of course as high as possible, in order for users to use the App. Here’s Lighthouse should help to identify bottle necks and to avoid.

Google Lighthouse as a Chrome extension, or in the CLI use

Google Lighthouse displays comprehensive reports in the measurement of web pages.Google Lighthouse displays comprehensive reports in the measurement of web pages.

(Image: Joos / Google)

Google Lighthouse as the Open-Source Tool available for Download. The operation of the Lighthouse can also be done using Google Chrome as an extension, alternatively, a command-line interface the Command Line Interface (CLI) is available. The Browser extension is limited in functionality a little, the CLI version offers more options.

Lighthouse locally in the command line is invoked. This is not required on the computer node.js .Lighthouse locally in the command line is invoked. This is not required on the computer node.js .

(Image: Joos / Google)

In productive operation, both variants are certainly parallel useful. For the CLI node.js In addition to the Lighthouse on the Computer. The Chrome extension also works without any additional software. For Mozilla Firefox, Google Lighthouse is available. To use the Add-in must be installed On.

Websites and Web Apps with Lighthouse test

The Test of a web page is with the extension is relatively simple. After Loading the website with be [Strg]+[Shift]+[i] under Windows, or [CMD]+[Option (alt)]+[i] first of all, the developer called Tools, there select the tab “Lighthouse is then”. To the Lighthouse-Check trigger, first the desired category-checkbox and click on “Generate report”.

Then Google Lighthouse is a measure of the page, and displays the results directly in the Browser. In the upper area on a point scale of 1 (worst) to 100 (good), the values for each measuring range. Below will be displayed for each sub-points for full Details.

Developers can read out the results to improve performance in each of the areas in detail and performance issues very quickly detect and fix. At the top of the report versions for different values have to see. To do this, Progressive Web App, Performance, Accessibility, Best Practices, and SEO include.

At the bottom of the report, the Details for each of the measuring ranges can be seen. Here is also evident, where performance problems on website caused. Important values in First Contentful Paint and Time to Interactive “are”. Through these values, it quickly becomes clear, when the website was built and how long will it take before the user can inter-actively accessing the objects of the website.

For PWAs, there is a private area that is activated when a web page for at least a PWA is used. In the report’s recommendations are to see how a PWA can be, whether the controls are optimally designed, and whether the objects of the PWA are properly configured, for example, images.

Google Lighthouse for the professional sector

Who wants to comprehensively analyze pages, around the use of Google Lighthouse in the command line, hardly. This is also due to the fact that the CLI is much more options are available, as in the case of the extension.

Lighthouse uses for its measurement is an Emulation of a Nexus-5x-Android Smartphones. With the Option –disable-device-emulation there is no Emulation. Also, the website Performance by using powerful Hardware is via the CLI better Option –disable-cpu-throttling tested.

In order to operate Lighthouse on a computer with Windows, first, the current Version of node.js installed. After that, the Lighthouse will be installed as a global module:

npm install -g lighthouse

To use the Google Lighthouse CLI, you cannot do without Installation node.js .To use the Google Lighthouse CLI, you cannot do without Installation node.js .

(Image: Joos / Google)

In order to test after the Installation, a web page, Lighthouse called, and as an Option on the website as well as the desired Parameter with given, for example:

Lighthouse https://developers.google.com --disable-device-emulation --disable-cpu-throttling --view

A more in-depth help of the Tool “lighthouse –help”. Through the menu with the three dots in the display of a Lighthouse-report at the top right, several options are available, reports as HTML-to save file or share it as a Gist. Reports can also be printed. The Save as a JSON file is here.

Reports can also be used as Gists shared. A locally started the report is opened in the “Save as Gist” in the Lighthouse Report Viewer. The first time you use the access must be allowed.

Chrome DevTools and Google Lighthouse

Lighthouse reports can, of course, also save.Lighthouse reports can, of course, also save.

(Image: Joos / Google)

Most of the web developers work in parallel with the Chrome DevTools, when it comes to the optimization of websites. The Tools are integrated directly into the Google Chrome Browser and help us to optimize our web pages. The DevTools to work together with the Lighthouse, for example, when it comes to export a report and share it with other developers.

Exported reports can also be available for free Lighthouse Report Viewer. The DevTools are loaded, for example, when on a web page in Google Chrome via the context menu of the menu item, “” will Examine selected.

The Chrome DevTools to use.The Chrome DevTools to use.

(Image: Joos / Google)

Via the menu item “Elements” to see the HTML Code of the page. However, the DevTools will not show the source code of the page, but the Code in the Google Chrome interpreted. This must not be necessarily the same Code. Here is the CSS Code for a page can be checked. On the “Console” is it possible to check the JavaScript elements. Through the menu with the three dots in the top right of the DevTools can be positioned elsewhere.

(ID:47036011)

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png