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
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
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.
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).
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!