Thibaud Colas, he/him�Developer
Faster, leaner, greener: 10x lower website carbon emissions
Slides: wagtail.org/10x-lower/
2
3
Wagtail users
Slides: wagtail.org/10x-lower/
Disclaimer
4
Our challenge
5
119,120
6
119,120
7
tCO2e/year emissions for�52,531 Django sites
Source: my own data: 2024 Django sites emissions
8
Source: Dr Robert Rohde, IPCC data
9
10
Our goal
11
10x (Net Zero)
12
Our goal
10x lower carbon emissions�for as many websites as possible
10x (Net Zero)
13
Our goal
10x lower carbon emissions�for as many websites as possible
Source: -90% target from SBTi Corporate Net-Zero Standard
How we get there
14
15
16
System segments: where emissions come from
17
Source: sustainable web design.org
18
19
Data: Green Metrics Tool
Things we can do
20
Facade pattern
21
22
Original embed��993kb
<lite-youtube>��47kb (-95%)
Source: lite-youtube-embed
23
Original embed��993kb
<lite-youtube>��47kb (-95%)
Source: lite-youtube-embed
Dark mode and OLED
24
25
Light theme��11W
Dark theme��4.3W (-60%)
26
Light theme��11W
Dark theme��4.3W (-60%)
27
Source: my measurements: OLED power consumption, 13” OLED
Image optimizations
28
29
Original JPEG�196kb
Jpegli�132kb (-33%)
AVIF�48kb (-76%)
30
Original JPEG�196kb
Jpegli�132kb (-33%)
AVIF�48kb (-76%)
Modern image formats and encoders
In Django: django-imagekit, django-pictures, Wagtail’s {% picture %} tag
{% picture my_img format-{avif,jpeg} width-1024 %}
31
Example: PSF 2023 annual report
32
Responsive images
33
Original PNG�(1280x800)��40kb
Max display size�868x543��36kb (-10%)
Mobile display size�285x178��9kb (-78%)
Responsive images
{% picture my_img format-{avif,jpeg} width-{400,800} sizes="80vw" %}
<picture>
<source srcset="400.avif 400w, 800.avif 800w" type="image/avif" sizes="80vw">
<img srcset="400.jpg 400w, 800.jpg 800w" src="400.jpg" alt="A Wagtail" width="400" height="300" sizes="80vw">
</picture>
34
35
1,858
Example: Wagtail
36
tCO2e/year reduction (30%) in carbon emissions��once existing Wagtail websites implement those improvements
Site architecture
37
38
Carbon emissions of a Torchbox website
39
FaaS
40
Source: Quantifying greenness of FaaS
Data center regions
And their grid carbon intensity
41
42
Source: Electricity Maps
Data center grid carbon intensity by region
43
44
Source: Boris Gamazayichikov (Salesforce) - Green Web Foundation report
Taking this forward
45
Get climate action started at your workplace
Getting started:
Going further:
46
Thank you!
Let’s work on this together at the sprints?
47
Slides: wagtail.org/10x-lower/