Status

Installation

npm install @dg/lighthouse

Summary

This package uses Google's Lighhouse logic to measure page-speed performance metrics.

Details

This package is hosted on https://digitecgalaxus.visualstudio.com/devinite/_packaging?_a=package&feed=Devinite&package=%40dg%2Flighthouse&version=0.0.6&protocolType=Npm

Documentation

https://conf.devinite.com/display/ROC/Lighthouse+CI-Integration

Usage

import {performanceTest} from '@dg/lighthouse'

const numberOfIterationsPerRoute = 5 // 5-7 are suggested by google
const config = [  
  {  
    "route": "https://www.galaxus.ch/de/community",
    "budget": {  
      "performance": 90,
      "accessibility": 70,
      "best-practices": 100,
      "seo": 90
    }
  },
  {  
    "route": "https://www.galaxus.ch/de/page/1234",
    "budget": {  
      "seo": 80
    }
  },
  {  
    "route": "https://www.galaxus.ch/",
    "profile": "mobile"
  },
  {  
    "route": "https://www.brack.ch/",
    "skip": true,
  }
]

const { htmlReport, jsonReport } = await performanceTest(config, numberOfIterationsPerRoute)

If you don't specify any budget value for one of the listet budget properties, it will take 50 as a default budget value. By using the property skip, it will just skip the tests. As you can see on the example above, there is a property called profile as well. With this property you can set the configuration-profile that fits best for you. Currently available profiles are mobile and desktop(default).

Reports

JSON report

Properties and structure:

[
  {
    "route": "https://www.digitec.ch/de/community",
    "iterations": [
      {
        "performance": 96,
        "accessibility": 88,
        "best-practices": 100,
        "seo": 90
      },
      {
        "performance": 95,
        "accessibility": 88,
        "best-practices": 100,
        "seo": 90
      },
      {
        "performance": 95,
        "accessibility": 88,
        "best-practices": 100,
        "seo": 90
      },
      {
        "performance": 95,
        "accessibility": 88,
        "best-practices": 100,
        "seo": 90
      },
      {
        "performance": 95,
        "accessibility": 88,
        "best-practices": 100,
        "seo": 90
      }
    ],
    "average": {
      "performance": 95,
      "accessibility": 88,
      "best-practices": 100,
      "seo": 90
    },
    "budget": {
      "best-practices": 50,
      "seo": 50,
      "performance": 50,
      "accessibility": 50
    },
    "passed": true
  }
]

The JSON report contains the results of each performance-test iteration and the average result. Additionally it contains the predefined budget values and the property "passed", which indicates if all performance-test iterations met the expectations.

HTML report

The HTML report visualizes all the data which is present inside the JSON report. As the HTML report is generated by this package and returned as a string, it can be easyli exported as a file:

const { htmlReport, jsonReport } = await performanceTest(config, numberOfIterationsPerRoute)

fs.writeFileSync('./exports/report.html', htmlReport)