Auditing with Lighthouse - Quality Assurance Checkpoint for WebApp!
Take a minute to GET Performance, Accessibility, Best Practices, SEO, PWA metrics in hand.
Lighthouse is an open-source, automated tool for auditing and improving the quality and performance of web pages.
It’s a popular choice due to its versatility and ability to measure different metrics like best practices, SEO - search engine optimization, and more...
Before jumping on how to use Lighthouse, the basic question here is:
WHY Lighthouse?
- To keep an eye on the site with respect to the web-standards.
- Lighthouse not only provides metrics but also generates an actionable report referring to specific DOM elements, CSS selectors or infrastructure setup.
- Instead of waiting for the project completion, lighthouse is helpful in getting the audits in the early stage and alarming issues can be resolved beforehand.
- Lighthouse can be used before starting extensive performance testing using other performance tools like Gatling, JMeter, BlazeMeter, etc.
.
Run Lighthouse
- Within Chrome DevTools
- As a Chrome Extension
- Via Lighthouse CLI
Note: Chrome Browser should be pre-installed.
Run Lighthouse from Chrome DevTools
The easiest one since its built-in.
- Just open Chrome DevTools in the browser (Key Shortcut: F12).
- Click on Generate Report. That's all! Your work is done. Wait for the audit completion and the report will be generated in a few seconds.
What actually happens while Auditing ?
Running against site will emulate a mobile device, throttle down the connection to make sure that the performance numbers realistic to the real world if somebody is viewing site on mobile device. And page reloads in between to check whether site is working offline. Then performance audits and accessability audits will run.
At the end, the report will be generated which basically shows the scores according to the feedback improvements.
.
Run Lighthouse as a Chrome Extension
But first, install the chrome extension for lighthouse -
- Go to the webpage which needs to be audited.
- Click the Lighthouse icon. It should be next to the Chrome address bar. If not, open Chrome’s main menu and access it at the top of the menu. After clicking, the Lighthouse menu expands.
Note: Select the desired metrics for auditing. And also select the platform on which audit can run (desktop or mobile).
- Click on Generate Report. A new tab will be opened and wait for the audit completion and the report will be generated in a few seconds.
.
Lighthouse CLI
It gives more flexibility and advanced usage by allowing audits to run via command line or programmatically.
Note: Node and npm need to be pre-installed.
Step1: Open terminal and use the below command to install lighthouse globally in local machine.
npm install -g lighthouseStep2: After installation, run the below command by specifying the URL
lighthouse <url>Or, audit more can also be specified by using below command:
lighthouse <url> --emulated-form-factor="desktop" --viewOther parameters can be explored by using the below command:
lighthouse --helpWait for audit completion. And open the link to the audit report in the browser.
Note: Lighthouse can produce a report as JSON or HTML. Running Lighthouse with the --output=json flag generates a JSON dump of the run.
lighthouse https://www.google.com --output=json --output-path=./Desktop/audit.json.
AND One more way …
Integrate Lighthouse with Cypress JS-based Framework
Audits can be generated within e2e tests using Lighthouse plugin -
Note: There are plugins available for Jest and Puppeteer too.
GITHUB Actions
Lighthouse can also be added as a safety net for PUSH commit. Below code snippet can be added to workflow.yml file.
References
- Documentation Link: https://developers.google.com/web/tools/lighthouse#integrate
- Github Link: https://github.com/GoogleChrome/lighthouse
- Lighthouse Plugin Link: Refer ‘Related Projects’ section - https://github.com/GoogleChrome/lighthouse#plugins
.
