ABC GOURMET Logo
FR EN DE

Web eco-design

How this site was designed to reduce its environmental impact

The internet uses energy. Between two sites that do the same thing, one can consume 10 to 50 times more than the other. That's where we can act.

Digital technology represents 4% of global CO₂ emissions (more than civil aviation). Each web page viewed consumes energy: servers, datacenters, data transmission, user device.

The difference between a heavy site and a lightweight site is like the difference between an SUV and a hybrid car: both drive, but one consumes much more.

This site compared to classic WordPress

Page weight
280 KB instead of 3-5 MB
Loading
0.6s instead of 3s+
CO₂ per visit
0.19g instead of 2.85g
Ecoindex score
A instead of D

Technical choices that reduce impact

1

Pre-generated pages served close to you

Many sites calculate each page on every visit. This site generates all pages once, then serves them from 330 datacenters worldwide. A Parisian visitor loads from Paris, not from the United States.

✓ Downloading ready-made files, without calculation or database

2

Energy only when necessary

To modify content, an interface automatically triggers small agents that execute necessary tasks then go to sleep. No server running permanently, just occasional calculations when really needed.

✓ It's like turning on the light only when you enter a room, instead of leaving the whole house lit

3

Images adapted to your device

Format adapted to the device (AVIF if supported, otherwise WebP, otherwise optimized PNG). Size adapted to the screen (no image larger than necessary). Result: 30 to 70 times lighter than the initial size.

✓ Less data = less energy to transmit and display

4

Leveraging browser evolution

10 years ago, to do certain things on a website (animations, popups, etc.), you had to load a lot of extra code. Today, browsers have evolved and can do all that natively. By staying up to date with these developments, we avoid loading 150 to 300 KB of code like many sites still do. This site: about 20 KB.

✓ Faster site and energy consumption divided by 10, just by intelligently using what already exists

An eco-responsible site is also a faster, more reliable, and cheaper to maintain site. Ecology and performance go hand in hand.

Development

Josselin Hanel, independent web developer.

View portfolio

Technologies used

Astro - Static generation Tailwind CSS TypeScript Cloudflare