A Free Speed Audit Built Into Chrome

An audit already on your computer

Since Chrome's update at the end of July, the browser has carried a full page audit inside its developer tools. It is free, and anyone with an up-to-date Chrome on a computer already has it.

The audit is Lighthouse, a tool Google built for web developers. In Chrome 60 it sits under a tab called Audits.

It loads a page the way a phone on a slow mobile connection would, scores it out of 100 in four areas, and lists what to fix.

It is a developer's tool, but the first screen of results is readable by anyone.

Running it

Open the page you want to test in Chrome on a computer. Right-click anywhere on it and choose Inspect, or press F12 on Windows.

In the panel that opens, find the Audits tab. If the panel is narrow, it may be hidden behind a double arrow.

Choose to perform an audit, leave the categories ticked, and run it. The page reloads while the audit works, which takes about a minute.

Close other tabs first and run it twice. Results vary between runs, so read the pattern rather than one number.

What the four scores cover

• Performance: how quickly the page shows something useful and responds to a tap.
• Accessibility: missing labels, faint text, images without descriptions.
• Best practices: HTTPS, outdated code and other signs of age.
• Progressive web app: features that let a site behave like an installed app.

The last is the one most small business sites can set aside. It measures features built for app-like sites, and a low score there says little about whether your site does its job.

Reading the performance section

Start with the timings. First meaningful paint marks the moment the main content appears. Time to interactive marks when the page will respond properly to a tap.

Below them is a list of opportunities: images larger than they are shown, images far down the page loaded at the start, and files that hold up the first paint. Each one opens to show the files it found.

Read the top three. On most small business sites they concern images and scripts added by plugins, and fixing them is routine work for whoever maintains the site.

Skip the jargon. The file names alone say a lot: a five-megabyte photograph, a slider script, a font loaded in eight weights.

Reading the accessibility section

The accessibility audit checks what a program can check: images without alternative text, form fields without labels, text too faint against its background, buttons with no name.

A perfect score does not mean the site is accessible. Much of what matters, such as whether the descriptions are any good, cannot be tested automatically.

A low score does mean visitors will meet problems, and the list says where.

Pale grey text on a white background is a frequent finding, and one of the cheapest to fix.

A worked example

A professional organiser who helps families declutter, plan moves and set up home offices had a site built two years ago on a popular theme.

She ran the audit on her home page and on her downsizing page, the service most enquiries were about.

Performance was poor on both. The top suggestions pointed at before-and-after photos uploaded straight from a camera at full size, and a slider script on the home page.

The accessibility list flagged pale grey body text, social media icons with no names, and a contact form whose fields had no labels.

She fixed none of it herself. She took screenshots of each score and the top suggestions for both pages, and sent them to her web developer with the page addresses and the date.

The developer resized the photos, removed the slider and fixed the contrast and labels. A second run showed the change.

Which pages to test

Start with the home page and one service page: the one behind most of your enquiries.

Then the contact page, where map embeds and form scripts tend to collect.

Add the pages people actually land on from search and ads, which Analytics lists as landing pages. They are often not the home page.

One page from each layout is enough. If one blog post is heavy, the rest probably are too.

Passing it on

The report is written for developers. Send it to whoever maintains the site rather than working through it yourself.

Include the page address, the date, and screenshots of the scores and the top suggestions. A note on which pages matter most to the business helps them decide where to start.

Ask for the fixes that make the biggest difference for the least work, and for a second run afterwards so you can compare.

Keep the screenshots. The same audit in three months shows whether the site is quietly getting heavier again.

What the audit does not see

It tests one page, once, on one simulated phone. Real visitors on real phones and connections get something different, sometimes better and sometimes worse.

It cannot judge whether the page says the right thing, whether the phone number is easy to find, or whether anyone answers the form.

And a perfect score is not the goal. A useful page that loads in reasonable time beats a bare page that scores 100.

The counter-case

A site about to be replaced does not need a list of fixes. Run the audit anyway, and hand the results to whoever builds the new site as a starting point to beat.

A very small site with a few light pages may already score well, and chasing the last few points is rarely worth the cost.

The scores can also alarm owners for no reason; a low progressive web app score is normal for a business site.

For most sites: run it on two pages, read the top suggestions, and send the report to the person who can act on it.

The first run

1. Update Chrome on your computer.
2. Run the audit on your home page.
3. Run it again on your main service page.
4. Screenshot the scores and top suggestions.
5. Send them to whoever maintains the site.
6. Ask which fixes should come first.
7. Repeat the audit after the changes.

Step five is where the value is. The report is written for the person who can act on it, and a list of fixes nobody receives fixes nothing.

One of the heavier items an audit tends to find is the subject of map embeds that slow the contact page.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.