Before gathering performance metrics for a site audit, there are several checks you can do to identify easy fixes and areas for focus.
Validity check: architecture and code #
Wherever possible fix simple bugs and remove unneeded assets and code before measuring performance — but make sure to keep a before-and-after record of problems and fixes. These improvements can still be a part of your audit work.
Site architecture and assets
Can anything easily be removed from the code repo and from the site, such as unused legacy pages, content or other assets? Check for orphaned pages, redundant templates, unused images and unused code and libraries.
Check for errors reported in the browser console. There shouldn't be any :).
Test with a variety of devices and contexts #
Nothing beats getting real people to test your site with real devices, multiple browsers and different connectivity contexts.
Some of these checks are relatively subjective, but they can identify problems that affect perceived performance. Broken links, for example, waste time and feel 'unresponsive'. Illegible text is slow to read.
Try different viewport and window sizes. Use at least one mobile and one desktop device. If possible, try your site on a low-spec mobile device with a small screen. Is the text readable? Are any images broken? Can you zoom? Are touch targets large enough? Is it slow? Are any features unresponsive? Screenshot or video the results.
What platforms do you target? You need to test on the browsers and operating systems your users use now and in the future.
Make sure to try out your site on the same devices as your users. The following photo shows the same page on two different phones.
On the larger screen, text is small but readable. On the smaller screen the browser renders the layout correctly, but the text is unreadable, even when zoomed in. The display is blurry and has a 'color cast' — white doesn't look white — making content less legible.
Simple findings such as this can be far more important than obscure performance data!
Try out UI and UX #
Accessibility, usability and readability
To ensure that your site's content and functionality are accessible to everyone, you need to understand the diversity of your users. Lighthouse and other tools test for specific accessibility problems, but nothing beats real-world testing. Try reading, navigating and entering data in a variety of scenarios: for example, outdoors in sunlight or on a train. Ask a range of friends, family and colleagues to try out your site. Try consuming content via a screen reader such as VoiceOver on Mac or NVDA on Windows.
Keep a record of your accessibility audit. Chances are that you'll be able to make simple improvements that are good for all your users.
Fundamental UI and UX problems
Interactions that don't work how they should, overflowing elements on smaller windows and viewports, too-small tap targets, unreadable content, janky scrolling… Open multiple pages on the site, try out navigation and all core functionality. Keep a record.
Images, audio and video
Test for overflowing content, incorrect aspect ratio, poor cropping, and quality problems.
Subjective UI tests
These may not all be relevant, but simple changes can make refactoring easier:
- Is 'What can I do here? immediately clear when you open the site?
- Are you drawn to consume content and follow links?
- Are there visual hierarchies or pathways — or does everything have the same visual weight?
- Is the layout cluttered?
- Are there too many fonts?
- Are there images or other content that could be removed?
- Content design is as important as interface design. Is the text and image content on your site appropriate for mobile and desktop contexts? Can anything be eliminated? Write for mobile.