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

    How better performing websites can help save the planet Jack

    Lenox WordCamp Europe, Berlin, June 2019
  2. 2.
  3. 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
  4. 14.
  5. 26.
  6. 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
  7. 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
  8. 47.
  9. 48.
  10. 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
  11. 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
  12. 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
  13. 57.

    Use less script This button weighs 50 KB. A plain

    text link uses almost zero bytes.
  14. 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
  15. 60.

    Backend stuff Use HTTPS over HTTP2 Nginx with FastCGI Cache

    WP Super Cache gzip and brotli compression
  16. 62.
  17. 64.
  18. 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
  19. 70.
  20. 72.
  21. 73.
  22. 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
  23. 81.
  24. 82.
  25. 83.
  26. 84.
  27. 85.
  28. 86.
  29. 87.
  30. 88.
  31. 89.
  32. 90.
  33. 91.
  34. 92.
  35. 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
  36. 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
  37. 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