The internet is not a magical cloud given by gods; it's a physical network of data centers that consume vast amounts of energy. As a result, our digital activities make up nearly 4% of total global CO₂ emissions. In other words, every website, including yours, has a carbon footprint, and releases CO₂ whenever you click.
But how can you help save the planet? This article presents a real-world case study, showing how a few simple optimization steps can reduce a website's CO₂ emissions per click by a staggering 86.4%.
Step 1: Choosing the Right Image Format
Visual elements are often the heaviest parts of a website. They are usually causing the highest amount of traffic in internet. The first step in our case study involved compressing large images and converting them to modern, efficient formats like WebP. Initially, the website's data transfer was 17.2 MB, resulting in a carbon footprint of 2.72g of CO₂ per visit. After optimizing the images with a tool like Image Guy, the total data size dropped immediately to just 2 MB.
This single step was a game-changer, immediately slashed the carbon footprint to 0.40g of CO₂ per visit.
Step 2: Implementing Lazy Loading
Also, why load images that the user can't see? "Lazy loading" is a technique that tells the browser to only load images when the user scrolls down to them. This dramatically reduces the initial amount of data transferred. Implementing this is as simple as adding an attribute to your image tag:
<img src="your-image.webp" loading="lazy">Step 3: On-Demand Loading for Scripts
Just like images, non-critical JavaScript libraries don't need to be loaded immediately. In our case study, a library for cropping images was only loaded when a user actually clicked the "Crop" button. This ensures that users who don't use this feature never have to download the extra file, saving data and energy, thus causing less internet traffic.
The Final Result: An 86.4% Reduction
By applying these frontend optimization techniques—image compression, lazy loading, and on-demand script loading—the website's carbon footprint was further reduced to just 0.37g of CO₂ per click. This journey proves that building a more sustainable website is not only possible but also straightforward, and coupled with a simpler web architecture.
Ready to reduce your own website's carbon footprint? Start by optimizing your images today!
Thanks for reading!This article was adapted from its original version, first published on Medium.