Google Lighthouse Blogpost

azure-pipelines.yml

# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

variables: {
  ARTIFACT_FEED: '[YOUR_FEED_ID]',
  CACHE_KEY_FILE: '**/package-lock.json, !**/node_modules/**/package-lock.json, !**/.*/**/package-lock.json',
  CACHE_TARGET_FOLDER: '**/node_modules, !**/node_modules/**/node_modules',
  WEBSITE_URL_DEV: 'https://[YOUR_DEV_WEBSITE_URL]',
  WEBSITE_URL_TST: 'https://[YOUR_TST_WEBSITE_URL]'
}

stages:
  - stage: build
    displayName: Build
    jobs:
      - job: install
        steps:
          - task: RestoreAndSaveCache@1
            inputs:
              keyfile: '$(CACHE_KEY_FILE)'
              targetfolder: '$(CACHE_TARGET_FOLDER)'
              vstsFeed: '$(ARTIFACT_FEED)'
              platformIndependent: true
            displayName: Restore/save node modules from/to cache
          - script: npm ci
            displayName: Install Dependencies
            condition: ne(variables['CacheRestored'], 'true')
          - script: npm run build:prod
            displayName: Angular build app
          - publish: dist/my-angular9-app
            artifact: build-artifact
            displayName: Publish build artifact
  - stage: deploy_dev
    displayName: Deploy to dev
    jobs:
      - deployment: deploy
        environment: my-angular9-app-dev
        pool:
          vmImage: 'ubuntu-latest'
        variables:
          - group: my-angular-app-dev
          - name: 'AZURE_STORAGE_ACCOUNT'
            value: '[MY_STORAGE_ACCOUNT_NAME_DEV]'
          - name: 'AZURE_STORAGE_KEY'
            value: $([MY_STORAGE_KEY_DEV])
        strategy:
          runOnce:
            deploy:
              steps:
              - download: current
                artifact: build-artifact
                displayName: Download BuildArtifact
              - bash: az storage blob delete-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -s \$web
                displayName: Clean blob storage
              - bash: az storage blob upload-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -d \$web -s $(Pipeline.Workspace)/build-artifact
                displayName: Deploy website
  - stage: lighthouse_tst_dev
    displayName: Compare lighthouse reports between TST and DEV
    jobs:
      - job: install
        displayName: Install NPM dependencies and run Google Lighthouse
        steps:
          - task: RestoreAndSaveCache@1
            inputs:
              keyfile: '$(CACHE_KEY_FILE)'
              targetfolder: '$(CACHE_TARGET_FOLDER)'
              vstsFeed: '$(ARTIFACT_FEED)'
              platformIndependent: true
            displayName: Restore/save node modules from/to cache
          - script: npm ci
            displayName: Install Dependencies
            condition: ne(variables['CacheRestored'], 'true')
          - bash: | 
              seo_score_dev=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_DEV))
              seo_score_tst=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_TST))
              echo "Seo score on DEV: $seo_score_dev"
              echo "Seo score on TST: $seo_score_tst"
              node -e "$seo_score_tst > $seo_score_dev ? console.error('SEO score on TST is better than on DEV') : console.log('SEO score on DEV is at least the same or better than on TST')"
            displayName: Run lighthouse performance check
            failOnStderr: true
            enabled: true
  - stage: deploy_tst
    displayName: Deploy to Test
    jobs:
      - deployment: deploy
        environment: my-angular9-app-tst
        pool:
          vmImage: 'ubuntu-latest'
        variables:
          - group: my-angular-app-tst
          - name: 'AZURE_STORAGE_ACCOUNT'
            value: '[MY_STORAGE_ACCOUNT_NAME_TST]'
          - name: 'AZURE_STORAGE_KEY'
            value: $([MY_STORAGE_KEY_TST])
        strategy:
          runOnce:
            deploy:
              steps:
              - download: current
                artifact: build-artifact
                displayName: Download BuildArtifact
              - bash: az storage blob delete-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -s \$web
                displayName: Clean blob storage
              - bash: az storage blob upload-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -d \$web -s $(Pipeline.Workspace)/build-artifact
                displayName: Deploy website

comparison-stage.yml

- stage: lighthouse_tst_dev
    displayName: Compare lighthouse reports between TST and DEV
    jobs:
      - job: install
        displayName: Install NPM dependencies and run Google Lighthouse
        steps:
          - task: RestoreAndSaveCache@1
            inputs:
              keyfile: '$(CACHE_KEY_FILE)'
              targetfolder: '$(CACHE_TARGET_FOLDER)'
              vstsFeed: '$(ARTIFACT_FEED)'
              platformIndependent: true
            displayName: Restore/save node modules from/to cache
          - script: npm ci
            displayName: Install Dependencies
            condition: ne(variables['CacheRestored'], 'true')
          - bash: | 
              seo_score_dev=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_DEV))
              seo_score_tst=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_TST))
              echo "Seo score on DEV: $seo_score_dev"
              echo "Seo score on TST: $seo_score_tst"
              node -e "$seo_score_tst > $seo_score_dev ? console.error('SEO score on TST is better than on DEV') : console.log('SEO score on DEV is at least the same or better than on TST')"
            displayName: Run lighthouse performance check
            failOnStderr: true
            enabled: true

index-part-1.html

<meta name="description" content="A sample Angular application">

index-part-2.html

<img src="https://picsum.photos/200">

lighthouse-part-1.ts

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const argv = require('yargs').argv;

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results => {
      // use results.lhr for the JS-consumable output
      // https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts
      // use results.report for the HTML/JSON/CSV output as a string
      // use results.artifacts for the trace/screenshots/other specific case you need (rarer)
      return chrome.kill().then(() => results.lhr);
    });
  });
}

lighthouse-part-2.ts

const opts = {
  chromeFlags: ['--headless'],
  // Use to get the report for desktop clients, default is mobile
  emulatedFormFactor: 'desktop'
};

lighthouse-part-3.ts

let url: string;
argv.url ? url = argv.url : url = 'http://localhost:4200';

lighthouse-part-4.ts

launchChromeAndRunLighthouse(url, opts).then(results => {
  console.log(results.categories.seo.score);
});

lighthouse.ts

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const argv = require('yargs').argv;

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results => {
      // use results.lhr for the JS-consumable output
      // https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts
      // use results.report for the HTML/JSON/CSV output as a string
      // use results.artifacts for the trace/screenshots/other specific case you need (rarer)
      return chrome.kill().then(() => results.lhr);
    });
  });
}

const opts = {
  chromeFlags: ['--headless'],
  // Use to get the report for desktop clients, default is mobile
  emulatedFormFactor: 'desktop'
};

let url: string;
argv.url ? url = argv.url : url = 'http://localhost:4200';

launchChromeAndRunLighthouse(url, opts).then(results => {
  console.log(results.categories.seo.score);
});

package.json

{
  "scripts": {
    "lighthouse": "ts-node lighthouse/src/lighthouse.ts"
  }
}