site-audit

Site audit

Performance and accessibility review to help design a better user experience

Google Lighthouse

Google Lighthouse is an open-source, automated tool for improving the quality of web pages. It can be run in Chrome DevTools or installed locally and run from the command line.

Cheatsheet

Install

npm install -g lighthouse

See all options

lighthouse --help

To run an audit, use --output flags to export json, html or both. use --view to view report in browser.

lighthouse https://mysite.ucla.edu --output html --view

lighthouse https://mysite.ucla.edu --output html --output json --view

lighthouse https://mysite.ucla.edu --output html --emulated-form-factor=none --throttling-method=provided --view

lighthouse https://mysite.ucla.edu --output html --emulated-form-factor=none --view

Test on a site with authentication

When installed globally via npm i -g lighthouse or yarn global add lighthouse, chrome-debug is added to your PATH. This binary launches a standalone Chrome instance with an open debugging port.

  1. Run chrome-debug. This will log the debugging port of your Chrome instance
  2. Navigate to your site and log in.
  3. In a separate terminal tab, run lighthouse http://mysite.ucla.edu --port port-number using the port number from chrome-debug.
  4. ex. lighthouse https://mysite.ucla.edu --port portnumber --output json --output html --view

View and share reports

Reports are saved in the directory command is run. If you want to output path to another folder use --output-path

ex: lighthouse --output json --output-path <path/for/output.json>

To view a report that’s been saved as a Gist:

Add ?gist=<ID> to the Viewer’s URL, where <ID> is the ID of the Gist.

https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>

Open the Viewer, and paste the URL of a Gist into it. Or upload the json file.

Accessiblity

Online Courses

Lighthouse reports

You can use this section to save reports and publish them on the web in this repo.