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. And the immense energy consumed by the Internet from non-renewable sources makes it the largest coal-fired machine on earth. For the first time, Mozilla’s 2018 Internet Health Report highlighted this growing problem, and stated that sustainability should be a bigger priority for the industry. This talk is about the practical steps that those in the WordPress community can take to reduce the environmental impact of their work and promote a better future.

C9a5478931da1bbdcc0be2800daa2915?s=128

Jack Lenox

March 23, 2019
Tweet

Transcript

  1. 1.
  2. 2.

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

    (WordPress.com VIP since 2015) 2017: UK parliamentary candidate for the Green Party
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 14.
  10. 15.
  11. 16.
  12. 17.
  13. 18.
  14. 19.
  15. 20.
  16. 21.
  17. 22.
  18. 24.
  19. 25.
  20. 26.
  21. 35.

    The most performant[, sustainable], accessible and easily maintainable feature of

    a website is the one that you don't make in the first place. - Heydon Pickering
  22. 36.
  23. 37.

    Use less script This button weighs 50 KB. A plain

    text link uses almost zero bytes.
  24. 39.

    The correct image... JPG: Still images, photography GIF: In the

    olden days used for animations, today should be avoided PNG-8: Icons (but SVG is probably better) PNG-24: Still images with transparency, generally to be avoided if possible SVG: Icons, logos, etc.
  25. 41.
  26. 42.
  27. 43.
  28. 44.
  29. 45.
  30. 46.

    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
  31. 47.

    Backend stuff Use HTTPS over HTTP2 Nginx with FastCGI Cache

    WP Super Cache gzip and brotli compression
  32. 52.
  33. 53.
  34. 54.
  35. 55.
  36. 56.
  37. 58.
  38. 59.
  39. 60.
  40. 61.
  41. 62.

    Taking this to an extreme No images No sidebar No

    embeds No menu navigation (it's on its own page) Almost no additional HTTP requests
  42. 63.
  43. 64.
  44. 65.
  45. 66.
  46. 67.
  47. 68.
  48. 70.
  49. 71.
  50. 72.
  51. 73.
  52. 74.
  53. 75.
  54. 76.
  55. 77.
  56. 78.
  57. 79.
  58. 80.
  59. 81.
  60. 86.

    Bibilography electricityMap: www.electricitymap.org Internet Health Report: internethealthreport.org Greenpeace's ClickClean: www.clickclean.org

    SustainableUX: sustainableux.com "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
  61. 87.

    ImageOptim: imageoptim.com "Lazy Loading Images and Video", Jeremy Wagner: developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-

    and-video/ The Green Web Foundation: www.thegreenwebfoundation.org SustyWP: sustywp.com WebPagetest: www.webpagetest.org Calibre: calibreapp.com SpeedCurve: speedcurve.com EcoGrader: ecograder.com ecometer: ecometer.org WebsiteCarbon: www.websitecarbon.com Sustainable Servers petition: www.change.org/p/sustainable-servers-by-2024