Webwaste

The Web is obese

In 1994, there were 3,000 websites. In 2019, there were estimated to be 1.7 billion, almost one website for every three people on the planet. Not only has the number of websites exploded, the weight of each page has also skyrocketed. Between 2003 and 2019, the average webpage weight grew from about 100 KB to about 4 MB. The results?

“In our analysis of 5.2 million pages,” Brian Dean reported for Backlinko in October 2019, “the average time it takes to fully load a webpage is 10.3 seconds on desktop and 27.3 seconds on mobile.” In 2013, Radware calculated that the average load time for a webpage on mobile was 4.3 seconds. 

Study after study shows that people absolutely hate slow webpages. In 2018, Google research found that 53% of mobile site visitors left a page that took longer than three seconds to load. A 2015 study by Radware found that “a site that loads in 3 seconds experiences 22% fewer page views, a 50% higher bounce rate, and a 22% fewer conversions than a site that loads in 1 second, while a site that loads in 5 seconds experiences 35% fewer page views, a 105% higher bounce rate, and 38% fewer conversions.”

The causes of webpage bloat? Images and videos are mainly to blame. By 2022, it’s estimated that online videos will make up more than 82% of all consumer Internet traffic—15 times more than in 2017. However, as we’ll see throughout this chapter, from the code to the content, everything about Web design has become super-bloated and super-polluting. Consider that if a typical webpage that weighs 4 MB is downloaded 600,000 times, one tree will need to be planted in order to deal with the resulting pollution.

They say a picture paints a thousand words. Well, 1,000 words of text takes up roughly two A4 (210 mm wide and 297 mm long) pages and weighs about 6 KB. You’d place about four images that are 9 cm x 16 cm on two A4 pages. Let’s say these images are well optimized and weigh 40 KB each. (A poorly optimized image could weigh several megabytes.) Even with such high optimization, two A4 pages of images will weigh around 160 KB. That’s 27 times more than the two A4 pages of text. A 30-second video, on the other hand, could easily weigh 3 MB. Videos create massively more pollution than text. Text is the ultimate compression technique. It is by far the most environmentally friendly way to communicate. If you want to save the planet, use more text. Think about digital weight.

From an energy point of view, it’s not simply about page weight. Some pages may have very heavy processing demands once they are downloaded. Other pages, particularly those that are ad-driven, will download with lots of third-party websites hanging off them, either feeding them content, or else demanding to be fed data, often personal data on the site’s visitor. It’s like a type of Trojan Horse. You think you’re accessing one website or app, but then all these other third parties start accessing you. According to Trent Walton, the top 50 most visited websites had an average of 22 third-party websites hanging off them. The New York Times had 64, while Washington Post had 63. All these third-party websites create pollution and invade privacy. 

There is a tremendous amount of out-of-date content on websites. I have worked with hundreds of websites where we had to delete up to 90% of the pages in order to start seeing improvements. Poorly written, out-of-date code is also a major problem. By cleaning up its JavaScript code, Wikipedia estimated that they saved 4.3 terabytes a day of data bandwidth for their visitors. By saving those terabytes, we saved having to plant almost 700 trees to deal with the yearly pollution that would have been caused. 

If you want to help save the planet, reduce digital weight. Clean up your website. Before you add an image, make sure that it does something useful and it’s the most optimized image possible. Every time you add code, make sure it does something useful and it’s the leanest code possible. Always be on the lookout for waste images, waste code, waste content. Get into the habit of removing something every time you add something. 

Publishing is an addiction. Giving a website to an organization is like giving a pub to an alcoholic. You remember the saying, “There’s a book inside everyone”? Well, the Web let the book out. It’s happy days for a while as we all publish, publish, publish. Then…

“Hi, I’m Gerry. I have a 5,000-page website.”

“Hi, Gerry.”

“I used to have a 500-page website, but I had no self-control. It was one more page, one more page… What harm could one more page do?”

Redesign is rehab for websites. Every two to three years some manager either gets bored with the design or some other manager meets a customer who tells them about how horrible it is to find anything on the website. The design team rounds up a new bunch of fake images and fake content for the top-level pages, while carefully avoiding going near the heaving mess at the lower levels. After the launch, everyone is happy for a while (except the customers, of course) because in many organizations what is important is to be seen to be doing things and producing and launching things, rather than to do something useful. 

If you must do something, do something useful. That often means not doing, removing, minimizing, cleaning up.

