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

    Example 1. build.gradle
    implementation(group: 'org.vividus', name: 'vividus-plugin-lighthouse', version: '0.5.12')

  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       |