Slide 1
Slide 1 text
Building a Planet
Friendly Web
Chris Adams
Sustainable UX - 2018
Slide 2
Slide 2 text
Chris Adams:
@mrchrisadams
Environmentally focussed
web generalist
Slide 3
Slide 3 text
A.M.E.E. (Avoid Mass
Extinction Engine) - CO2
calculation APIs
Loco2 - Low CO2 travel in
Europe by train
TeaLight - Low CO2 cups of tea,
with demand response
Thermondo - heating
installations in Germany (2nd
biggest source of CO2
emissions)
About me
Slide 4
Slide 4 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
Slide 5
Slide 5 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
http://www.iea.org/media/news/2017/GlobalCarbonEmissions2.png
http://www.iea.org/newsroom/news/2017/march/iea-finds-co2-emissions-flat-for-third-straight-year-even-as-global-
economy-grew.html
Slide 6
Slide 6 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
http://folk.uio.no/roberan/t/global_mitigation_curves.shtml
Slide 7
Slide 7 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
© 2011-2012 GreenTouch Consortium
2020 ICT Carbon Footprint
820m tons CO2
360m tons CO2
260m tons CO2
2007 Worldwide ICT
carbon footprint:
2% = 830 m tons CO2
Comparable to the
global aviation
industry
Expected to grow
to 4% by 2020
The Climate Group, GeSI
Report “Smart 2020”, 2008
Full report - https://www.slideshare.net/greentouch-org/intro-to-green-touch
Slide 8
Slide 8 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
http://www.ghgprotocol.org/
Slide 9
Slide 9 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
Scope 1
(sort of)
Slide 10
Slide 10 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
Scope 2
(sort of)
Slide 11
Slide 11 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
Scope 3
(sort of)
Slide 12
Slide 12 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
A mental model for
thinking about this
Slide 13
Slide 13 text
Sustainable UX - Building a Planet Friendly Web
@mrchrisadams
Your Packets
Your Platform
Your Process
Slide 14
Slide 14 text
Your packets
Slide 15
Slide 15 text
http://www.electricitymap.org/
Slide 16
Slide 16 text
“Wireless access network
technologies account for 90% of
total wireless cloud energy
consumption. Data centres account
for only about 9%. The energy
consumption of wireless user
devices is negligible.”
The power of wireless cloud 2013 (CEET - http://www.ceet.unimelb.edu.au/publications)
Slide 17
Slide 17 text
Power quote
The power of wireless cloud 2013 (CEET - http://www.ceet.unimelb.edu.au/publications)
Slide 18
Slide 18 text
https://speedcurve.com/blog/web-performance-page-bloat/
Slide 19
Slide 19 text
Power quote
https://performancebudget.io
Slide 20
Slide 20 text
Power quote
speedcurve.com / calibreapp.com / sitespeed.io / Google lighthouse
Slide 21
Slide 21 text
Your packets
Lossy changes
Lossless changes
Slide 22
Slide 22 text
Your packets
Lossy changes:
How much of what you send is
used by the client?
Slide 23
Slide 23 text
Your packets
Lossless changes:
How efficiently are the bits
sent?
Slide 24
Slide 24 text
Lossy Lossless
Matching asset sizes to devices Compression
Tree shaking - smaller javascript builds Minification
Asset Optimisation (video, images, audio) Caching, and Offline-first
CDNs
Developer friendly buzzwords
Slide 25
Slide 25 text
Time Is Money: The
Business Value of Web
Performance
Tammy Evert
https://www.amazon.com/Time-Money-Business-Value-Performance/dp/1491928743
Slide 26
Slide 26 text
perf-tooling.today
Slide 27
Slide 27 text
Putting it into
perspective
Slide 28
Slide 28 text
Source Share of downstream traffic
Netflix 35 %
YouTube 18 %
Amazon 4 %
HTTP 4 %
iTunes 3 %
Hulu 3 %
SSL 3 %
https://www.sandvine.com/hubfs/downloads/archive/2016-global-internet-phenomena-report-latin-america-and-north-america.pdf
Top 10 Peak Period Applications - North America, Fixed Access
Slide 29
Slide 29 text
Recap:
Your packets
Lossy changes
Lossless changes
Slide 30
Slide 30 text
Your platform
Provider
Provisioning
Slide 31
Slide 31 text
Your platform
Provider:
Where did the power your
servers run on come from?
Slide 32
Slide 32 text
Power quote
From 2017 report - http://www.greenpeace.org/usa/global-warming/click-clean/
Slide 33
Slide 33 text
http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
Contract for
difference.
How Akamai does
renewable power in data
centres they don’t own
Slide 34
Slide 34 text
http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
Slide 35
Slide 35 text
http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
Slide 36
Slide 36 text
http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
Slide 37
Slide 37 text
Your platform
Provision:
How many server resources do
you use? And when?
Slide 38
Slide 38 text
The power of wireless cloud 2013 (CEET - http://www.ceet.unimelb.edu.au/publications)
Slide 39
Slide 39 text
“many workloads are spiky or
drop to zero for extended
periods… applications used in
the workplace may only be
active for 40 of the 168 hours in
a week.”
Adrian Cockroft
@adrianco: AWS, ex Netflix
@mrchrisadams
https://medium.com/@adrianco/evolution-of-business-logic-from-monoliths-through-microservices-to-functions-
ff464b95a44d#.4ap421dwr
Slide 40
Slide 40 text
PaaS:
Higher unit cost in
exchange for
easier scaling
Slide 41
Slide 41 text
FaaS / Serverless:
Even higher unit
cost, to not think
about scaling*
* You still need to obviously, but differently
Slide 42
Slide 42 text
“the technical capabilities of
serverless might not be that
exciting, but the financial side
sure is… Strong financial
incentives for good design
practices, and clear financial
penalties for bad design”
Gojko Adzic
@mrchrisadamshttps://gojko.net/2016/08/27/serverless.html
Slide 43
Slide 43 text
When your second biggest cost after
staff is data centres, you have a very
good incentive to care about saving
energy.
@mrchrisadams
https://deepmind.com/blog/deepmind-ai-reduces-google-data-centre-cooling-bill-40
Slide 44
Slide 44 text
Recap:
Your platform
Provider
Provisioning
Slide 45
Slide 45 text
Your process
Getting around
Getting shelter
Getting feedback
Getting paid
Slide 46
Slide 46 text
Your process
Getting around
Getting shelter
Getting feedback
Getting paid
Slide 47
Slide 47 text
https://uxmag.com/articles/remote-user-research-usability-methods
http://bit.ly/planetfriendlywebtalk
Slide 48
Slide 48 text
Your process
Getting around
Getting shelter
Getting feedback
Getting paid
Slide 49
Slide 49 text
https://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html
Slide 50
Slide 50 text
https://twitter.com/jonathansampson/status/963465011153833984
Slide 51
Slide 51 text
“what we actually sell is what I like to
call the feeling of being informed when
you get to the very end. So we sell the
antidote to information overload — we
sell a finite, finishable, very tightly
curated bundle of content”
Tom Standage
@tomstandage: Deputy editor and head of digital strategy at The Economist
http://www.niemanlab.org/2015/04/the-economists-tom-standage-on-digital-strategy-and-the-limits-of-a-model-based-on-advertising/
Slide 52
Slide 52 text
https://stratechery.com/2017/publishers-seek-antitrust-exemption-news-versus-advertising-a-better-solution-for-publishers/
Slide 53
Slide 53 text
Your Packets
Your Platform
Your Process
Slide 54
Slide 54 text
planetfriendlyweb.org/contributing
Chris Adams
@mrchrisadams
[email protected]
Help me turn this into
a free guide
bit.ly/planetfriendlywebtalk
Slide 55
Slide 55 text
Credits (noun project)
Your Process - Flowchart - Maria Kislitsina
https://thenounproject.com/term/flow-chart/904061/
Your Packets - Network - Marie Van den Broeck
https://thenounproject.com/search/?q=network&i=381046
Your Platform - CPU - Dinosoft Labs
https://thenounproject.com/search/?q=cpu&i=1120852
Scope 1 - Kettle - Ruben Semedo
https://thenounproject.com/search/?q=kettle&i=540961
Scope 2 - Electric Kettle - Aaron K. Kim
https://thenounproject.com/term/kettle/123921
Scope 3 - Coffee Cup - Vectors Market
https://thenounproject.com/term/coffee-takeaway/1203983/