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.

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
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
23. Poorly performing websites are bad for the environment
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
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
42. Compress
44. Lazy load
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
57. Part III: The Doing
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
69. In the Real World
71. (417KB)
73. (409KB)
75. (379KB)
77. (213KB)
79. (435KB)
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