using lighthouse ci + lighthouse server , azure pipeline and github action translations.

summary.md

Using lighthouse ci + lighthouse server, via azure pipeline and github action

How to test prod and qa links using lighthouse server.

How to monitor branch updates using lighthouse server.

potential audiences

1. the business and seo team needing to track lighthouse performance scores.
2. future developers wanting a professional solution to adding lighthouse to their ci.

link to a previous jbs article on what lighthouse is and how to use it: https://www.jbssolutions.com/resources/blog/lighthouse-full-stack-developer/

outcomes

• test prod urls using temp storage + github application.

• test pr's to a specific branch using temp storage + github application.

• add lighthouse server

  • setup on infrastructure such as heroku
    • https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md#deployment
    • https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md#heroku
  • setup a pipeline action that uses token from lhci wizard to send reports to server
  • lighthouse-server uses commit sha's
    • add an action to add a daily commit before generating a prod url report.

• test commits to a development branch shipping the results to a seperate lighthouse-server app.

• test prod urls and ship them to lighthouse-server

  • estimated costs - 1 run per day === #lines in database + amount of data added after screenshots

lighthouse-ci

The remaining article contains a simplified implementation of the google getting started document . Refer to the google getting started document if you want to customize your solution further.

Getting lhci setup:

One file is needed for the lhci (lighthouse ci) command to work: lighthouserc.json

pro tip: Skip assertions and get the scores showing in the browser.

Our default configs will help you get started: lighthouserc.json using temp storage without lighthouse server to hit a production url:

{
	"ci": {
		"collect": {
			"numberOfRuns": 5,
			"url": [
				"https://github.com/GoogleChrome/lighthouse-ci",
			]
		},
		"upload": {
			"target": "temporary-public-storage"
		}
	}
}

a future article

useful browser tools and sites for debugging and fixing front end performance:

1. webpagetest-filmstrip:
   https://www.webpagetest.org/video/compare.php?tests=220518_AiDcQ6_CED-r:1-c:0-e:filmstrip

future improvements

future improvements may involve a script to cleanup all runs greater than a month old. but leaving 1 per month intact for a historical record.

how to check database usage on heroku:

how to delete old runs from the heroku database:

GoogleChrome/lighthouse-ci#149 (comment)

DELETE FROM statistics WHERE buildId = '3c6285c747ffefc477b956c54e23a33b662d7986’;
DELETE FROM runs WHERE buildId = '3c6285c747ffefc477b956c54e23a33b662d7986’;
DELETE FROM builds WHERE id = '3c6285c747ffefc477b956c54e23a33b662d7986’;

other helpful links: