Lighthouse Plugin

The plugin provides the ability to generate Lighthouse performance reports on the user experience of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

Installation

  1. Copy the below line to dependencies section of the project build.gradle file

    Please make sure to use the same version for all VIVIDUS dependencies.
    Example 1. build.gradle
    implementation(group: 'org.vividus', name: 'vividus-plugin-lighthouse', version: '0.6.0')

  2. If the project was imported to the IDE before adding new dependency, re-generate the configuration files for the used IDE and then refresh the project in the used IDE.

Properties

Property Name Acceptable values Default Description

lighthouse.application-name

<string>

The application name to be used in the User-Agent header.

lighthouse.api-key

<string>

The API key that identifies your project and provides you with API access, quota, and reports. Its recommended to specify the key if you plan to use the plugin in an automated way and make multiple queries per second.

lighthouse.categories

comma-separated list of categories (performance, pwa, best-practices, accessibility, seo)

performance,pwa,best-practices,accessibility,seo

The audit catigories to run, by default the scan includes all 5 categories, but you can select particular ones depending on which aspects of your website you wish to analyze.

Steps

Perform Lighthouse scan

Performs Lighthouse scan of the specified web page and validates performance metrics against expected thresholds.

When I perform Lighthouse $scanType scan of `$webPageUrl` page:$metricsValidations

  • $scanType - The scan type to use:

    • full - The scan is performed on both desktop and mobile devices.

    • desktop - The scan is performed on desktop device.

    • mobile - The scan is performed on mobile device.

  • $webPageUrl - The page URL to perform scan on.

  • $metricsValidations - The metric validations:

    • $metric - The Lighthouse metric name.

      • Performance metrics:

        • First Contentful Paint

        • Largest Contentful Paint

        • Total Blocking Time

        • Cumulative Layout Shift

        • Speed Index

      • Audit scores:

        • Accessibility Score

        • Best Practices Score

        • Performance Score

        • PWA Score

        • SEO Score

    • $rule - The comparison rule.

    • $threshold - The expected integer or floating (e.g. 0.35) number.

Example 2. Perform Lighthouse scan on both desktop and mobile devices
When I perform Lighthouse full scan of `https://dequeuniversity.com/demo/mars` page:
|metric                  |rule        |threshold|
|First Contentful Paint  |LESS_THAN   |500      |
|Largest Contentful Paint|LESS_THAN   |500      |
|Total Blocking Time     |LESS_THAN   |100      |
|Cumulative Layout Shift |LESS_THAN   |100      |
|Speed Index             |LESS_THAN   |1500     |
|Accessibility Score     |GREATER_THAN|90       |
|Best Practices Score    |EQUAL_TO    |100      |
|Performance Score       |GREATER_THAN|95       |
|PWA Score               |GREATER_THAN|20       |
|SEO Score               |GREATER_THAN|85       |

Compare Lighthouse audit scores of two pages

Performs a Lighthouse scan on both the baseline and checkpoint pages validating that the audit scores of the checkpoint page have not worsened compared to the audit scores of the baseline page.

Table 1. Properties
Property Name Acceptable values Default Description

lighthouse.acceptable-score-percentage-delta

number

5

Lighthouse scan results may vary from one scan to another, to alleviate this variety the property enables acceptable percentage delta between checkpoint and baseline audit scores.

 
Then Lighthouse $scanType audit scores for `$checkpointPage` page are not less than for `$baselinePage` page

  • $scanType - The scan type to use:

    • full - The scan is performed on both desktop and mobile devices.

    • desktop - The scan is performed on desktop device.

    • mobile - The scan is performed on mobile device.

  • $checkpointPage - The checkpoint page.

  • $baselinePage - The baseline page.

Example 3. Compare Lighthouse results of two pages
Then Lighthouse desktop audit scores for `https://www.vividus-reactjs.com/` page are not less than for `https://www.vividus-vuejs.com/` page