How better performing websites can help save the planet

The web has a dirty secret — its carbon footprint is larger than that of global air travel. The immense energy consumed by the Internet from non-renewable sources makes it the largest coal-fired machine on earth. Mozilla’s 2018 Internet Health Report highlighted this growing problem and stated that sustainability should be a bigger priority for the industry. Jack will provide practical steps to reduce the environmental impact of our work and promote a better future.

Transcript

1. How better performing websites can help save the planet
   Jack Lenox
   WordCamp Europe, Berlin, June 2019
   

   View Slide

2. View Slide

3. http://blackle.com
   

   View Slide

4. Photo by Jan-Philipp Thiele on Unsplash
   

   View Slide

5. Me
   2009 - 2013: Startup/agency work
   2013 - present: Automattic (WordPress.com VIP since 2015)
   2017: UK parliamentary candidate for the Green Party of England and Wales
   

   View Slide

6. https://mozillafestival.org/
   

   View Slide

7. The Problem
   

   View Slide

8. The Internet has an enormous carbon footprint
   

   View Slide

9. http://www.clickclean.org/
   

   View Slide

10. ...and it's rapidly growing
    

    View Slide

11. https://www.nature.com/articles/d41586-018-06610-y
    

    View Slide

12. https://www.electricitymap.org/
    

    View Slide

13. The Internet produces about one billion tonnes of CO2
    every year
    

    View Slide

14. View Slide

15. The Internet is the largest coal-fired machine on earth
    

    View Slide

16. https://internethealthreport.org/2018/the-internet-uses-more-electricity-than/
    

    View Slide

17. Sustainability should be a bigger priority, especially as the Internet expands into
    new territory.
    

    View Slide

18. https://unfccc.int/process-and-meetings/the-paris-agreement/the-paris-agreement
    

    View Slide

19. https://www.americaspledgeonclimate.com/
    

    View Slide

20. http://www.clickclean.org/
    

    View Slide

21. Poorly performing websites are bad for the environment
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. http://www.bristol.ac.uk/news/2019/may/rethinking-digital-service-design-.html
    

    View Slide

26. View Slide

27. Sustainable Human-Computer Interaction (SHCI)
    

    View Slide

28. https://loco2.com/
    

    View Slide

29. https://loco2.com/
    

    View Slide

30. https://www.gwr.com/
    

    View Slide

31. https://www.gwr.com/
    

    View Slide

32. https://www.mobike.com/
    

    View Slide

33. https://untoldcoffee.co.uk/
    

    View Slide

34. https://untoldcoffee.co.uk/
    

    View Slide

35. Sustainable Interaction Design (SID)
    

    View Slide

36. Switching off video playback while watching music videos
    Our example analysis of one straightforward SID intervention estimates that the emissions
    savings it enables are between 1% and 5% of the total emissions. This is comparable in scale
    to the existing reductions obtained by Google's purchase of renewable energy to power
    YouTube's servers.
    https://dl.acm.org/citation.cfm?doid=3290605.3300627
    

    View Slide

37. Sustainable Web Design (SWD)
    

    View Slide

38. Every byte transferred represents energy being consumed
    

    View Slide

39. https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf
    

    View Slide

40. https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf
    

    View Slide

41. 5 kWh per GB
    (5W per MB)
    

    View Slide

42. Photo by Hunters Race on Unsplash
    

    View Slide

43. https://www.electricitymap.org/
    

    View Slide

44. Maths, yay!
    290(g) / 1000 = 0.29g per Watt
    5(W) x 10(MB) = 50W
    0.29(g) x 50(W) = 14.5g of CO2
    

    View Slide

45. Our 10MB web page produces 14.5g of CO2 each time
    it's loaded*
    *uncached
    

    View Slide

46. Photo by System 76
    

    View Slide

47. Sustainable Web Design
    1. Cut digital waste
    2. Improve user experience
    3. Use renewable energy
    

    View Slide

48. Sustainable Web Design
    1. Cut digital waste
    2. Improve user experience
    3. Use renewable energy
    

    View Slide

49. The rule of least power
    Computer Science spent the last forty years making languages which were as powerful as
    possible. Nowadays we have to appreciate the reasons for picking not the most powerful
    solution but the least powerful.
    Tim Berners-Lee
    Aside: I discovered this via Charlie Owen: www.sonniesedge.net
    https://www.w3.org/2001/tag/doc/leastPower.html
    

    View Slide

50. Translation: Don't use jQuery when you don't need to. Don't use JavaScript when CSS will do.
    Pro-tip: Check out youmightnotneedjquery.com
    

    View Slide

51. Translation of that translation: Transmit the fewest bytes possible.
    

    View Slide

52. Simplify the user interface
    Do you really need:
    background videos?
    social media embeds?
    carousels?
    

    View Slide

