Sanity 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.

Runtime errors Check for errors reported in the browser console. There shouldn't be any :).

Linting Are there errors in your HTML, CSS or JavaScript code? Building linting into your
workflow can help maintain code quality and avoid regressions. We recommend
HTMLHint, StyleLint and
ESLint, which can be used as code editor plugins, or run from
the command line within workflow processes and continuous integration tools such as
Travis.

Broken links and images There are many tools to test for broken links at build time and
runtime, including Chrome Extensions
(this one
is good) and Node tools such as
Broken Link Checker.

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.

Cross-device testing 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.

Cross-platform testing What platforms do you target? You need to test on the browsers and
operating systems your users use now and in the future.

Devices 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.