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
3. http://blackle.com
4. Photo by Jan-Philipp Thiele on Unsplash
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
6. https://mozillafestival.org/
7. The Problem
8. The Internet has an enormous carbon footprint
9. http://www.clickclean.org/
10. ...and it's rapidly growing
11. https://www.nature.com/articles/d41586-018-06610-y
12. https://www.electricitymap.org/
13. The Internet produces about one billion tonnes of CO2 every year
15. The Internet is the largest coal-fired machine on earth
16. https://internethealthreport.org/2018/the-internet-uses-more-electricity-than/
17. Sustainability should be a bigger priority, especially as the Internet expands into new territory.
18. https://unfccc.int/process-and-meetings/the-paris-agreement/the-paris-agreement
19. https://www.americaspledgeonclimate.com/
20. http://www.clickclean.org/
21. Poorly performing websites are bad for the environment
22. https://speedcurve.com/blog/web-performance-page-bloat/
23. https://speedcurve.com/blog/web-performance-page-bloat/
24. https://speedcurve.com/blog/web-performance-page-bloat/
25. http://www.bristol.ac.uk/news/2019/may/rethinking-digital-service-design-.html
27. Sustainable Human-Computer Interaction (SHCI)
28. https://loco2.com/
29. https://loco2.com/
30. https://www.gwr.com/
31. https://www.gwr.com/
32. https://www.mobike.com/
33. https://untoldcoffee.co.uk/
34. https://untoldcoffee.co.uk/
35. Sustainable Interaction Design (SID)
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
37. Sustainable Web Design (SWD)
38. Every byte transferred represents energy being consumed
39. https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf
40. https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf
41. 5 kWh per GB (5W per MB)
42. Photo by Hunters Race on Unsplash
43. https://www.electricitymap.org/
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
45. Our 10MB web page produces 14.5g of CO2 each time it's loaded* *uncached
46. Photo by System 76
47. Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy
48. Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy
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
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
51. Translation of that translation: Transmit the fewest bytes possible.
52. Simplify the user interface Do you really need: background videos? social media embeds? carousels?
53. Reduce code Create lean HTML Simplify CSS Use less script
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
55. Tree shaking
56. https://www.freecodecamp.org/news/how-i-dropped-250kb-of-dead-css-weight-with-purgecss-28821049fb/
57. Use less script This button weighs 50 KB. A plain text link uses almost zero bytes.
58. Images Use the correct image Compress images as much as possible Lazy load
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
60. Backend stuff Use HTTPS over HTTP2 Nginx with FastCGI Cache WP Super Cache gzip and brotli compression
61. https://3perf.com/talks/web-perf-101/
62. Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy
63. Improve user experience Search Engine Optimisation (SEO) Accessibility-first mentality Follow best practices
64. Sustainable Web Design 1. Cut digital waste 2. Improve user experience 3. Use renewable energy
65. https://www.thegreenwebfoundation.org/
66. https://www.hetzner.de/
67. https://www.dreamhost.com/
68. https://cloud.google.com/
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
71. https://underscores.me/
74. https://www.webpagetest.org/
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
76. https://ecograder.com/
77. https://www.websitecarbon.com/
78. https://cloverly.com/
79. In the Real World
80. https://webperf.xyz/
82. (201KB)
84. (417KB)
86. (213KB)
88. (423KB)
90. (435KB)
92. (11KB)
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
94. https://www.change.org/p/sustainable-servers-by-2024
95. https://www.sustainablewebmanifesto.com/
96. https://sustainableux.com/
97. https://climateaction.tech/
98. Sustainable websites are More performant More user-friendly More accessible More server-friendly More -friendly
99. We're hiring: wpvip.com/careers
100. Vielen dank!
101. Any questions? @jacklenox | jack@automattic.com
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
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