mozilla / blurts-server

Mozilla Monitor arms you with tools to keep your personal information safe. Find out what hackers already know about you and learn how to stay a step ahead of them.
https://monitor.mozilla.org
Mozilla Public License 2.0
713 stars 203 forks source link

Add Lighthouse auditing script? #117

Closed pdehaan closed 6 months ago

pdehaan commented 6 years ago

https://developers.google.com/web/tools/lighthouse/

It's a good little deploy check, but not sure how much we want to integrate it.

I've been hacking around with the latest v3-alpha branch and this seems to work OK:

$ npm i lighthouse@next -g
$ lighthouse https://fx-breach-alerts.herokuapp.com/ --quiet --chrome-flags="--headless" --view --disable-device-emulation

Here's the results w/ device (Nexus 5X) emulation:

lighthouse_report_-_mobile


And the results w/ device emulation disabled:

lighthouse_report_-_desktop


I haven't figured out how to disable specific "suites" (like "Progressive Web App") via the CLI yet. I think at a minimum, it may be interesting to try adding lighthouse to package.json scripts and this would just be some manual audit process we do while developing to try and squash a few a11y and SEO nits.

pdehaan commented 6 years ago

Straw person proposal:

diff --git a/package.json b/package.json
index 162bacd..bf92b62 100644
--- a/package.json
+++ b/package.json
@@ -28,15 +28,17 @@
     "eslint-plugin-node": "^6.0.1",
     "faucet": "^0.0.1",
     "htmllint-cli": "^0.0.6",
+    "lighthouse": "2.9.4",
     "npm-run-all": "^4.1.3",
     "nsp": "^3.2.1",
     "nyc": "^11.8.0",
     "tape": "^4.9.0"
   },
   "engines": {
     "node": ">=8"
   },
-  "homepage": "https://github.com/mozilla/blurts-server#readme",
+  "homepage": "https://fx-breach-alerts.herokuapp.com/",
   "license": "ISC",
   "main": "server.js",
   "nyc": {
@@ -51,6 +53,9 @@
     "lint": "npm-run-all lint:*",
     "lint:js": "eslint .",
     "lint:nsp": "nsp check",
+    "lighthouse:clean": "rm ./fx-breach-alerts.herokuapp.com_*",
+    "lighthouse:desktop": "npm run lighthouse:mobile -- --disable-device-emulation",
+    "lighthouse:mobile": "lighthouse $npm_package_homepage --quiet --view --chrome-flags='--headless' --throttling-method=provided --save-assets",
     "migrate": "knex migrate:latest --knexfile db/knexfile.js",
     "pretest": "npm run lint",
     "get-hashsets": "node scripts/get-hashsets",

Basically we'd have 3 targets:

  1. $ npm run lighthouse:desktop — Emulate desktop browser.
  2. $ npm run lighthouse:mobile — Emulate mobile device (Nexus 5X).
  3. $ npm run lighthouse:clean — Delete all the debug data dumps which seem to live in the root directory. I also added this to the top-level .gitignore file:

    fx-breach-alerts.herokuapp.com_*

EMMLynch commented 6 months ago

Closing since we have a new Jira ticket to track this.