“Global warming does exist, as scientologists have proven, and ice-cubes is actually melting”

Sustainable Websites

So How Bad Is It?

In 2021, data centers consumed 416.2TWh annually

In 2025 it's ... 850TWh!

 1000TWh (2030)

So how much is 850TWh?

  • That's more than Denmark, Sweden, Norway, Italy and Spain combined ... but it's just the electricity!
  • And electricity is “only” 27% of global CO2 emissions

To build a data-center you also need:

  • Lots of concrete (1kg cement = 1kg CO2)*
  • Lots of steel (same story)**
  • Plastic (etc. ... you get it!)
  • Silicon, rare metals
  • Transportation

In homes around the world:

  • Modems
  • Routers
  • Phones, tablets, PC's
  • IOT devices

So ... 850TWh is an understatement!

... and what about AI?

What can WE do?

The average web page tested produces 1.76 grams CO2 per page view. For a website with 10,000 monthly page views, that's 211 kg CO2 per year.

4 grams of CO2

For every email

2 to 7 grams of CO2

Per Google Search

https://www.climatecare.org/resources/news/infographic-carbon-footprint-internet/

Checklist

  • Choose a green hosting provider
  • Choose a green CDN
  • Prevent battery-drain
  • Reduce network-traffic
  • Simplify the user-journey

Prevent Battery Drain

  • Use Sustainable Colors
  • Offer Dark Mode
  • Reduce Re-draws
  • Reduce JavaScript

Use Sustainable Colors

Which image requires most energy?

“Running Google Maps in night mode reduced screen power draw by 63 percent.
Black is the most efficient color for OLED screens as the pixels are switched off, and white is the most energy intensive, with darker colors generally using less energy.
Color also makes a difference, with blue pixels consuming 25 percent more energy than green or red.”

 

“If you’ve been given some freedom as a designer to define the color palette for your branding, aim to create darker designs using less blue”

HTML, excerpt:
<input type="range" name="--hue" min="0" max="360" value="200" data-suffix="%">


JavaScript:
app.addEventListener('input', (e) => {
  const I = e.target;
  app.style.setProperty(I.name, `${I.value}${I.dataset.suffix || ''}`);
});

One event-handler for all inputs

input.defaultValue
input.defaultChecked
input.defaultSelected
form.elements.groupname.value
input.value | input.valueAsNumber

“Sustainable Web Design”

Think about the way you write code from a structural point of view. Can you organize your files to be more streamlined and avoid duplication of styles and functions? Can you simplify logic to reduce the number and complexity of queries required to deliver a specific piece of functionality? Can you code the website without using bloated libraries and plugins that contain functionality you don’t even need? It might take a bit more time to plan an efficient structure or to write code from scratch, but the benefits in terms of performance and sustainability can be significant”

Energy consumption

How much CPU is required to do the same tasks in various programming languages

Static Web v.2.0:

JamStack


“If you were born before 1990, you’ll probably remember the days when we used to build websites in static HTML, and when we made our dreams come true with Dreamweaver. It turns out that those basic websites were really, really ecofriendly because they generally had really small files and placed minimal load on the server”

 

Use Server Side Rendering

JavaScript Tips

JavaScript have a suite of Observers that can greatly affect the performance of your site:

InterscetionObserver
MutationObserver
ResizeObserver
PerformanceObserver

 

A lot of the components you see around the web use JavaScript unnecessarily. Know/learn the methods of native HTML-controls.

Use CSS for animation

The most common example is the use of JavaScript for animating elements in a web design. CSS can now achieve many animation effects with far more efficiency than JavaScript because it minimizes the need for the CPU to “think”.

JavaScript

We should think carefully about whether the code we use is necessary or nice-to-have — or of existing functionailty can be moved to HTML and CSS.

Do we need tracking scripts?

Reduce Network Traffic

Simplify The User-Journey

“We normally want visitors to explore the brand, linger and become influenced by the product story. They should become lifelong customers. Sadly, this goes against what is best practice for websites with a low carbon footprint.”

Use Case:
Shipping Costs

😡😡😡😡😡😡

Will Websites Be Boring, then?

They don't have to!

Testing stoumann.dk

Thank You!

Made with Slides.com