Building a Planet Friendly Web

The deck for my Sustainable UX 2018 talk - Building a Planet Friendly Web

Transcript

1. Building a Planet
   Friendly Web
   Chris Adams
   Sustainable UX - 2018
   

   View Slide

2. Chris Adams:
   @mrchrisadams
   Environmentally focussed
   web generalist
   

   View Slide

3. 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
   

   View Slide

4. Sustainable UX - Building a Planet Friendly Web
   @mrchrisadams
   

   View Slide

5. 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
   

   View Slide

6. Sustainable UX - Building a Planet Friendly Web
   @mrchrisadams
   http://folk.uio.no/roberan/t/global_mitigation_curves.shtml
   

   View Slide

7. 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
   

   View Slide

8. Sustainable UX - Building a Planet Friendly Web
   @mrchrisadams
   http://www.ghgprotocol.org/
   

   View Slide

9. Sustainable UX - Building a Planet Friendly Web
   @mrchrisadams
   Scope 1
   (sort of)
   

   View Slide

10. Sustainable UX - Building a Planet Friendly Web
    @mrchrisadams
    Scope 2
    (sort of)
    

    View Slide

11. Sustainable UX - Building a Planet Friendly Web
    @mrchrisadams
    Scope 3
    (sort of)
    

    View Slide

12. Sustainable UX - Building a Planet Friendly Web
    @mrchrisadams
    A mental model for
    thinking about this
    

    View Slide

13. Sustainable UX - Building a Planet Friendly Web
    @mrchrisadams
    Your Packets
    Your Platform
    Your Process
    

    View Slide

14. Your packets
    

    View Slide

15. http://www.electricitymap.org/
    

    View Slide

16. “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)
    

    View Slide

17. Power quote
    The power of wireless cloud 2013 (CEET - http://www.ceet.unimelb.edu.au/publications)
    

    View Slide

18. https://speedcurve.com/blog/web-performance-page-bloat/
    

    View Slide

19. Power quote
    https://performancebudget.io
    

    View Slide

20. Power quote
    speedcurve.com / calibreapp.com / sitespeed.io / Google lighthouse
    

    View Slide

21. Your packets
    Lossy changes
    Lossless changes
    

    View Slide

22. Your packets
    Lossy changes:
    How much of what you send is
    used by the client?
    

    View Slide

23. Your packets
    Lossless changes:
    How efficiently are the bits
    sent?
    

    View Slide

24. 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
    

    View Slide

25. Time Is Money: The
    Business Value of Web
    Performance
    Tammy Evert
    https://www.amazon.com/Time-Money-Business-Value-Performance/dp/1491928743
    

    View Slide

26. perf-tooling.today
    

    View Slide

27. Putting it into
    perspective
    

    View Slide

28. 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
    

    View Slide

29. Recap:

    Your packets
    Lossy changes
    Lossless changes
    

    View Slide

30. Your platform
    Provider
    Provisioning
    

    View Slide

31. Your platform
    Provider:
    Where did the power your
    servers run on come from?
    

    View Slide

32. Power quote
    From 2017 report - http://www.greenpeace.org/usa/global-warming/click-clean/
    

    View Slide

33. 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
    

    View Slide

34. http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
    

    View Slide

35. http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
    

    View Slide

36. http://www.datacenterknowledge.com/archives/2016/05/11/akamai-pledges-to-source-renewable-energy-for-data-centers
    

    View Slide

37. Your platform
    Provision:
    How many server resources do
    you use? And when?
    

    View Slide

38. The power of wireless cloud 2013 (CEET - http://www.ceet.unimelb.edu.au/publications)
    

    View Slide

39. “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
    

    View Slide

40. PaaS:
    Higher unit cost in
    exchange for
    easier scaling
    

    View Slide

41. FaaS / Serverless:
    Even higher unit
    cost, to not think
    about scaling*
    * You still need to obviously, but differently
    

    View Slide

42. “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
    

    View Slide

43. 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
    

    View Slide

44. Recap:

    Your platform
    Provider
    Provisioning
    

    View Slide

45. Your process
    

    Getting around
    Getting shelter
    Getting feedback
    Getting paid
    

    View Slide

46. Your process
    

    Getting around
    Getting shelter
    Getting feedback
    Getting paid
    

    View Slide

47. https://uxmag.com/articles/remote-user-research-usability-methods
    http://bit.ly/planetfriendlywebtalk
    

    View Slide

48. Your process
    

    Getting around
    Getting shelter
    Getting feedback
    Getting paid
    

    View Slide

49. https://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html
    

    View Slide

50. https://twitter.com/jonathansampson/status/963465011153833984
    

    View Slide

51. “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/
    

    View Slide

52. https://stratechery.com/2017/publishers-seek-antitrust-exemption-news-versus-advertising-a-better-solution-for-publishers/
    

    View Slide

53. Your Packets
    Your Platform
    Your Process
    

    View Slide

54. planetfriendlyweb.org/contributing
    Chris Adams
    @mrchrisadams
    chris@productscience.co.uk
    Help me turn this into
    a free guide
    bit.ly/planetfriendlywebtalk
    

    View Slide

55. 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/
    

    View Slide