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

What WordPress developers can do about climate change

What WordPress developers can do about climate change

The Internet’s usage of dirty energy is a growing concern. The Internet’s data centres alone may already have the same CO₂ footprint as global air travel. For the first time, this year’s Internet Health Report by the Mozilla Foundation has explicitly stated that sustainability should be a bigger priority for the industry.

WordPress is the most widely used CMS on the Internet. As of April 2018, it powers 30.6% of the world’s top 10 million websites. This makes WordPress a concentrated target to promote the greening of the Internet.

In this talk, Jack will discuss the ideas, principles and emerging best practices of sustainable web design, and how they can be applied to WordPress websites.

Jack Lenox

August 10, 2018

More Decks by Jack Lenox

Other Decks in Technology


  1. What WordPress developers can do about climate change Jack Lenox

    WordCamp Norrköping, August 2018
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. Source: https://www.technologyreview.com/s/610457/at-this-rate-its-going-to-take-nearly-400-years-to-transform-the-energy-system/

  14. What do you mean? I’m a web developer. The web’s

    green right?
  15. No. Sorry.

  16. The Internet uses a colossal amount of electricity

  17. How much electricity?

  18. None
  19. None
  20. None
  21. How little? About 12-15%...

  22. None
  23. The Internet produces about one billion tonnes of CO₂ every

    year (and it's rising)
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. So what can I do?

  32. None
  33. None
  34. None
  35. None
  36. None
  37. Dieter Rams’ 10 Principles of Good Design 1. Good design

    is innovative 2. Good design makes a product useful 3. Good design is aesthetic 4. Good design makes a product understandable 5. Good design is unobtrusive 6. Good design is honest 7. Good design is long-lasting 8. Good design is thorough down to the last detail 9. Good design is environmentally friendly 10. Good design is as little as possible
  38. In essence, making websites sustainable means reducing the compute cycles

    required to serve them, and powering them with renewable energy
  39. Sustainable Web Design 1. Findability 2. Performance Optimisation 3. Design

    & User Experience 4. Green Hosting Source: https://sustainablewebdesign.org/
  40. 1. Findability “The easier content is to find, the fewer

    pages a user has to load to locate information. This means fewer server requests are made and that unnecessary page elements — like photos and videos, which take up a lot of bandwidth — don’t load, either. These small energy savings accumulate over time.” Source: https://sustainablewebdesign.org/
  41. 2. Performance Optimisation “Sustainability and page speed go hand-in-hand. When

    your website runs more efficiently, you use less processing power, which means that your site uses less energy and will have a lower carbon footprint. Your customers expect to get the content they want instantaneously, and efficient pages load more quickly, reducing your site’s bounce rate and keeping customers engaged and satisfied.” Source: https://sustainablewebdesign.org/
  42. 3. Design & User Experience “Sustainable design is design that

    is efficient and accessible. Creating good experiences for both mobile and desktop users improves accessibility because it makes it easy for people to access your site no matter what hardware they have. Mobile-first web design also helps you avoid loading large assets designed for desktop machines, which improves your site’s speed and energy efficiency.” Source: https://sustainablewebdesign.org/
  43. 4. Green Hosting “The servers that store the files that

    make up web pages require power 24 hours a day, so the single most impactful thing you can do to move toward a more sustainable website is use a hosting provider that runs on 100% renewable energy.” Source: https://sustainablewebdesign.org/
  44. None
  45. None
  46. What does your website really need? Carousels? Embedded videos? Endless

    sidebars? Big, heavy images?
  47. None
  48. A bit about good practice 1. Simplify the interface 2.

    Reduce code i. Create lean HTML ii. Simplify your design system iii. Use less script, use preprocessors responsibly, use content breakpoints 3. Images i. Use the right image (gif, png, or jpg?) ii. Smush the shit out of them iii. Use progressive rendering 4. Backend stuff i. async and defer , preload and prefetch ii. HTTPS over HTTP2 (and PHP 7.2) iii. ABC: Always Be Caching
  49. Taking this to an extreme...

  50. None
  51. None
  52. None
  53. None
  54. 246KB

  55. 6.7KB

  56. None
  57. None
  58. Do not go gentle into that good night. Rage, rage

    against the dying of the light. - Dylan Thomas
  59. Tack @jacklenox

  60. Några frågror?* @jacklenox * Snälla fråga inte på svenska, jag

    låtsas bara Slides available at: https://speakerdeck.com/jacklenox/what-wordpress-developers-can-do-about-climate-change