53. Reduce code
    Create lean HTML
    Simplify CSS
    Use less script
    

    View Slide

54. The most performant, accessible and easily maintainable feature of a website is the one that
    you don't make in the first place.
    Heydon Pickering
    

    View Slide

55. Tree shaking
    

    View Slide

56. https://www.freecodecamp.org/news/how-i-dropped-250kb-of-dead-css-weight-with-purgecss-28821049fb/
    

    View Slide

57. Use less script
    This button weighs 50 KB.
    A plain text link uses almost zero bytes.
    

    View Slide

58. Images
    Use the correct image
    Compress images as much as possible
    Lazy load
    

    View Slide

59. A word about fonts
    Subset for just the characters you need
    Be sparing in how many fonts you load
    Serve them only in the .woff2 format if possible
    

    View Slide

60. Backend stuff
    Use HTTPS over HTTP2
    Nginx with FastCGI Cache
    WP Super Cache
    gzip and brotli compression
    

    View Slide

61. https://3perf.com/talks/web-perf-101/
    

    View Slide

62. Sustainable Web Design
    1. Cut digital waste
    2. Improve user experience
    3. Use renewable energy
    

    View Slide

63. Improve user experience
    Search Engine Optimisation (SEO)
    Accessibility-first mentality
    Follow best practices
    

    View Slide

64. Sustainable Web Design
    1. Cut digital waste
    2. Improve user experience
    3. Use renewable energy
    

    View Slide

65. https://www.thegreenwebfoundation.org/
    

    View Slide

66. https://www.hetzner.de/
    

    View Slide

67. https://www.dreamhost.com/
    

    View Slide

68. https://cloud.google.com/
    

    View Slide

69. Putting this in practice (and taking it to an extreme)
    No images
    No sidebar
    No embeds
    No menu navigation (it's on its own page)
    Almost no additional HTTP requests
    

    View Slide

70. View Slide

71. https://underscores.me/
    

    View Slide

72. View Slide

73. View Slide

74. https://www.webpagetest.org/
    

    View Slide

75. Susty
    93 lines of HTML
    2.5KB of CSS (compressed with gzip)
    3 requests per page, CSS, SVG logo
    0KB of JavaScript
    0.01g of CO2 per page view
    

    View Slide

76. https://ecograder.com/
    

    View Slide

77. https://www.websitecarbon.com/
    

    View Slide

78. https://cloverly.com/
    

    View Slide

79. In the Real World
    

    View Slide

80. https://webperf.xyz/
    

    View Slide

81. View Slide

82. (201KB)
    

    View Slide

83. View Slide

84. (417KB)
    

    View Slide

85. View Slide

86. (213KB)
    

    View Slide

87. View Slide

88. (423KB)
    

    View Slide

89. View Slide

90. (435KB)
    

    View Slide

91. View Slide

92. (11KB)
    

    View Slide

93. In conclusion
    Set performance budgets: 500KB per page is a good starting point
    Adopt the rule of least power
    No-one will care about their websites if we're all fighting over water
    

    View Slide

94. https://www.change.org/p/sustainable-servers-by-2024
    

    View Slide

95. https://www.sustainablewebmanifesto.com/
    

    View Slide

96. https://sustainableux.com/
    

    View Slide

97. https://climateaction.tech/
    

    View Slide

98. Sustainable websites are
    More performant
    More user-friendly
    More accessible
    More server-friendly
    More -friendly
    

    View Slide

99. We're hiring:
    wpvip.com/careers
    

    View Slide

100. Vielen dank!
     

     View Slide

101. Any questions?
     @jacklenox | jack@automattic.com
     

     View Slide

102. Bibilography
     electricityMap: www.electricitymap.org
     Internet Health Report: internethealthreport.org
     Greenpeace's ClickClean: www.clickclean.org
     "The average web page is 3MB. How much should we care?", Tammy Everts:
     speedcurve.com/blog/web-performance-page-bloat/
     "Designing for actual performance", Adam Silver: adamsilver.io/articles/designing-for-actual-
     performance/
     "Writing Less Damn Code", Heydon Pickering: www.heydonworks.com/article/on-writing-less-
     damn-code
     "How I dropped 250KB of dead CSS weight with PurgeCSS", Sarah Dayan:
     medium.freecodecamp.org/how-i-dropped-250kb-of-dead-css-weight-with-purgecss-
     28821049fb
     

     View Slide

103. Web Performance 101: 3perf.com/talks/web-perf-101
     The Green Web Foundation: www.thegreenwebfoundation.org
     SustyWP: sustywp.com
     WebPagetest: www.webpagetest.org
     EcoGrader: ecograder.com
     WebsiteCarbon: www.websitecarbon.com
     Sustainable Servers petition: www.change.org/p/sustainable-servers-by-2024
     SustainableUX: sustainableux.com
     Climate Action Tech: climateaction.tech
     

     View Slide