Audit test & benchmark your website!
First we are going to use a freely available tool from Google called Lighthouse, which is also shipped within the DevTools of Google Chrome and Microsoft Edge browsers, so there's no need to download anything.
Lighthouse is an open source website analysis tool that you can run to audit your website, though you need to be aware that when it runs it only takes a snapshot of the webpage you see open in your browser window at that moment, and returns a report about it.
Now that's not to say some of the audit results won't be helpful across your whole website, as many elements are often common to many or all pages, so when you know what to fix/change on one you can role it out to all. Though often depending on your code a fix may only need doing in one place, for example a font colour with low contrast - may only be a change to one variable within your CSS stylesheet, but this will effect change across every page it is used on.
Running Lighthouse
To start an audit we need to open the browser DevTools which we can do in a few ways:
- Browser Settings - if you click the settings ... icon in the top right corner of your browser window, then from the dropdown options select > More Tools then > Developer Tools
- Inspect - a quick way to open the tools or to directly choose an item you want to inspect - right click on the the item or generally on the page, then from the pop up box options select Inspect
- F12 Key - Press the F12 key, then in the pop up box select Open DevTools button.
- Keyboard shortcut - Press Ctrl + Shift + C (Windows, Linux) or Command + Option + C (macOS).
Then in the menu bar along the top of the DevTools select the lighthouse tab
To run a Lighthouse audit on your website page you can choose to emulate a Mobile or Desktop device by selecting either mode, then start the audit by clicking on the blue Analyze page load button.
Key audit areas
Lighthouse will then run audits on your webpage in four key categories:
- Performance This will analyse how fast your page loads. A range of factors are taken into consideration to produce the performance score.
- Accessibility Analyses how well all users can access your website, from colour depth issues to those utilising screen assisted software.
- Best Practice Audits of best practices applied in the development of a websites page, such as security, UX (User Experience) and deprecated technologies.
- SEO Ensures that your page is following basic search engine optimization advice.
When running an audit you can choose which of these categories you want to test, or select them all.
Audit scores
It then gives you a score for each category tested, and to help you quickly interpret your score it uses a traffic light colour coded system too.
- 90 - 100 Good
- 50 - 89 Needs Improvement
- 0 - 49 Poor
Lighthouse uses key metrics to assess each category of your webpage to help it create these scores and give you actionable recommendations for improving your site's speed and user experience.
Next PageLearn what your results mean »
Further Resources
JasmineWS - Use lighthouse to performance and Accessibility test sprout of wisdom tip.
Google's Chrome for Developers documentation - Introduction to Lighthouse.