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.
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:
- Always set width and height dimensions for images, ads and iframes so the browser knows how much space to reserve for them even if they haven't yet loaded (and even if they are lazy loaded). For images, it's just the aspect ratio that is important so you could also use the
aspect-ratio
CSS property (not supported by Safari before Sept 2021 and pre-IOS 15) - When animating use transforms (not left, top etc) as this does not trigger layout shift
- Web fonts: when using web fonts you can either show a fallback system font while the new font loads, or hide text until the new fonts load. Both can cause layout shifts. Minimise layout shift by:
- Preloading the font used by the text as per LCP above
- Always specifying a suitable "web-safe font" (closest match visually) when using web fonts eg.
H1 {font-family: "Open Sans", sans-serif; }
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.
- Set browser cache parameters and use gzip transfer in .htaccess (see below)
- Check your code on W3C to ensure it is standard compliant
- Use the WAVE tool for a detailed accessibilty audit
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.