/site-audit

Performance and accessibility audit to design a better user experience

Primary LanguageHTML

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://www.ioes.ucla.edu --output json --output html --view

lighthouse https://www.ioes.ucla.edu --output html --view

lighthouse https://www.sustain.ucla.edu --output html --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.com --port port-number using the port number from chrome-debug.
  4. ex. lighthouse https://dev.ioes.ucla.edu --port portnumber --output json --output html --view with json and html outputs.

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.

IoES Lighthouse reports

www.ioes.ucla.edu

All test results are saved in the reports folder in this repo.

2021

  1. 2021-02-19 / 99, 100, 100,100
  2. 2021-02-19 / 98, 100, 100, 100
  3. 2021-02-19 / 80, 100, 100, 100

Past reports

  1. 2020-01-09 4:38PM
  2. 2019-11-26 13:54pm, desktop, CPU throttling 4x slowdown simulated
  3. 2019-11-26 10:06am, desktop, CPU throttling 4x slowdown simulated
  4. 2019-11-26 10:00am, desktop, no CPU throttling
  5. 2019-11-26 9:56am, mobile, CPU throttling 4x slowdown simulated
  6. 2019-11-26 9:50am, mobile, CPU throttling 4x slowdown simulated

Google links

Online Course