Beware the tiny tasks. We’ve used the Top Tasks method to identify what matters and what doesn’t matter to people, whether they’re buying a car, choosing a university, looking after their health, buying some sort of technology product, or whatever. In any environment we’ve carried it out in—and we’ve done it more than 500 times—there are no more than 100 things that could potentially matter. 

In a health environment, these might include symptoms, treatment, prevention, costs, waiting times, etc. When buying a car they might include price, engine type, warranties, service costs, etc. We’ve carried out Top Tasks surveys in some 40 countries and 30 languages, with upwards of 400,000 people voting. In every single survey the same patterns emerge. Let’s say there are 100 potential tasks. People are asked to vote on the tasks that are most important to them. When the results come in, we will find that five of the tasks will get the first 25% of the vote. 50 tasks will get the final 25% of the vote. The top five tasks get as much of the vote as the bottom 50. It’s the same pattern in Norway, New Zealand, Israel, USA, Canada, UK, Brazil, wherever. 

The bottom 50 are what I call the tiny tasks. When a tiny task goes to sleep at night it dreams of being a top task. These tiny tasks—the true waste generators—are highly ambitious and enthusiastic. They will do everything they can to draw attention to themselves, and one of the best ways of doing that is to produce lots of content, design, code. 

Once we get the Top Tasks results, we sometimes analyze how much organizational effort is going into each task. Invariably, there is an inverse relationship between the importance of the task to the customer and the effort that the organization is making in relation to these tasks. The more important it is to the customer, the less is being done; the less important it is to the customer, the more is being done. 

Beware of focusing too much energy, time and resources on the tiny tasks. Reducing the tiny tasks is the number one way you can reduce the number of pages and features. Save the planet. Delete the tiny tasks.

Images

I was giving a talk at an international government digital conference once, and I asked people to send me examples of where digital government was working well. One suggestion was for a website in a language I don’t speak. When I visited it, I saw one of those typical big images that you see on so many websites. I thought to myself: I’m going to try and understand this website based on its images.

The big image was of a well-dressed, middle-aged woman walking down the street while talking on her phone. I put on my Sherlock Holmes hat. Hmm… Something to do with telecommunications, perhaps? Why would they choose a woman instead of a man, or a group of women and men? She’s married, I deduced by looking at the ring on her finger. What is that telling me? And what about her age? Why isn’t she younger or older? And why is she alone? Questions, questions, but I’m no Sherlock Holmes. I couldn’t figure out anything useful from this image. 

I scrolled down the page. Ah, three more images. The first one is a cartoon-like image of a family on vacation. Hmm… The next one is of two men and one woman in a room. One of them has reached their hand out and placed it on something, but I can’t see what that something is, because the other two have placed their hands on top of that hand. It’s a type of pledge or something, a secret society, perhaps? Two of them are smiling and the third is trying to smile. What could that mean? And then the final picture is of a middle-aged man staring into the camera, neither smiling nor unsmiling, with a somewhat kind, thoughtful look. What is happening?

I must admit that after examining all the visual evidence I had absolutely no clue what this government website was about. So, I translated it. It was about the employment conditions and legal status of government employees. Now, why didn’t I deduce that from the images? 

The Web is smothering us in useless images that create lots of pollution. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution and waste, as they cause page bloat, making it slower for pages to download, while pumping out wholly unnecessary pollution. They take up space on the page, forcing more useful content out of sight, making people scroll for no good reason.

Some time ago, I was looking for a pension consultant in Ireland. As I visited website after website, I noticed a pattern: a significant percentage of them were using images of the Samuel Beckett Bridge in Dublin’s docklands. This is indeed a beautiful bridge. However, none of the offices of the organizations that I was looking at were located beside the bridge, and in fact one of them was located 30 kilometers away. Why do organizations so consistently use fake images and content? Why do they feel they must lie to their customers? 

Lying does make sense if you’re selling a product like Coke. Fakery is absolutely essential for Coke because the more you learn about the actual ingredients of Coke and the more you understand how drinking Coke damages your health, the less likely you are to buy Coke. So, it is totally essential for Coke advertising not to draw attention to the product itself but rather wrap it up in cool fakery. 

However, if you’re looking for a pension consultant and they all have the same fake images and the same fake content, and you can’t find out about performance and fees and other important stuff, what impression do you get? Not a good one. Fake, wasteful content very often gets in the way. For every person who is fooled, there may be many more who are lost, who immediately leave the website thinking, “Never going to do business with this crowd of fakers.”

Interpublic is a very large global advertising agency. As with all advertising agencies they stress how “creative” they are, which means they love huge, meaningless, happy-clappy polluting images. When I tested their homepage, it emitted almost 8 grams of CO2 as it downloaded, putting Interpublic in the worst 10% of website polluters, according to the Website Carbon Calculator. (For comparison, the Google homepage emits 0.23 grams.) One single image on its homepage weighed 3.2 MB. This image could easily have been 10 times smaller, while losing nothing in visual appeal. The Interpublic website is like a filthy, rusty 25-year-old diesel truck, belching fumes as it trundles down the Web. 

Instead of optimizing images so that they’ll download faster, the opposite is often happening. TV manufacturers are now producing screens that have higher resolutions than the eye can process simply to sell gullible consumers more things they don’t need. (It’s essentially impossible for the eye to see the difference in the resolution of a 4K TV, for example.) It seems we can’t resist “more resolution” even though we will never actually see the “more.” 

High-resolution images are a major cost to the environment. If, for example, you move from a 4K resolution image to an 8K one, the file size doesn’t double, it trebles. For example, I saved an image at 4K and it was 6.9 MB. At 8K it was 18 MB. 

Digital “progress” and “innovation” often means an increasing stress on the environment. Everything is more. Everything is higher. Everything is faster. And everything is exponentially more demanding of the environment. Digital is greedy for energy and the more it grows the greedier it gets. We need digital innovation that reduces environmental stress, that reduces the digital footprint. We need digital designers who think about the weight of every design decision they make.

We must start by trying to use the option that damages the environment least, and that is text. Don’t assume that images are automatically more powerful than text. Sometimes, text does the job better.

  • In a test with an insurance company, it was found that a promotion for a retirement product was deemed less accurate when an image of a face was used than when text only was used.
  • Another insurance company tested a number of treatments for a promotion. The text-only treatment outperformed the image-based ones four to one.
  • Yet another insurance company tried two treatments of a page for getting a quote, one with an image, one without. The page without the image had a 166% higher conversion rate.
  • An initiative by the UK government to get people to sign up to become potential organ donors tested eight approaches. The approaches that used images were least effective. Text-only worked best.

“Hello?”

“Hello. Is that the Department of Useless Images?”

“Yes.”

“We have this contact form and we need a useless image for it.”

“How about a family cavorting in a field of spring flowers with butterflies dancing in the background?”

“Perfect.”

There are indeed many situations where images are genuinely useful, particularly when it comes to helping people better understand how a product works or looks. Airbnb, for example, found that its growth only began to accelerate after it invested in getting quality images of the rental properties on offer. 

If you need to use images, optimize them and consider using real ones of real people doing real things. 

  • A study by Marketing Experiments, in which a real photo of their client ran against one of their top-performing stock photos, found that there was a 35% higher conversion rate for the page with the real photo of the real person.
  • A hair salon tested professionally-shot images of actors getting their hair done. It also shot basic images using a smartphone of ordinary clients getting their hair done. The images of ordinary clients vastly outperformed the professional images.
  • A transport company used stock images and pictures of real drivers. The page with real drivers had a 38% improved conversion rate.

They say a picture paints a thousand words but sometimes it’s a thousand words of crap.

Video

Video growth is exploding. Cisco estimated that by 2019 almost 80% of Internet traffic was video.

Every time you see a video, imagine you see a little diesel truck belching fumes as it trundles across the Web, because that’s the impact videos have on the environment. A 30-second video can easily weigh 3 MB, so one second of video costs 300 KB. 1,000 words of text is about 6 KB. Therefore, one second of video has as much impact on the environment as 50,000 words of text, which is enough text for a pretty hefty book. Ten hours of high-definition film consumes more energy than all the English-language articles in Wikipedia put together, according to The Shift Project. 

WPP is one of the largest advertising agencies in the world. It describes itself as “a creative transformation company.” When we analyzed the website for WPP over various periods of time using Website Carbon Calculator, we found that it was consistently in the 10% of worst offenders for pollution. On the four occasions we measured it, it was emitting 5 g, 8 g, 19 g and 26 g of CO2 when we downloaded its homepage. On one occasion, just the video that was playing weighed 5.9 MB. On the Web, WPP is like one of those filthy container ships spewing out massive toxins as it churns through the cheapest low-grade diesel. 

