Five simple steps to make your website faster

In our recent webinar on the real-world impact of site speed on conversion, Andy Davies and Simon Hearne showed us that delivering a faster, more effective website doesn’t have to mean starting from scratch. They homed in on a few web performance tips that can deliver some of the biggest improvements with the least effort. Here’s what they came up with:

1) Preload fonts

Custom fonts are incredibly popular, especially for retailers, where brand identity is so important. The trouble is that late-loading fonts can be a problem. Depending on the browser, they either delay the point at which text becomes visible or deliver a ‘flash of unstyled text’ (FOUT).

Fonts tend to load late for two reasons:

  • they’re normally referenced inside CSS files, which have to load first
  • the browser won’t load a font until it discovers an element on the page that uses it.

By preloading a font, you can short-circuit these steps and get it to load much earlier. Preloading involves telling the browser that a web page is going to need a resource. The browser can then start loading that resource before it would otherwise discover it.

Fortunately, preloading a font is easy – all it takes is a line of HTML.

<link rel=”preload” href=”example.com/font.woff” as=”font” crossorigin>

One caveat to be aware of is the opportunity cost – loading a font earlier means something else is likely to load later.

fonts1

The second of these two filmstrips shows how much preloading fonts can improve the user experience.

2) Optimise images

It’s still not uncommon to find big, poorly optimised images slowing down web pages. This is often due to:

  • images saved in the wrong format (e.g. a PNG for a photo)
  • JPEGs saved at an unnecessarily high quality setting
  • image files containing wasted bytes of redundant metadata.

Mobile browsing and the rise of responsive design have also given rise to another problem – delivering the right sized image for the device. Sending oversized images and then scaling them down to fit mobile viewports doesn’t just mean downloading unnecessarily large files. It’s also hard work for the device in terms of CPU and memory consumption – this can be particularly taxing for lower spec smartphones (Simon recently devised a Chrome extension to identify scaled down images on a web page).

One way around the issue has been to use JavaScript to detect device characteristics and select the most appropriate image. However, while they’re better than nothing, these solutions come with their own performance cost. Ironically, that cost is again likely to be higher on mobile devices, which are slower to process JavaScript.

Instead, site owners should be looking to switch to the responsive image specification in HTML (or use CSS media queries for background images) to achieve the same result. Since the mark-up is far from straightforward, a quicker, simpler fix may be to automate the process with one of the many third-party image hosting solutions available.

imageopt1

Responsive image markup is far from straightforward

3) Reduce third-party JavaScript

Third-party scripts can have a massive impact on performance. This is especially true if they’re loaded synchronously, blocking the display of subsequent content. During the webinar, Simon showed how one retailer improved site speed after removing a third-party testing solution (read more about this example).

rumperftrendstest

That’s not to say that third-party services don’t add value. It’s just important to be aware of the costs. For example, some will bundle in a certain version of a script library, and it’s not unusual for sites to load several versions of the same library through different third parties.

4) Defer JavaScript

Staying on the theme of JavaScript, script execution can also be a big drag on performance. Again, this is something that tends to affect mobile users disproportionately, and the chart below shows relative processing times for a page tested on different devices.

jsproc1

JavaScript processing time for the same page loaded on different devices

Synchronous (blocking) JavaScript at the top of a web page is a problem because the loading and execution of that script will stall the display of subsequent content.

Asynchronous scripts loaded with the async attribute can also be a problem. Although asynchronous scripts don’t block page render while they load, they can interfere with the display of the page while they execute.

Deferring a script with the defer attribute means it will load asynchronously and that its execution will be delayed until just before the DOMContentLoaded event.

It’s therefore a good way to ensure that the loading and execution of a script doesn’t interfere with page construction and display.

5) Test on low-end smartphones

We’ve already touched on the fact that many web performance problems have a disproportionate impact on people with lower-end smartphones. And the sad truth is that site owners may well be oblivious to the issues.

Websites tend to be developed on and for desktop machines first. They may or may not be tested on mobile devices, but there are thousands of different models out there, and no one tests on all of them. It’s therefore important to understand how your website works on a less capable smartphone and a slow network.

Find out how your website performs on different mobile devices

Leave a Reply

Your email address will not be published. Required fields are marked *