How better performing websites can help save the planet

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.

C9a5478931da1bbdcc0be2800daa2915?s=128

Jack Lenox

June 22, 2019
Tweet

Transcript

  1. How better performing websites can help save the planet Jack

    Lenox WordCamp Europe, Berlin, June 2019
  2. None
  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
  14. None
  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

  26. None
  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
  70. None
  71. https://underscores.me/

  72. None
  73. None
  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/

  81. None
  82. (201KB)

  83. None
  84. (417KB)

  85. None
  86. (213KB)

  87. None
  88. (423KB)

  89. None
  90. (435KB)

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