Save 37% off PRO during our Black Friday Sale! »

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.


Jack Lenox

June 22, 2019


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

    Lenox WordCamp Europe, Berlin, June 2019
  2. None

  4. Photo by Jan-Philipp Thiele on Unsplash

  5. Me 2009 - 2013: Startup/agency work 2013 - present: Automattic

    ( VIP since 2015) 2017: UK parliamentary candidate for the Green Party of England and Wales

  7. The Problem

  8. The Internet has an enormous carbon footprint


  10. ...and it's rapidly growing



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

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


  17. Sustainability should be a bigger priority, especially as the Internet

    expands into new territory.



  21. Poorly performing websites are bad for the environment





  26. None
  27. Sustainable Human-Computer Interaction (SHCI)








  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.
  37. Sustainable Web Design (SWD)

  38. Every byte transferred represents energy being consumed



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

  42. Photo by Hunters Race on Unsplash


  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:
  50. Translation: Don't use jQuery when you don't need to. Don't

    use JavaScript when CSS will do. Pro-tip: Check out
  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


  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

  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




  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

  72. None
  73. None

  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



  79. In the Real World


  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




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

    server-friendly More -friendly
  99. We're hiring:

  100. Vielen dank!

  101. Any questions? @jacklenox |

  102. Bibilography electricityMap: Internet Health Report: Greenpeace's ClickClean:

    "The average web page is 3MB. How much should we care?", Tammy Everts: "Designing for actual performance", Adam Silver: performance/ "Writing Less Damn Code", Heydon Pickering: damn-code "How I dropped 250KB of dead CSS weight with PurgeCSS", Sarah Dayan: 28821049fb
  103. Web Performance 101: The Green Web Foundation: SustyWP: WebPagetest: EcoGrader: WebsiteCarbon: Sustainable Servers petition: SustainableUX: Climate Action Tech: