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. How better performing websites can help save the planet Jack

    Lenox WordCamp Bordeaux, March 2019
  2. Me 2009 - 2013: Startup/agency work 2013 - present: Automattic

    (WordPress.com VIP since 2015) 2017: UK parliamentary candidate for the Green Party
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Part I: The Problem

  10. The Internet has an enormous carbon footprint

  11. ...and it's rapidly growing

  12. The Internet produces about one billion tonnes of COâ‚‚ every

    year...
  13. ...and it's rising

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. Poorly performing websites are bad for the environment

  24. None
  25. None
  26. None
  27. Part II: The Solution

  28. Sustainable Web Design

  29. Sustainable Web Design 1. Performance 2. Usability 3. Discoverability 4.

    Green Hosting
  30. Sustainable Web Design 1. Performance 2. Usability 3. Discoverability 4.

    Green Hosting
  31. Performance and usability

  32. Simplify the user interface Background videos Social media embeds Carousels

  33. Get rid of them

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

  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
  36. None
  37. Use less script This button weighs 50 KB. A plain

    text link uses almost zero bytes.
  38. Images Use the correct image Compress images as much as

    possible Lazy load
  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.
  40. WebP 26% smaller than PNGs 25-34% smaller than JPGs Support

    animation
  41. None
  42. Compress

  43. None
  44. Lazy load

  45. None
  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
  47. Backend stuff Use HTTPS over HTTP2 Nginx with FastCGI Cache

    WP Super Cache gzip and brotli compression
  48. Sustainable Web Design 1. Performance 2. Usability 3. Discoverability 4.

    Green Hosting
  49. SEO (Search Engine Optimisation) WordPress SEO by Yoast All in

    One SEO Pack Neither of the above
  50. Accessibility Adopt an accessibility-first mentality Simple websites are, generally speaking,

    accessible by default Follow best practices
  51. Sustainable Web Design 1. Performance 2. Usability 3. Discoverability 4.

    Green Hosting
  52. None
  53. None
  54. None
  55. None
  56. None
  57. Part III: The Doing

  58. None
  59. None
  60. None
  61. None
  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
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. In the Real World

  70. None
  71. (417KB)

  72. None
  73. (409KB)

  74. None
  75. (379KB)

  76. None
  77. (213KB)

  78. None
  79. (435KB)

  80. None
  81. (11KB)

  82. In conclusion

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

    server-friendly More -friendly
  84. Merci beaucoup

  85. Any questions?* @jacklenox | jacklenox.com *Please don't ask me about

    Brexit
  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
  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