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 Slide

  2. View Slide

  3. http://blackle.com

    View Slide

  4. Photo by Jan-Philipp Thiele on Unsplash

    View Slide

  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

    View Slide

  6. https://mozillafestival.org/

    View Slide

  7. The Problem

    View Slide

  8. The Internet has an enormous carbon footprint

    View Slide

  9. http://www.clickclean.org/

    View Slide

  10. ...and it's rapidly growing

    View Slide

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

    View Slide

  12. https://www.electricitymap.org/

    View Slide

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

    View Slide

  14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. https://www.americaspledgeonclimate.com/

    View Slide

  20. http://www.clickclean.org/

    View Slide

  21. Poorly performing websites are bad for the environment

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. View Slide

  27. Sustainable Human-Computer Interaction (SHCI)

    View Slide

  28. https://loco2.com/

    View Slide

  29. https://loco2.com/

    View Slide

  30. https://www.gwr.com/

    View Slide

  31. https://www.gwr.com/

    View Slide

  32. https://www.mobike.com/

    View Slide

  33. https://untoldcoffee.co.uk/

    View Slide

  34. https://untoldcoffee.co.uk/

    View Slide

  35. Sustainable Interaction Design (SID)

    View Slide

  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

    View Slide

  37. Sustainable Web Design (SWD)

    View Slide

  38. Every byte transferred represents energy being consumed

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. Photo by Hunters Race on Unsplash

    View Slide

  43. https://www.electricitymap.org/

    View Slide

  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

    View Slide

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

    View Slide

  46. Photo by System 76

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  55. Tree shaking

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. https://www.thegreenwebfoundation.org/

    View Slide

  66. https://www.hetzner.de/

    View Slide

  67. https://www.dreamhost.com/

    View Slide

  68. https://cloud.google.com/

    View Slide

  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

    View Slide

  70. View Slide

  71. https://underscores.me/

    View Slide

  72. View Slide

  73. View Slide

  74. https://www.webpagetest.org/

    View Slide

  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

    View Slide

  76. https://ecograder.com/

    View Slide

  77. https://www.websitecarbon.com/

    View Slide

  78. https://cloverly.com/

    View Slide

  79. In the Real World

    View Slide

  80. https://webperf.xyz/

    View Slide

  81. View Slide

  82. (201KB)

    View Slide

  83. View Slide

  84. (417KB)

    View Slide

  85. View Slide

  86. (213KB)

    View Slide

  87. View Slide

  88. (423KB)

    View Slide

  89. View Slide

  90. (435KB)

    View Slide

  91. View Slide

  92. (11KB)

    View Slide

  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

    View Slide

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

    View Slide

  95. https://www.sustainablewebmanifesto.com/

    View Slide

  96. https://sustainableux.com/

    View Slide

  97. https://climateaction.tech/

    View Slide

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

    View Slide

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

    View Slide

  100. Vielen dank!

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide