Hands-On Sustainable Web Design

Photo by Jav­ardh on Unsplash

The web is cur­rently unsus­tain­able, but we have a lot of ways to improve the way we cre­ate digit­al ser­vices. All people work­ing in tech can do something—and we have to. It might also chal­lenge how we think about access­ib­il­ity, per­son­al data and busi­ness mod­els.

The envir­on­ment­al foot­print of the digit­al world seems intan­gible to most. Yet our digit­al sys­tems gen­er­ate more emis­sions than the avi­ation industry. 

Accord­ing to a study by the Green­IT group 1, this cur­rent annu­al foot­print res­ults in:

  • 6,800 TWh of primary energy (PE)
  • 1,400 mil­lion tonnes of green­house gases (GHG)
  • 7.8 mil­lion m3 of fresh water (water)
  • 22 mil­lion tonnes of anti­mony (ADP)

Based on these fig­ures, the digit­al world’s con­tri­bu­tion to the foot­print of human­ity rep­res­ents:

  • 4,2% of the Primary Energy Con­sump­tion
  • 3,8% of the Green­house Gas Emis­sions
  • 0,2% of the water con­sump­tion

Look it up, it’s really a lot. Who’s to blame for that? Let’s see.

The unbearable weight of the web

Each minute, mil­lions of clicks and con­tent are sent on the inter­net. 80% of the glob­al band­width is used for stream­ing (on demand, You­tube and por­no­graphy are the top 3 con­trib­ut­ors).  

Draw­ing by @LoriLewis and @OfficiallyChadd

How­ever, the main impact does not come from our usage of the web nor is it on the data centres. The main offend­ers are the devices we use. In each of these, there are a lot of non-renew­able resources. Most of the time, they are built and dis­posed of in unac­cept­able con­di­tions. On top of that, we own too many devices, change them too often and most often do not recycle them. Truth be told, they often fail us unex­pec­tedly. Because of planned obsol­es­cence, some might say. Sure, some people want the latest smart­phone. What else can you do when the man­u­fac­turer stops main­tain­ing the one you already own? 

Most of the time, we change our devices not because they are broken, but because they lag.

Our devices lag mainly because web­sites and applic­a­tions have gone out of con­trol—web­sites are too heavy, over­loaded, filled to the brim with dark pat­terns, images and videos.  

As users, we must take care of our devices and keep them as long as pos­sible. Redu­cing the num­ber of con­nec­ted devices helps a lot too, as does redu­cing the num­ber of flat screens.  

But the people who pro­duce our digit­al ser­vices must act to reduce the load on these devices. Eco-design­ing, as we will see, is a good start­ing point. Yet it might imply rethink­ing the web and how we per­ceive its users. Let’s start by look­ing at the respons­ib­il­ity of web developers.

The state of the (unsustainable) web

To reduce the envir­on­ment­al foot­print of our web­sites, we have to make web­sites light­er and keep the UX as flu­id as pos­sible. The user must find the web­site eas­ily and get to the ser­vice or inform­a­tion they came for. This implies work­ing on usab­il­ity and keep­ing away from dark pat­terns.   

One prac­tic­al way to reduce the foot­print is to ensure the pages are as light as pos­sible. The heav­ier they get, the less likely are users to even see your web­site.   

There are two things to keep in mind. Firstly, most people don’t have the latest smart­phone or even a decent, afford­able inter­net con­nec­tion234. Secondly, there is the top­ic of access­ib­il­ity. Your web­site has to be as easy to use as pos­sible56

Page weight

Web­sites are heavy, and it’s get­ting worse. 

The medi­an size of a web page is around 1900Kb and con­tains 74 requests. Since 2018, the size has increased by 434 Kb on desktop and 179Kb on mobile. So much for the band­width and over­all per­form­ance. Keep in mind that not all people have unlim­ited mobile data or even a reli­able inter­net con­nec­tion. 

Sure, images and media are to blame. But Javas­cript (JS) also has its share of respons­ib­il­ity. CSS, too. Let’s go deep­er.

Draw­ing by @bruised_blood and @iamdevloper

What makes websites heavier

Look­ing at the stats from web­sites, we can eas­ily explain the weight of web pages. Here we dis­cov­er a lot of bad prac­tices, whose rem­edy we’ll look at in eco-design­ing.  

For half of the web­sites on the inter­net:

  • More than 373Kb of JS is used. Fron­tend lib­rar­ies like React and oth­ers surely have a part to play in that. jQuery, too. Light­er altern­at­ives exist. As a developer, ask your­self if you really need that. You may need a cer­tain func­tion­al­ity, but prob­ably not the whole tool­box.
  • On aver­age, it takes almost 2.5s to load the JS alone. Yes, you read it right. Giv­en that most people will give up on a mobile web­site if it takes more than 3s to load, it’s a prob­lem.
  • More than 18 requests are needed just for load­ing the JS scripts.
  • More than 6 stylesheets are used.
  • Images weigh a total of more than 1Mb.

Here are some oth­er alarm­ing stats:

  • More than 83% of the web­sites use jQuery. Do they really need such a com­plete tool­box? Some web­site own­ers prob­ably don’t even know they use jQuery since it is shipped with Boot­strap (but not for long) and some Word­Press plu­gins and themes among oth­er things. Yes, Boot­strap get­ting rid of jQuery could be a huge step for­ward towards a more sus­tain­able web. This will be the case start­ing with Boot­strap 5.  
  • Speak­ing of Boot­strap, it is still used by nearly a quarter of all web­sites. Do they really use all its fea­tures?  
  • Less than half of the web­sites use a print stylesheet. The web was sup­posed to print less stuff. But, if we have to print, it’s always nice to have a ded­ic­ated stylesheet to remove most of the cos­met­ics. Spoil­er alert: we print a lot more since the arrival of the web, which is a good illus­tra­tion of Jevons’ Para­dox. 
  • Most of the images are res­ized by the browsers, which means that we send more data than we needed by the device.   
  • Speak­ing about optim­iz­ing images, only 4.2% of the web­sites use WebP.  
  • The num­ber of DOM ele­ments keeps increas­ing, and their dis­tri­bu­tion is quite alarm­ing. More ele­ments means more com­plex­ity, which means less per­form­ance and a great­er envir­on­ment­al foot­print.
  • And it gets worse when you look at the most used ele­ments. So much for access­ib­il­ity and semant­ic HTML. Not to men­tion all these iframes. They are gen­er­ally not great for a lot of reas­ons (access­ib­il­ity, secur­ity, per­form­ance) but iframes are still widely used, for example when embed­ding a You­tube video or a social media feed on your web­site.   

Technical optimizations  

Finally, let’s talk about some tech­nic­al optim­iz­a­tions which can help your users get faster (and light­er) web­sites.  

Green-IT Ana­lys­is is a browser addon which will improve your browser DevTools by meas­ur­ing the envir­on­ment­al impact of web­sites and check­ing for good prac­tices. It is avail­able on Fire­fox and Chrome.

  • If you haven’t done it yet, optim­ising images is a good start­ing point. They catch the eye but don’t have to slow down your user. Thank­fully, web.dev provides all neces­sary inform­a­tion for that! Maybe you could give CSS Sprites a try, too. And keep in mind an old say­ing: if you’re optim­iz­ing images manu­ally, you’re doing it wrong. If you want to make it as easy as pos­sible, include it in your work­flow. 
  • Most of the web­sites don’t use text com­pres­sion. Most of the ele­ments you use on your web­sites are basic­ally text (HTML, stylesheets and scripts). The gains of text com­pres­sion could be huge7. Mini­fy­ing them keeps things even bet­ter. 
  • There’s still a lot to do about cach­ing. Users shouldn’t have to reload everything every time they come back to your web­site8. CDN can also be a good way to reduce the envir­on­ment­al foot­print by short­en­ing the dis­tance between your users and what they load from your web­site9.
  • Maybe you don’t need jQuery or your fancy JS lib­rar­ies. Sure, they are use­ful. But they are also massive and filled with some func­tion­al­it­ies you don’t need. If you think you really do, look for light­er altern­at­ives

In the end, the bene­fits from these optim­iz­a­tions could be huge. Most of these optim­iz­a­tions are well doc­u­mented because they are related to web per­form­ance optim­iz­a­tion. It might take some research on your first try, but it’s really worth it. 

How­ever, the envir­on­ment­al impact of your web­site isn’t lim­ited to the pos­sib­il­ity of tech­nic­al optim­iz­a­tions. What about all the clut­ter? Do we need all these images, videos, social media feeds and share but­tons? And all these func­tion­al­it­ies most users will nev­er use?

Now let’s blame the design­ers.  

Functional sobriety

Even before tech­nic­al optim­iz­a­tion, there are huge poten­tial gains by choos­ing not to include some stuff. Here are some recom­mend­a­tions for design­ers:

  • Less images, less videos, social media feeds and share but­tons
  • Do you really need com­ments on your art­icles?
  • Choose your fonts with care and optim­ize them.
  • Like a third of the web­sites, you might be using Word­Press. Sure, it does everything you want but do you need all these func­tion­al­it­ies? Optim­ize it or look for the JAM­Stack.  
  • Do you need a nat­ive mobile app when the gains from a Pro­gress­ive Web App (PWA) could be huge? Take a look at PWA as it might improve the user exper­i­ence of your web­site. 
  • Do users really need Google Maps embed­ded on your web­site to find you? Open­street­map does the same without all the track­ers (more on that later) and, most of the time, a simple (optim­ized) pic­ture of a map does the job. 
  • Do you really need a carou­sel? I strongly believe your users don’t.
  • Once upon a time, every­one around wanted a for­um. See what’s left of that. 

When eco-design­ing for the web, you must focus on a digit­al ser­vice. You can ana­lyze a web­site or applic­a­tion, but the real focus is the user exper­i­ence. What is the pur­pose of your user? What do you provide for them? It could be book­ing a train tick­et, read­ing the latest news or even chat­ting with fel­low gamers. In the end, this is what you will work on to enhance the user exper­i­ence and, there­fore, reduce the envir­on­ment­al foot­print. By focus­ing on the users’ pur­pose, you can keep in mind what is essen­tial to your user and remove what seems super­flu­ous.   

Also keep in mind that all web­sites are not sup­posed to stay online forever. 

If you have some stats on your web­site, use them to look for unused func­tion­al­it­ies and pages. Speak­ing of stats, let’s talk about ana­lyt­ics and ads. 

Photo by Chris Yang

Surveillance capitalism

Back in 2015, ads took 39% of the mobile data. I don’t sup­pose it got bet­ter since then.  

Most of the things you use on the web are free—mostly “thanks” to ads. That means lots of images, videos and info every­where on the web dis­tract­ing you from what you want. But it gets worse: those ads are not ran­domly chosen. Enter the age of sur­veil­lance cap­it­al­ism and microtar­get­ing.  

Some twenty years ago, you went to Tri­pod and saw ads, care­fully planted on the pages. Until some folks real­ized it would be bet­ter to choose the right ad for each page. Just because you want to learn how to make an egg sand­wich doesn’t neces­sar­ily mean you want to buy a new car. So began the age of con­tex­tu­al­ized ads. That means choos­ing what ad to dis­play depend­ing on the con­tent of each page. Every time a user clicked on an ad, the own­er of the site earned a little money. It was anoth­er good reas­on to pro­duce qual­ity con­tent.

Some years later, Google and oth­er tech com­pan­ies decided to up their game by focus­ing the choice of the ads on the user. Back in 2000, the Sil­ic­on Val­ley tech star­tup bubble was threat­en­ing them and it was more of an “evolve or die” situ­ation. Through track­ers and cook­ies, a lot can be learned about what you did, who you are and what you like. Through pre­dic­tion algorithms, it is finally pos­sible to give you THE ad you unknow­ingly want. Brows­ing Face­book, you see that product on Amazon you were look­ing just the oth­er day. Watch­ing videos on You­tube, you get sug­ges­tions related on that oth­er hobby of yours (yes, cor­gis, we’ve all been there). “Allow us to know your loc­a­tion and brows­ing his­tory. It’s not for us but for you!”  

Of course, these pre­dic­tion algorithms need to be fed, hence the mul­ti­plic­a­tion of track­ers and cook­ies. 

Ad track­ing is a huge inva­sion of pri­vacy, and it weighs a lot in your web pages. Since the arrival of GDPR in 2018, some com­pan­ies had to learn how to work without cook­ies. Giv­en the choice to allow cook­ies or not, some users refused them alto­geth­er. On some web­sites, it could be as high as 90% of users opt­ing out of cook­ies. Some news­pa­pers sud­denly had to learn how to make a liv­ing without microtar­get­ing and went back to con­tex­tu­al ads. Guess what? They increased their rev­en­ues. There is a (still slow) rise of aware­ness around ads. Also keep in mind that microtar­get­ing greatly helps the pro­lif­er­a­tion of fake news, mis­in­form­a­tion and extrem­ism

If you really want to imple­ment ads on your web­site, at least do it prop­erly. And if you need ana­lyt­ics (which is great in order to know what your audi­ence wants from your web­site), look for altern­at­ives to Google Ana­lyt­ics10. Finally, pri­vacy by design might be a good angle to rethink the busi­ness mod­el of your web­site.

Other Benefits 

We just read many good reas­ons to cre­ate a more sus­tain­able web and act for the plan­et. But some­times this is not enough. Here are some bene­fits to busi­ness. 

Eco-design­ing digit­al ser­vices res­ults in a bet­ter user exper­i­ence: increased per­form­ance, easi­er-to-imple­ment access­ib­il­ity and also bet­ter secur­ity by redu­cing the attack sur­face by remov­ing super­flu­ous tools and func­tion­al­it­ies. All of which can greatly improve your SEO. Also remem­ber that a bet­ter user exper­i­ence often proves bet­ter for your busi­ness. 

Nowadays, with all the con­cerns about cli­mate change, com­mu­nic­at­ing about con­trib­ut­ing to a sus­tain­able web can be highly bene­fi­cial to your brand image.  

You might also want to stop using Dark Pat­terns and do your share to fight the atten­tion eco­nomy.

Final tips and resources

Here are some guidelines to keep in mind: 

  • As with per­form­ance and access­ib­il­ity, use a hol­ist­ic approach. Keep only func­tion­al­it­ies truly use­ful to your user
  • Optim­ize UX/UI to help the user reach their goal faster
  • Choose your tech­nic­al stack with great care by keep­ing in mind what you want to achieve. When you choose a lib­rary or frame­work, look for a light­er altern­at­ive. When you use a frame­work or CMS, look for ways to optim­ize it
  • While cod­ing, use the Web eco-design check-list (PDF). Here, your first steps should be towards optim­iz­ing images, using cach­ing, CDN, mini­fy­ing text assets and com­pres­sion
  • Find a green web host
  • Keep in mind that the pub­lished con­tent should be optim­ized too
  • Keep apply­ing good prac­tices while updat­ing your web­site. It might be use­ful to mon­it­or your web­site. With each update should come a quick audit. When your web­site is not use­ful any­more, take it off­line.

And some resources to go deep­er: 

6.  See the WebAIM Mil­lion

7. See the com­pres­sion sec­tion of the Web Alman­ac 2019

8. See the cach­ing sec­tion of the Web Alman­ac 2019

9. See the CDN sec­tion of the Web Alman­ac 2019

10. Altern­at­ives to Google Ana­lyt­ics
https://www.offen.dev/
https://volument.com/
https://matomo.org/
https://goaccess.io/

About the author

Laurent Devernay is an advoc­ate of sus­tain­able tech­no­lo­gies in France, hold­ing reg­u­lar talks and events on the sub­ject, col­lab­or­at­ing with Green­IT and the Insti­tut du Numérique Respons­able.