Skip to end of metadata
Go to start of metadata

If the internet were a country, it would be the 7th largest polluter globally. - Sustainable Web Manifesto

More people are gaining internet access and increasing usage, and page weight is growing a lot, especially on mobile devices.

How does a website consume energy?

  • The computer it's sitting on draws electricity
  • Devices that display it require electricity

The typical page load produces about 3 grams of CO2. A website with 100,000 pageviews per month might produce 360k of CO2 emissions per year - about the same as burning 41 gallons of gas.

How can we mitigate this?

  • Hosting and infrastructure
    • Websites require a lot of supporting infrastructure that is always running even if no one's visiting.
    • Traditionally we've had to overprovision for traffic - predict how much space we need / traffic we might get and build a big machine to suit. Today we can use virtual machines and other tools to decrease how much hardware we need.
    • Cloud and data center providers are committing to reduce their carbon footprint.
    • Newer versions of software and frameworks reduce energy consumption - keep stuff updated!
  • Design
    • 76.2% of a page's total weight is imagery, video, and custom fonts. Cut back on these and improve efficiency. Images alone make up 65% of the page weight. Use them appropriately, size them sensibly.
    • Don't use autoplay on videos.
    • SEO makes searching easier and faster, which reduces the energy users expend to find your content.
    • Use darker colors - they require less energy. Blue consumes 25% more energy than red or green! Provide a dark mode for your users.
    • Set a page weight budget. https://www.performancebudget.io/
    • Scale images to be the size at which they should display - don't make the browser scale them
  • Development
    • JavaScript is more energy-intensive than other code
    • Watch your extensions, plugins, tracking scripts, etc. Use modular libraries to avoid unused code
    • Use CSS instead of JS for animations and interactions
    • Webkit now has gauges of your site's CPU usage etc
    • Use modern file formats like WOFF, WOFF2, WebP
    • Use system fonts
    • Limit video length and compress video
    • Use CDNs, static sites, AMP, progressive web apps, client side caching - these prevent re-rendering which saves energy
    • Block bad bots - 24.1% of internet traffic in 2019 was from bad bots - these waste energy

Resources