Digital technology is estimated to account for 2 to 4% of global carbon emissions. Here are six ways we build sustainable websites with a much smaller carbon footprint.
All the ‘unseen’ data is collected, processed, stored, and exchanged in vast data centres around the world. The servers that power them run hot. In turn, they’re cooled by giant cooling systems powered by electricity. Many of them still run largely on fossil fuels.
As web developers, we try to reduce the energy consumption and environmental impact of websites by creating energy-efficient websites. Milk Moon Studio is a small Webflow studio, and as Webflow designers the impact we can make is small, but by employing some of the methods below we've been able to bring down the carbon footprint of our pages and those of some of our clients.
To create sustainable, energy-efficient websites, we follow these best practices for sustainable web design:
- Optimise images to reduce file size. (Tips: If you need to upload images, use a tool like TinyPNG before you upload them to your site).
- Be strategic with videos. (Tips: a simple video with no background will be lower resolution, try embedding videos directly into your site, and don’t set them to autoplay. We’ve also written about optimising Vimeo background videos in Webflow, which only loads the video when it scrolls into view.)
- Lazy load for images and media. (Lazy loading means loading images and other media only as it’s required. Side Note: This saves on energy consumption and helps websites to load quicker, which is an added bonus for your SEO. More on that in our post on how page speed drives business success.)
- Web caching. (Caching involves downloading shared page elements, such as JavaScript, CSS and images, and storing them closer to the user or in the user's browser. When the user revisits the page, they can retrieve this data from the cache location rather than querying the web server again.) If you’d like to see this in action, download the DrFlare Chrome extension and try looking at the www.milkmoonstudio.com site. We use a combination of edge caching, browser caching, next-gen formats and image optimisation, and the full setup is in our guide to optimising Webflow with Cloudflare (our original post on caching Webflow with Cloudflare is still there too).
- Delete what you don’t need. (The more streamlined your site, the less energy it eats up.)
- Choose a green web host (Finding a company that employs renewable energy goes a long way to minimising the environmental impact of your website). Unfortunately Webflow does not provide the possibility of exclusive green hosting, yet, but Amazon says it matched 100% of the electricity it uses with renewable energy in 2023. Milk Moon however runs almost exclusively on green energy. Our site is cached on the Cloudflare network, which Cloudflare says is powered by renewable energy, and our assets are cached and optimised by Cloudflare Workers. More on Cloudflare and renewable energy. You can see our traffic for a 24-hour period, 99.97% cached on Cloudflare!
Web technology has the potential to bring huge benefits to society and the environment, but only if we use it wisely. Not only does optimising give the end user a better user experience, but you’re doing a bit for the planet.
Sustainable web design: quick answers
What is sustainable web design?
Sustainable web design means building a website that uses as little energy as it can, so it has a smaller carbon footprint. In practice that is the six steps above: smaller images, sensible video, lazy loading, caching, deleting what you don’t need and a green web host.
Does a website really have a carbon footprint?
Yes. Every page view asks a server in a data centre to do work, and those servers run hot and need cooling, which takes electricity. Many of them still run largely on fossil fuels, so a lighter, cached site means less work for those servers and less energy used.
Does caching make a website more sustainable?
Yes, because a cached page or file is served from a location closer to the visitor, or from their own browser, instead of being fetched from the web server again each time. Our own site is 99.97% cached on Cloudflare over a 24-hour period.
How do I choose a green web host?
Look for a company that uses renewable energy, and ask which parts of its network run on it. We use Cloudflare’s network for caching, and Cloudflare says that network is powered by renewable energy.
