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!
- 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
- 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
- Sustainable Web Manifesto: https://www.sustainablewebmanifesto.com/
- 17 ways to make your website more energy efficient: https://www.wholegraindigital.com/blog/website-energy-efficiency/
- Performance Budget Calculator: https://www.performancebudget.io/
- Website Carbon Calculator: https://www.websitecarbon.com/
- Green Web Foundation: https://www.thegreenwebfoundation.org