Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Jack Lenox

Other Decks in Technology

Transcript

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

    View full-size slide

  2. http://blackle.com

    View full-size slide

  3. Photo by Jan-Philipp Thiele on Unsplash

    View full-size slide

  4. 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 full-size slide

  5. https://mozillafestival.org/

    View full-size slide

  6. The Internet has an enormous carbon footprint

    View full-size slide

  7. http://www.clickclean.org/

    View full-size slide

  8. ...and it's rapidly growing

    View full-size slide

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

    View full-size slide

  10. https://www.electricitymap.org/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. https://www.americaspledgeonclimate.com/

    View full-size slide

  17. http://www.clickclean.org/

    View full-size slide

  18. Poorly performing websites are bad for the environment

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Sustainable Human-Computer Interaction (SHCI)

    View full-size slide

  24. https://loco2.com/

    View full-size slide

  25. https://loco2.com/

    View full-size slide

  26. https://www.gwr.com/

    View full-size slide

  27. https://www.gwr.com/

    View full-size slide

  28. https://www.mobike.com/

    View full-size slide

  29. https://untoldcoffee.co.uk/

    View full-size slide

  30. https://untoldcoffee.co.uk/

    View full-size slide

  31. Sustainable Interaction Design (SID)

    View full-size slide

  32. 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 full-size slide

  33. Sustainable Web Design (SWD)

    View full-size slide

  34. Every byte transferred represents energy being consumed

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Photo by Hunters Race on Unsplash

    View full-size slide

  39. https://www.electricitymap.org/

    View full-size slide

  40. 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 full-size slide

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

    View full-size slide

  42. Photo by System 76

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. 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 full-size slide

  51. Tree shaking

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. https://www.thegreenwebfoundation.org/

    View full-size slide

  62. https://www.hetzner.de/

    View full-size slide

  63. https://www.dreamhost.com/

    View full-size slide

  64. https://cloud.google.com/

    View full-size slide

  65. 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 full-size slide

  66. https://underscores.me/

    View full-size slide

  67. https://www.webpagetest.org/

    View full-size slide

  68. 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 full-size slide

  69. https://ecograder.com/

    View full-size slide

  70. https://www.websitecarbon.com/

    View full-size slide

  71. https://cloverly.com/

    View full-size slide

  72. In the Real World

    View full-size slide

  73. https://webperf.xyz/

    View full-size slide

  74. 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 full-size slide

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

    View full-size slide

  76. https://www.sustainablewebmanifesto.com/

    View full-size slide

  77. https://sustainableux.com/

    View full-size slide

  78. https://climateaction.tech/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. Vielen dank!

    View full-size slide

  82. Any questions?
    @jacklenox | [email protected]

    View full-size slide

  83. 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 full-size slide

  84. 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 full-size slide