By comparison, Google emitted 0.23 and 0.27 grams and GOV.UK emitted 0.06 g and 0.19 g when we tested them. GOV.UK estimates that it produces around 4,000 tons of CO2 per year. We’d need to plant a little over 400,000 trees to deal with that sort of pollution, which is relatively little when you consider the number of services GOV.UK offers. Let’s say we take an average pollution figure for WPP of 15 g. Using this average, WPP is emitting 115 times more pollution than GOV.UK. If WPP was running GOV.UK using its “creative” strategies, we’d need to plant almost 47 million trees to deal with its creativity. 

Don’t automatically assume that video is the best option. Over the years, we have watched hundreds of software engineers use technology websites to complete a wide range of tasks. Very rarely have they chosen video as their preferred option to solve a task, even when videos that would have helped them with the task were prominently displayed. They preferred text. When we explored why we discovered that text gave them more control and was faster. They could search and scroll more easily. They could get to specific pieces of information more quickly. Start with text, which is the most environmentally friendly option. Only use video when you know it makes a real difference.

Music

Like so much else, music has become so cheap it feels like it’s free, and this, as we know, is the road to more frivolous consumption habits. In 1977, a vinyl record cost $28 in 2019 money. In 2019, the equivalent digital download cost $11. And of course, so much music is “free” if you’re willing to pay by accepting pollution-generating, privacy-invading ads. 

Digital music is good for the environment, right? No more plastic, no more vinyl, no more packaging. In 1977, the music industry used 58 million kg of plastic in the US. By 2016, as a result of digital downloading and streaming, plastic consumption had dropped to eight million kg. 

However, a study by the University of Glasgow and the University of Oslo found that when the production of plastics and the generation of electricity were translated into greenhouse gas equivalents (GHGs), streaming generated very considerable amounts, which is not surprising when you consider that 3 MB would be typical for the file size of an average three-minute song. 

“While GHGs peaked at 157 million in 2000 under the physical era, the generation of GHGs by storing and streaming digital files is estimated to be between 200 million kilograms and over 350 million kilograms in the USA alone,” Scott Wilson wrote for FACT magazine. 

The more you listen to a particular song, the more damaging it is to stream it. Therefore, for the songs you love, it’s more environmentally friendly to have them on your local drive. The further what you consume has to travel, whether that is physically or digitally, the more energy is used, and the more waste is created. The closer something is to you, the less energy is consumed and the less waste is created. If you truly love it, download it. Pay for it.

JavaScript 

Energy is not simply consumed as a result of the weight of a page or file being transferred or stored. Once a page is downloaded to a smartphone or computer, there is processing to do before the page becomes usable. The computer programming language called JavaScript is used for much of this processing. 

Between 2011 and 2019, JavaScript file size grew by over 600%, from an average of 52 KB to 370 KB. 

1 KB of JavaScript creates far more pollution than 1 KB of text, because the JavaScript is setting in train a range of energy-intensive processes. Generally, JavaScript is compressed when it is transferred. (Once it arrives in the smartphone or computer, and it is uncompressed, that 370 KB can easily become more than 1 MB.) For the average smartphone used in 2019, processing 370 KB of JavaScript could take up to 12 seconds. For older, slower phones, heavy JavaScript loads are either excruciatingly slow or else they freeze the phone entirely. 

In digital, 12 seconds is an eternity. Think about it. A page with 370 KB JavaScript code may download in a flash but may not be usable for 12 seconds for millions of ordinary working people who make basic wages and have ordinary phones. Typical people, you know, trying to live a life and get by. 

Some designers and developers think that the bandwidth issue is a poor country issue and not something they really need to be concerned about. “Fifteen million Americans don’t have access to broadband internet,” The Register reported in 2019. “For those that do, the United States has close to the slowest speeds among advanced economies. And for that, Americans pay more than almost anyone else.” 

Even if bandwidth increases, JavaScript-heavy pages will severely stress older or less powerful phones. It’s like your phone gets hooked up to a fire hydrant whose pipes and force have been supercharged for 4G or 5G. You get flooded with stuff but that doesn’t mean it’s usable quickly.

Unfortunately, I have found that many digital designers and developers ignore ordinary people living on ordinary wages. Not because designers and developers are bad people. No. It’s because most digital professionals live in a high-tech, large-screen, high-resolution, unlimited, high-speed bandwidth bubble. Get some fresh air out in the real world. Get out of the bubble.

On many web pages, time spent executing JavaScript far exceeds the time spent by the browser in the rest of the loading process, so minimizing JavaScript size should be a major priority. 

CSS and HTML

