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.
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.
Plugins
Plugins such as Flash and Silverlight can be a security risk, support for them
has been deprecated,
and they don't work on mobile. Use Lighthouse to check for
plugins.
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.
Connectivity
Test on multiple target
network types: connected, wifi and
cellular. You can use browser tools to emulate a variety of network
conditions.
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.
You can find out more about implementing and reviewing accessibility in the Udacity course on Accessibility and the Web Fundamentals article How To Do an Accessibility Review.
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.