Web Obesity

Beautiful websites come in all sizes and shapes. I personally love a carefully crafted website emitting simplicity and containing smooth animations guiding me towards what I’m looking for.

This post is about the bloated text-based pages around these days.

How bad is it?

When opening a twitter post on my phone’s browser recently, I noticed the page loading slow. Upon inspecting the same page on my main machine, it showed the page had loaded 8.2 MB of resources with my adblocker enabled.

Now considering my mobile data plan has unlimited data but only a speed of 4 mbit/s, this results in a loading time of 16 seconds, not even considering the time my poor phone spend parsing all the scripts and ads.

This all to load a post of 280 characters.

Now consider telling someone from 10 years ago that pages over 8 MB are a common thing these days. I certainly wouldn’t believe it.

The current container image of alpine linux is just over 2.5 MB. That is an operating system more than 3 times smaller than that page. This begs the question: What could justify a post of 280 characters to load 3 operating systems worth of extras?

Why should we care?

Let’s imagine your phone’s data plan doesn’t have unlimited unmetered data like mine does. Your connection may be faster but you’re literally paying your provider for transferring all that data over the air.

Even if your wallet or your time aren’t an issue to you, your devices are spending time and energy processing that data. Extra energy usage means your battery will drain faster, requiring you to charge your phone in the middle of the day if you still want to be able to receive a call about that important job interview.

Now if you’re the site owner, these problems will not affect you. What will, is people leaving your site because it loads too slow (if at all). Even if it does load, they might still leave because of the 40+ ads they have to wade through to get to what they were looking for. Luckally, most of these users will never return, saving the world the resources your site is trying to consume.

While we’re on the topic of the world’s resources, all the energy consumed by this inefficiency needs to come from somewhere. In most countries, electricity is still generated using coal. If all electronic equipment uses “just” 50% more energy because bloat in websites (and other software for that matter), the environmental impact of this bloat is massive.

Feeble attempts at fixes

Pretty much everyone building sites admits there’s a problem. In some companies, there are even people who’s job it is to speed up loading of websites.

The first thing most developers start doing is enabling compression on connections and minifying resources. While this may reduce network usage, the processing time actually increases (due to the compression) and the core of the problem remains: There’s simply too much stuff.

Some developers moved to creating statically-hosted single-page websites. While this may actually remove latency and consumption from the server-side, most of these actually require more processing time on the client’s side due to dynamically loading everything from content to advertisements. This type of site may “load” sub-second but then the actual content and advertisements still need to load and be shown, taking up more-and-more processing on the client’s device.

Deferring (or asynchronous loading) of scripts is sometimes applied as a fix. This won’t reduce the amount of data going over the wire, it would just result in resources being loaded over multiple connections for more overhead on the wire and now you’re not sure if the javascript libraries you’re using are actually loaded once your script starts.

What can we do?

The most impactful action would be to not load what you don’t need. If you’re loading the whole jQuery package just to wait for all resources to be loaded, convert all scripts to load synchronously and move your script to the end. Don’t include anything you don’t need: A page showing a 280-character post does not require hundreds of kilobytes of code for animations you’re never going to use.

Remove all images that aren’t contributing to the content. Convert all images to vector graphics where possible, removing the need for super-high-resolution renderings of whatever you’re trying to show.

Do not load everything dynamically through javascript. You can replace your javascript router by simply hosting multiple pages and re-using resources like styling. Pre-render your html where possible, so neither the server nor the client has to on every page-load.

Keep it simple. Don’t just make it look minimalistic but actually keep everything simple. Consider if that fancy framework you’re using is really necessary.

Where to go from here?

Computers and phones today are insanely fast. All of this power is poured into more and more things we don’t need.

Let’s work together on not spending time and effort on things we don’t need and just waste resources.