CSS and HTML control the layout and presentation of content on a webpage. HTML is the original language of the Web that was used to lay out pages. It can easily become bloated and needs to be carefully maintained and minimized. In using CSS, it has become convenient to apply what are called “frameworks.” These are all-in-one packages that contain all the CSS you might need to use and much, much more. 

These frameworks might load about 100 KB of CSS. In the grand scheme of things, that’s not much. However, when it comes to the Web, not every KB has the same impact. CSS must be downloaded first. Without it, the page can’t be displayed. CSS thus has a critical impact on what people see and how quickly they see it. It’s probable that most sites don’t need any more than 10 KB of the 100 KB downloaded. Again, 90% waste. 

We keep lots of CSS for the same reason that we keep lots of content and all sorts of other stuff. We don’t know when in the future we might need it, or we don’t know what exactly it does. We have a double whammy here. We keep it because we want to future-proof ourselves. We keep it because we’re afraid to delete it. And what harm could it be doing?

The challenge of simplifying and removing the unnecessary CSS is highly complex. There are no easy-fix tools out there. “Since this problem is so hard, I think hard work is the answer to it,” Web developer Chris Coyier explains. “It’s understanding the problem and working toward a solution over time. A front-end developer that is intimately involved in your front end will have an understanding about what is used and unused in CSS-land after time and can whittle it down.” 

It’s that old hard work versus convenience problem. It’s about taking on some extra complexity, spending present time in order to save future time, save energy and save the environment.

Fonts

Fonts take up about 3% of data transferred while downloading an average webpage, so they are not a major contributor to energy consumption. Web browsers come with a range of standard fonts, but custom fonts allow you to choose exactly what font you want to use. 

The problem is that anyone using your website has to load that font, taking up time and creating pollution. Like so much else, custom font use has exploded in recent years, growing by around 850% between 2011 and 2018. Choose a standard font unless you have a compelling reason to use a custom one.

What can you take away today?

Every image, every sentence, every line of code creates pollution because it needs energy. To not create today is doing something good for the environment. To reuse is better than creating. To share something lean and useful that you have created means that someone else will not now need to create that thing, thus saving energy and reducing pollution. To delete removes something that is creating pollution, because to store and transmit creates pollution. 

Every day decide on at least one thing you won’t do, one thing you’ll reuse, one thing you’ll share, one thing you’ll remove. 

It’s not that difficult to create or to add something. To remove what needs to be removed, to see what is unnecessary, what is getting in the way, that is such an unappreciated and deep skill. Not just that, to remove requires bravery. The old logic goes: “This thing is here. It must be useful.” Once things are created and published, they gain a status, an invisible protective layer. On the Web, a page can gain complexity over time because it exists within a network. 

In order to remove a particular page on the Canadian Revenue Website, for example, “we had to fix over 1800ish other pages that were pointing to it,” Jonathan Rath, User Experience manager, stated. “We had to go in and not just disable the link, but to re-write or remove the content on those 1800ish pages. In our world it’s easy to create, hard to delete.” 

Weigh what you do. Wait. Is it worth it to create? Can you manage this content over its entire life? Will you be ready and willing to delete it when the time comes?

Ben Holliday, who works for the UK government, wrote about the Dutch traffic engineer Hans Monderman, who removed all traffic lights, signs, and road markings from an area in a city. That was brave. Think of all the people who would have been against that. Think of the dangers. More pedestrians might get injured, killed even. That was a potentially life-or-death decision. 

“The results were the opposite of what most people expected,” Ben wrote. “The traffic moved slower, people paid more attention, and accidents ultimately declined.” Pay more attention to what you do. Depend less on digital and more on your own brain. You might surprise yourself by what you know. Look freshly and deeply at your digital environment. What can you take away?

Progress bar indicators are a standard element in most digital designs. It’s assumed that they’re a good thing, that they help people navigate through a process. Ben and his team observed that most people didn’t even notice the progress bars and when they did, many got nervous or felt intimidated by them. The designers removed the progress bars. Nobody noticed that they were gone. The design was cleaner, simpler, more environmentally friendly because a team had the intelligence to ask why something was there, and the courage to remove something that didn’t have a clear purpose. 

What can you take away today?

Key actions

Reduce, strip away, optimize. Choose text where possible. 

Every day decide on at least one thing you won’t do, one thing you’ll reuse, one thing you’ll share, one thing you’ll remove.

Buy now

World Wide Waste

  • Free, weekly email
  • Published since 1996
  • Read some examples
  • Subscribe with your email below




 

Links

Buy now

← Phonewaste