"How to green the web" is a topic that gets more and more relevant these days. This presentation gives clear advice and ideas on how to make your websites greener.

1. Green the web
Why cat content is responsible for global warming
Sandy Dähnert

2. 2
Fast internet is luxuryNot everyone has access to a
computer or a smartphone
Not everyone has (good) internet
at home or on the go
Every kb costs server load, time
and money

3. 25
The global temperature increased about 1°C since the
start of the Industrial Revolution (1880).
2/3rd of that since 1975.
Source: IPCC, MCC Berlin

4. Forecasts predict an increase of 1,5°C in 9 years and 2°C
in 26 years.
With an increase of only 1,5°C we created irreversible
damage and our climate will never be the same again.
Fun fact: 20.000 years ago a change of only 5°C was
responsible for the last ice age.
25Source: IPCC, MCC Berlin

5. 5

6. 6
How does that relate to UX?

7. Source: Greenpeace Click Clean Report 2017, Main components for electricity consumption
ICT industry = Information and communication technology industry
7
The ICT industry we work in comprises data centers,
communication networks, end-user devices, and energy
required to manufacture the equipment for all three

8. The ICT sector electricity demand ranks 3rd in
the world
8Source: Greenpeace Click Clean Report 2017
ICT industry = Information and communication technology industry

9. 9
(in 2012 it was 4,7%)
Source: Greenpeace Click Clean Report 2017
ICT industry = Information and communication technology industry
It is estimated that 2020 ICT will take up
14% of the global energy consumption

10. 10
(Projections expect the share to
double by 2020)
In 2012 ICT produced more than 830 million tons of CO2 – as
much as the aviation industry
Sources: Toward reducing the greenhouse gas emissions of the Internet and telecommunications (2013), Air Transport Action Group
ICT industry = Information and communication technology industry

11. 11Source: UN Sustainable Development Goals

12. 12
How can we reach those goals
when there are thousands of
servers that use enormous
numbers of water and emit
huge amounts of CO2 ?

13. 25
Streaming
music
Watching your
favorite series
Scrolling through
Social Media
Watching cute
cat videos

14. 14
Data
Data centers
Energy Co2
Devices
Networks
= =

15. 15
MAKE UX
GREEN
AGAIN

16. 16
How can we do that?

17. 4 steps to a
greener web //1 Analysis
17
//2 UX and SEO optimization
//3 Data reduction
//4 Green hosting

18. //1
Analysis
18

19. 19
Analyze your websites footprint

20. 20Source: Website Carbon

21. 21
Over a year, with (only) 100.000 monthly page views,
www.telekom.de produces
Source: Website Carbon
as much CO2 as boiling water for 777.280 cups of tea
enough electricity to drive an electric car 74.320km

22. //2
UX and SEO
optimization
22

23. UX is not like going to the
supermarket where you are
directed through all isles to find
the checkout.

24. Reduce
non-essential traffic
// Focus on specific user groups
24
// User friendly navigation
// Easy to digest and decluttered content
// Significant keywords
// Optimized click paths
// Redirects and 404 pages
// Well communicated CTAs
// And so much more …

25. Reduce
non-essential traffic
// Focus on specific user groups
7
// User friendly navigation
// Easy to digest and decluttered content
// Significant keywords
// Optimized click paths
// Redirects and 404 pages
// Well communicated CTAs
// And so much more …
Lower bounce rates
Greater user
happiness
Fewer non-
essential users
Better findability/
ranking

26. Integrate
green patterns
// Tag products with their green
labels and certificates
26
// Offer filters such as “Made in
Germany”, “Recycled”, “Fair Trade”
// Offer sorting such as
“green products first”
// Promote green and
local stores
// Communicate and promote sustainable travel
alternatives (e.g. certain routes, flights, etc.)

27. Integrate
green patterns
// Integrate green shipping
such as DHL Go Green
27
// Offer in-store pick up
// Integrate CO2 compensation
options (e.g. Atmosfair, MyClimate)
// Offer bundled shipping
instead of single deliveries
// Incentivize green
shipping usage
// Incorporate digital bills
// Let user pick their
newsletter topics
// Build in auto sleep mode, non-
accessibility and silence features

28. Integrate
green patterns
// Raise awareness that energy is used
28
// Integrate small “green” hints and tips
// Point out the actions you take for a greener environment

29. //3
Data
reduction
29

30. 30
Studies show how just a
few milliseconds
of slower page loads fire back in
heavy profit setbacks.
Source: Web Performance Optimization (WPO) Stats
Example Google:
+800ms page load time = -$1M daily revenue

