Battling the bloat

Website performance is important again.

It got forgotten for a while, as broadband became the main way people accessed the internet it was increasingly assumed that nearly everyone was on a "fast" connection.

I've been guilty of thinking this way – it's easy to do. Assuming everyone has a fast connection relieves you of the task of optimising a website, it means that instead of saying no to adding feature X to the website because it will make it slower you can say "sure thing!".

But not everyone has a fast connection. And not everyone is using high power devices.

Making sure your site has minimal bloat and loads as fast as possible for all your users is more important now than it's ever been. Assuming that everyone has a fast connection, or is willing to wait to see your content could be costing you money.

“Fashion retailer Missguided removed BazaarVoice for Android visitors. Median page load time improved by 4 seconds, and revenue increased by 26%” – WPOStats

I'm sure most people can relate with the often frustrating experience of trying to browse the internet while travelling. Whether you're on the train to work or you're in the middle of nowhere trying to find where your hotel is but the website won't load.

“BBC has seen that they lose an additional 10% of users for every additional second it takes for their site to load” – WPOStats

Users don't like to wait – so don't make them.

Bloaty Mcbloatface

Overweight websites rarely happen on purpose. Sometimes the process start with the best intentions, only to be overloaded with as things progress – with no-one willing or able to say "no, I don't advise doing this".

Tracking scripts get added, often more than one. Carousels grow from a reasonable number of images to 10 slide monsters, with each image being much bigger than it needs to be.

Before long your pageviews and conversions start to dip and you can't work out why. You're doing marketing campaigns and launching new products but sales are down. In frustration you grab your phone and try to load your website on the train home…

Loading

Connection Error

Damn. You've entered a tunnel. Frustration! Back out in the open you try again and eventually the homepage loads.

You click on the menu and the your screen goes blank as the next page loads. And loads… Still loading…

You realise that if you are getting this wound up trying to access the website and finally giving up then other people might be too. And they are.

“53% of visits to mobile sites are abandoned after 3 seconds according to research from Google's DoubleClick.” – WPOStats

But what if, realistically, you don't think your users will be visiting your website while they're on the train? You don't need to worry too much about performance right? Wrong.

What about users with metered internet connections, as many people around the world are? Or what about your users who travel abroad and have limited mobile data on their travel SIM? Or users at the very end of the telephone line, barely eeking out 1Mbps from their connection.

By not optimising your website you are costing your users money that they needn't spend. The website whatdoesmysitecost.com gives an example of how much your website costs people to visit. The more your site "weighs" the more each visit costs your users, which can add up across the course of a month browsing the web.

Not only can this weight cost your users but it can also impact how much you pay for hosting. Heavy, bloated sites use more bandwidth and need more powerful resources to run. For all but the highest traffic sites this difference in resources will be minimal, but it is still worth thinking about.

How did we get here?

Data from the HTTP Archive, shows that average page weight has been increasing since they started collecting data.

As of May 2019 they report the average page weight as 1.9MB when viewed on a desktop device. And 1.7MB when viewed on a mobile device.

To me, these averages seem low and looking at their data you can see that the the maximum page weight they list is around 3.5MB. There are some limitations to the sample sites they are using but as a very quick example, I've seen plenty of sites break the 20MB barrier and I've been horrified to find sites that go above 30MB per page!

As more people got broadband access and the web evolved it started to put on weight, as more websites started doing more. As people added high resolution images, and fancy 'widgets' like image sliders and interactive elements. Advertising boomed and plenty of sites started adding scripts from their advertising partner. Invariably these scripts were also bloated, compounding the problem.

Put your website on a diet

There are a few things that can be done to slim down and speed up a website. Ranging from quick and easy to convoluted and probably not worth the effort. We'll talk about some of the key diet tips here.

See the big picture (and make it smaller)

Usually the biggest, quickest weight saving can be made by compressing your images. Either by adding a plugin to your CMS if to do it automatically, or by optimising them locally and re-uploading.

Image editing software, like Photoshop and its alternatives are great for resizing images and will go a long way to reducing the file size. You can get even further with a tool like ImageOptim, which is Mac only and my preferred tool. Or just search for image optimisation and you'll find something that works for you (Squoosh seems pretty good).

Compression example, showing the difference in file size for an almost visually identical image
Compression example, showing the difference in file size for an almost visually identical image

Cut down on servings

A website is made up of many different resources. At the very least you'll have a HTML file for the main content, a CSS file that controls how to style the content and then all your image files.

Your images are probably the biggest offenders on an individual scale. But JavaScript files that provide interactivity and dynamic elements on pages are often the second biggest cause of weight gain. By reviewing all the scripts your page requests you can cut down on weight and the number of requests. The more JavaScript files a page has the longer the browser has to spend downloading and parsing them. The same goes for fonts and extra CSS (style) files.

If you're not familiar with opening up and understanding browser devtools, this might be a job for someone who knows what they're looking at.

Compress things with Gzip

Another very quick win, but one that requires a little more technical knowledge is to enable Gzip. This is a feature web servers provide which compresses text files on-the-fly, as they are requested by the browser.

This is often enabled by default, so you may not be able to make any performance gains. But it's worth checking because you could shave a large amount off the text files (HTML, CSS and JS) that make up a website.

Summary

Fast websites benefit everyone, while slow websites annoy users and lose companies money.

If your website is slow, it doesn't need to be – and shouldn't be. Perhaps you noticed, or didn't notice, how fast this website is (unless something has gone very wrong). This page comes in at under 1MB and normally loads in under a second.

This isn't by accident – we've made concious decisions to prioritise performance. We've used the methods in this post and more to ensure our site loads as quickly as possible for every user – including us. We don't like waiting either.

If you think your site could do with a diet but need some help, get in touch.

Share this: