The web is bloated

Michael Gearon

Last updated on April 18, 2020

First published on LinkedIn – June 25, 2017

One of the greatest frustrations with websites is speed. Websites are slow and bloated, so as a consequence, users deal with a poor experience leaving them irritated but having to make do or move on.

To give you an indication of how bad things are, lets take a look through the years at how bloated everything has become:

March 2011 – Average size 735kB

March 2012 – Average size 1008kB

March 2013 – Average size 1335kB

March 2014 – Average size 1728kB

March 2015 – Average size 1958kB

March 2016 – Average size 2330kB

March 2017 – Average size 2569kB

Statistics are from the HTTP Archive if you want to learn more.

In less than 7 years the average web page has increased around 1.8MB in size. What we can see is that images are the main contributing factor to the increase in the average size. This make sense as more websites are using large hero images, more icons, high resolution gallery images and retina images. However, this doesn’t excuse us. We now have new compression algorithms like Google Guetzli that can compress JPEG images up to 30% of the original size with no loss in quality. We can also look towards replacing image based icon sets for inline SVG options, or lazy loading images – delivering the images only when the user needs them.

Another factor of the increase in page weight is fonts. In 2011 the average font size on a page was 3kB but it is now around 96kB, as websites become more sophisticated and design focused, there is a push to use custom fonts. In this area alone there are plenty of techniques and simple fixes to quickly reduce the size of the typefaces being delivered to the user. If you want to learn more about improving font loading then check out this video by Zach Leatherman and Chris Coyier.

A recent addition to larger web page sizes is video content. Before 2016 video wasn’t large enough to have it’s own slice of the pie, but now it contributes 203kB to overall page weight. I can see this trend continuing over the next couple of years as more people shift towards using video content.

What we can learn overall from the above statistics is that designers are moving more towards richer content which contains more visuals, interactive content involving scripts, custom fonts and more styling. All this is great, but as a consequence we could be ruining the user experience. We should not stop producing rich content, but instead optimise the delivery, use existing tools and methods which is available right now with good documentation.

What is the cost of having a bloated website?
What sums this up for me is the below image by Luke Wroblewski, product director at Google:

It might be hard to believe but, according to the Ericsson ConsumerLab, their research indicated that the level of stress caused by mobile delays could be compared to watching a horror movie or solving a maths problem.

Here are some key facts from Kissmetrics Blog:

73% of mobile internet users say that they’ve encountered a website that was too slow to load.
51% say that they’ve encountered a website that crashed, froze, or received an error.
38% say that they’ve encountered a website that wasn’t available.
47% of consumers expect a web page to load in 2 seconds or less.
40% of people abandon a website that takes more than 3 seconds to load.
A 1 second delay in page response can result in a 7% reduction in conversions.
If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

The key takeaway is that today’s ‘standards’ are no longer good enough. We can push the boundaries of web design and development whilst creating a fast, responsive website. We shouldn’t sacrifice performance for creating a beautiful website. Besides, if a person cannot load your website they will never see it anyway!

Get started today and see how your website performs with PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

Written by