31. 31
 Set a page weight maximum for your
website (best case lower than 1MB)
 Optimize your loading times to less than 3
seconds
Page weight
maximum

32. 32
 Compress images (e.g. with ShortPixel)
 Reduce or eliminate fullwidth images
 Use icons instead of images
 Integrate SVGs instead of PNGs or JPEGs
Image
reduction

33. 33
 Don‘t run videos in auto play
 Compress your videos
 Use videos in MP4 and convert them if
possible
Video
reduction

34. 34
 Think twice before you integrate an
animation – Is it necessary and useful? (slider,
carousel, etc.)
 Use micro animations very consciously and
only as an aid for user interaction
Animation
reduction

35. 35
 Use system fonts (such as Arial #forreal) and no or
very limited special fonts
 Reduce the download size of special fonts
 Erase not used letters and characters (e.g. additional
characters for not used languages)
Typo
reduction

36. 36
 Regularly declutter you collected user data #whaaaaat
 Why? Example: If you send a newsletter your visibility
declines in intelligent mailboxes if more people do not
open your newsletter
 Integrate a reactivation campaign in your newsletter cycle
and delete users when they didn’t open your mails for
more than 6 months
User data
decluttering

37. 37
 Think twice before sending emails with huge
attachments to your users
 Make attachments accessible via your
website
 Remind your users not to print emails or send
data if there is no need
Email
rethinking

38. 38
 Integrate lazy loading / loading more CTAs if suitable
 Content is only loaded if a user scrolls down or
presses the specific CTA
 Safes a lot of page load
Lazy loading
integration

39. 39
 Reduce tracking scripts to minimize loading times
 Focus on specific cases and goals
 Don’t track everything just to track it
 Eliminate ad scripts or reduce them to a bare
minimum
Tracking
focus

40. 40
 Code clean
 Use caching to load content a lot faster,
especially if you edit a module/content only a
few times a year (or less)
Code
clean up

41. 41
 UseWordpress only if no other option is available
 Only use plugins that you really need
 Compress CSS and JavaScript with plugins such as
Autoptimize
 Reduce your loading times and minimize the number of
requests with plugins such as W3Total Cache
Wordpress
rethinking

42. 42
Fewer page loads
Faster loading times
Fewer server requests
Better usability
Less energy
consumption
Less CO2

43. 43
Happier users

44. //4
Green
hosting
44

45. 45
 Switch to hosting provider such as All Inkl. or another
hoster, that uses 100% renewable energies
 Send your provider an email and ask pro-active for
packages with 100% renewable energies
Hosting
with renewable energies

46. 45
 Check in the Greenpeace ClickClean report if your cloud
services and tools you use are hosted green
 Plus: Compensate the CO2 footprint of your website with
projects such as natureOffice
Hosting
with renewable energies

47. 46
Companies such as Microsoft,
Google, Apple and Facebook
race towards a 100% renewable
energies target.
Source: Greenpeace Click Clean Report 2017, Microsoft subsea data centers

48. 47
What else can we do in our
personal life?

49. Taking
responsibility
as designers
and human
beings
48

50. 49
Analyze
your personal footprint
Check your business
footprint
Check your private
footprint

51. 50
Optimize your
work habits and tools
 Reduce the lighting of your monitor when you don’t need shiny bright
screens
 Activate power save & monitor sleep modes
 Sign the self-compulsory AGD “Charter for sustainable design“
 Use green energy in your home office

52. 51
Optimize your
work habits and tools
 Check your work habits such as cloud usage, saving old documents or
versions that are not needed any more
 Use tabbed browsing reasonably and use tab manager browser add-ons, e.g.
Toby for Chrome orTab Session Manager for Firefox.Tabs continue
consuming energy even in the background.

53. 52
Optimize your
work habits and tools
 Be conscious with email attachments. Compress attachments if
applicable.
 Consider turning off the feature that automatically includes the
entire previous email thread on all email replies.
 Talk with other UX designers about the topic

54. 53
Optimize your
personal habits and tools
 Turn off “push notifications” andWi-Fi searching that you do not need
to conserve wireless battery life
 Use Ecosia as search engine (for every 45 searches a tree gets planted)
 Reduce streaming onYouTube, Netflix and other video portals.Video
requests a lot of energy
 Sign petitions such as „Sustainable Servers by 2024“

55. 54
People, pixels, planet
- You’ve got the power!

56. You have your own thoughts about the topic?
You want to collaborate?
ux@sandydaehnert.de
LinkedIn
Instagram @greentheweb
Let‘s have a chat!