RAY MORTIMER

UK Web Developer

Optimise Your Website Performance and Rank Higher

Google's Free Tool Can Help You

So, you've just completed your new website (or a client's) and you're about to go live. Are you sure the performance is as good as it could be and you've followed best practices?

Site speed and overall performance is an important ranking factor according to Google.

Luckily, it is now possible to check your website performance and other metrics as Google sees them, right from within the Chrome browser.

Use the Lighthouse tool (found within developer tools) to run an audit which checks webpage Performance, Accessibility, Technical Best Practices and SEO and scores each out of 100.

Lighthouse is within the Chrome Developer Tools

You all know about alt-text for images, properly sized images, descriptive and keyword optimised tags etc. but there's a whole range of other issues you might be failing on without even knowing it.

Here are some of my top tips for ensuring you pass these audits with flying colours!

AUDIT: Performance

Unlike the other categories here, the performance audit can be affected by network conditions so you may get wildly different figures. You could try running the audit 3 times and then taking an average. The important thing is to look at any issues reported with a red triangle.

Here are 3 of the most important areas to look at and fix issues with:

1. RENDER BLOCKING
This means the HTML rendering was interrupted by having to load CSS and Javascript files when it encountered them on the page. One solution is to preload CSS files that are blocking and defer loading of javascripts:

<link rel="preload" href="/css/stylesheet.css" as="style">
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" media="all">

Note that this preload statement is in addition to the actual CSS link and should be placed high up in the HEAD section. Don't preload everything - check which ones Lighthouse is complaining about.

<script defer src="/js/main.js">>/script>

You could also consider inlining above-the-fold CSS and JS if preloading causes styling issues on load. Ensure that all CSS and JS files referenced on the page are actually required.

2. LARGEST CONTETFUL PAINT (LCP)
This is the largest image or text block visible in the viewport. SVG's are not counted (unless they contain a bitmap image). For videos, the first frame of the video is counted or the poster image if there is one. The LCP element is shown in the diagnostics panel.

If it is text, you could try and preload the font used in your head statement as per CSS stylesheets, although the syntax for fonts is slightly different:

<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin />

2. CUMULATIVE LAYOUT SHIFT (CLS)
Shows how much the position of elements moved around as the page was loaded. Some tips to minimise this:

AUDIT: Accessibility

You want to aim to pass the AA level WCAG standard which is the mid level and ensures that the page can be successfully used by people with disabilities, whether directly or using assistive technology such as screen readers. Two of the big accessibility issues that Lighthouse can flag up:

1. COLOURS
Ensure a sufficient contrast ratio on elements eg. light grey text against a white background is not very clear for users with visual impairments.

You'd be surprised at what fails - white text on an orange background can fail despite looking quite vibrant to you. Use a contrast checking tool such as this one to check colours that fail this audit. Note that text size also makes a difference.

2. ARIA ATTRIBUTES
Sometimes you might have an image that is a link, where the image is a background image such as for a logo. With no text available screen readers are stuck. Use the attribute aria-label="description" on the A element to tell screen readers what the element is.

Similarly, for images that are purely decorative you can hide them from screen readers by adding the attribute aria-hidden="true". This will enable you to keep the alt text attribute but tell screen readers not to read it, helping to streamline the experience for those users.

AUDIT: Best Practices

If you are not using any exotic code or funky stuff, you should score quite highly on this one by default.

AUDIT: SEO

Any failed audits will be shown here and are the descriptions are fairly self-explanatory making them easy to fix.

Other

Here are some more tips from my own checklist that I run on every site I develop. This can give additional performance boosts, reduce errors and help you score even higher in the above audits.

BROWSER CACHING*
Browsers effectively guess what type of caching behaviour makes the most sense for a given type of content. Configure your website response headers to reduce this guesswork and give more flexibility over cache timescales. Configure HTTP Cache

GZIP COMPRESSION*
Your server can compress text data such as HTML and Javascript (images are already compressed) to reduce load times - all modern browsers can recognise GZIP compressed data. Enable GZIP compression

*This is for Apache Servers, the most common type. If your hosting provider is using Litespeed this won't work but Litespeed has it's own caching system anyway.

You can quickly check your server type in Chrome developer tools: go to the network tab, reload the page, select an element that is hosted on your server and check the "server type" parameter in the Response Headers panel. You can also check the compression type - it's labelled as Content-Encoding.

SEO is a competitive environment especially for new brands and smaller companies so if you can be that much better than your rivals then that could give you the edge in the search engine rankings.