Top five web performance mistakes

What makes websites slow?

We spend a lot of time helping organisations find the performance bottlenecks on their websites. And often, it’s the simple things. They’re not always quick and easy to fix, but most are avoidable. We thought we’d share some of the most common issues we come across, along with some straightforward advice to help you steer clear of them.

1 Not optimising for mobile visitors

mob-webinarWe recently held a webinar with Schuh and Internet Retailing, which was all about delivering a fast online experience for mobile visitors. If you missed it, you can catch up here.

Websites are typically designed and developed on desktop first, even if that’s not the primary way in which they’ll be consumed.
The result can be that the mobile experience is just a poor reflection of the desktop one. This can even apply to responsive sites, when too often the question is ‘how can this design be made to work on smaller viewports?’

The solution is, on the face of it, simple: start the design process with a range of viewports and devices in mind. This doesn’t necessarily mean mobile first (which arguably carries the same risks as designing for desktop first), but it does mean addressing the mobile experience from the outset.

2 Unoptimised images

In our experience, this is probably the most common web performance mistake of all. And in theory (if, perhaps, not in practice) it should be among the easiest to remedy. Images are, by their very nature, big files, and they tend to be the biggest single contributor to page weight. So optimising images often offers an excellent opportunity to cut page load times.

Why are images so often poorly optimised?

One answer is that the people uploading imagery don’t always appreciate the impact on performance. Maybe they’re focused on getting the right content on the site, and they’re just not thinking about how fast it loads. This is partly a reflection on how far (or how little) web performance is embedded in the organisation’s culture, but it’s also something that could in most cases be solved by deploying an automated image optimisation solution, either as part of the CMS or via a CDN provider. Failing that, there are a number of free online image optimisation tools and ways to remove unwanted metadata (textual content that’s loaded along with the image itself and is often redundant). Alternatively, it may be possible to reduce image content by using CSS animations instead of animated GIFs.

3 Too much reliance on scripts

blockingjs2Every piece of JavaScript that’s used on a web page has to be loaded, parsed and executed on the visitor’s device. And that takes time, especially on low-end mobile devices. Sometimes, scripts are used for convenience, for example, so that developers can implement certain features without worrying about browser compatibility. They’re also used for testing or to deliver dynamic content. When sites use scripts for several of these purposes, the cumulative effect can be crippling for the user experience.

One way to minimise the impact of scripts on performance is to adopt the principle of progressive enhancement – build a site that works, as far as possible, without JavaScript, and use scripts only for those things that can’t be achieved any other way.

It’s also important to keep track of how much JavaScript you’re using and what it’s doing. Anything that affects the layout of the page, for example, is likely to have a particularly detrimental impact on performance.

4 Not prioritising important content

When someone visits one of your web pages, what are they looking for? What are they expecting to see? What do you most want them to see?

A lot of retail sites use hero images for offers on the home page, but these are sometimes among the last objects to load and display. Similarly, late-loading custom fonts can mean that while visitors may get to see something like a complete page relatively quickly, they have to wait much longer for something they can actually use.

There are broadly two approaches that can help you put important content first. One is to try to get that content to load earlier, for example by preloading fonts or using image elements rather than CSS background images for hero images. The other is to load less important content later – for example, by lazy-loading below-the-fold images or deferring non-essential JavaScript.

5 Not removing redundant content

How much of the content on any given web page is unused? Websites tend to accumulate a lot of redundant content over time. New styles and features are added, and all too often the old code gets left behind, unused and forgotten, but still holding back performance. Most websites are also template driven, with site-wide styles and scripts loaded on every page, even if most need only a fraction of what’s loaded.

There are two excellent ways to keep the impact of redundant content to a minimum. One is to make sure you carry out regular code audits. For example, use a tool such as UNCSS (https://github.com/giakki/uncss) to identify and remove unused styles.

The other is to adopt different templates for different kinds of page. For example, the home page and other key landing pages (in fact, any common entry points for the site) might benefit from a lighter, dedicated template that includes only the scripts and styles needed for that page. Content for other pages can then be prefetched as necessary (so visitors will have it cached when they continue their journey through the site).

Summing up…

This is just a brief tour of some of the issues we see time and again. It’s by no means comprehensive, but it’s probably fair to say that all of the above crop up in just about every piece of performance advisory work we do. And if every site owner addressed each of these five points, the web would be a much faster place.

Finally, if you’d like to share your own experiences or are struggling with any of the above, please don’t hesitate to get in touch!

Leave a Reply

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