Now entering the Webthropocene — how to minimize your website’s carbon footprint

Boldium recently released our new website, and we’re proud to say that our homepage is cleaner than 88% of sites tested on websitecarbon.com — emitting just 0.15g of CO2 per page view.

But what do we mean when we talk about eco-friendly websites? How much of an impact do websites really have on the environment? And how does one make a more environmentally friendly website?

Well, let’s talk about it.

Did you know we need to cut 60 percent of our net global emissions by 2060 in order to stabilize the climate and prevent catastrophic effects from global climate change? And that’s a conservative estimate.

When you think of the major industries contributing to those emissions, a few likely suspects come to mind — the energy industry, aviation, agriculture, etc. But there’s one contributor we often forget about — global internet usage contributes to about 3.7% of global carbon emissions. That’s about the same amount of carbon emissions as the entire aviation industry. Due to an increase in bandwidth-hungry habits like music and video streaming, this percentage is estimated to double by 2025.

The internet is one of the most amazing, open, powerful, and revelatory platforms that humanity has ever created. It’s the Gutenberg press on steroids, the new industrial revolution. But to paraphrase Spiderman, with great power comes great responsibility. With the stakes growing higher and more tangible by the day, what can we do as web developers and designers to rise to the challenge? What can we do to avoid succumbing to the tragedy of the commons, and keep the web open, accessible, and sustainable for everyone?

As it turns out, quite a bit.

The power of compounding returns

In February of 2020, a web developer named Danny Von Kooten decided to update a popular Wordpress plugin that he created and maintains, Mailchimp for Wordpress. The change? Remove one, 20kb javascript dependency. The impact? An estimated reduction in global emissions of 59kg CO2 per month.

The web is an exponential, compounding platform, and small changes can make a big impact. A single webpage can reach tens or hundreds of thousands of users. A popular plugin, library, or utility, etc can reach just as many, if not more. So one, 20kb reduction in a popular plugin can lead to ongoing, significant reductions in global emissions.

Small decreases in page weight for websites can snowball into big reductions in emissions

And when you reduce complexity in one area, it compounds into others — a 20kb reduction in javascript isn’t just 20kbs less for the end user — it’s 20kb less on the server, 20kb less on the CDN, 20kb less for the user, and, in the case of Javascript (one of the most CPU-intensive assets we can serve on the web), many saved computational cycles. The net effect is far larger than the initial reduction.

It’s important to note that websites aren’t just things, they’re organisms — they go out into the world, surviving for years (or sometimes decades), growing and evolving with time. As the architects of organisms that reach thousands of users, we have a great responsibility. The web should be open and accessible to all, regardless of ability — and it should be as low-impact on the planet as we can manage.

Every time someone visits a page we’ve built, it creates carbon emissions. If we can reduce how much energy the websites we build use — even by a little — we can have a large, compounding impact over time.

So, how do we make an impact?

For developers

Make environmental impact part of your metrics and performance budget

At Boldium, we’ve been incorporating performance and accessibility metrics from Google Lighthouse into our development and code review process. Within the last year or so, we started including scores from websitecarbon.com into that process as well.

As with any other metric, your site’s carbon footprint should be checked and measured periodically, to prevent it from degrading over time. Many developers do this already with the performance metrics — why should the environment be any different? Seeing the carbon impact of your work reflected back at you forms a feedback loop, allowing you to perceive your work differently and in a new light. It can bring a whole new meaning to the word “code smell”!

Minimize JS usage, where possible

Javascript is (generally speaking) one of the most computationally expensive things we can bring into the front-end. If you need to use it, try to do so as efficiently as possible, with clean and concise code and by leveraging non-thread-blocking solutions like IntersectionObservers over expensive solutions like polling. Minimize third party javascript wherever you can.

Learn to love CSS! If you can do it in CSS, without bringing in JS, do it! If you can do it mostly in CSS, and only bring in JS for small things (e.g. intersection observers), do that! The more you can avoid javascript, the more energy efficient you can make your website.

Soon, we’ll have CSS Houdini, which will blur these lines a little bit and create a whole new world of possibilities.

Optimize everything!

Optimize your code to be more efficient and performant. Optimize your images and media to be as small as they can be (services like Cloudinary and ImageKit can do a great job of automating this process). Optimize how and when you load media (lazy-loaded, whenever possible). Consider statically generated sites where possible.

Do you need a bigger framework like React or Vue? Do what you can to reduce its impact. Consider static mode, if your framework provides one.Lazy load your dependencies (Vue, React). Lazily hydrate your components (Vue, React). Really, be “lazy” with all sorts of stuff (where it makes sense) — but don’t be lazy with your code!

For designers

Designers! You, too, have a role and can make a great impact with your craft. Everything from your use of imagery to the color palette you create (some colors use less energy on OLED screens) to the fonts you choose can have a very real impact on the environmental friendliness of your design. If you’re looking for a more detailed list, sustainablewebdesign.org has a fantastic one — and we here at Boldium have a few things of our own to add!

Imagery

Precompressing your images with a tool like ImageOptim, Squoosh, or SVGOMG will make you a web developer’s best-friend, and help to reduce the carbon emissions of your design.

Rich, detailed photographs with a lot of fine detail will be harder to efficiently compress than simpler photos or vector graphics — use JPEGs (generally) for the former, SVGs for the latter. Precompressing your images with a tool like ImageOptim, Squoosh, or SVGOMG will make you a web developer’s best-friend — strive for a balance between acceptable quality (at the intended viewing size) and small file size. Remember, kilobytes matter!

Variable fonts

Variable fonts are fonts that have configurable, interpolatable properties. What are these properties? They can be anything! Ranging from simple things like font weight to more creative and unique parameters such as facial features or distortion.

With variable fonts, instead of having a different font file for each variation of the font — bold, italic, etc, you can now have one font file that allows you to render a huge variety of weights, slants, etc.

This isn’t only great for performance, it also opens up a whole new world of creative possibilities! Ever wanted something in-between “bold” and “extra bold”? Variable fonts will let you do that. Ever wanted to smoothly animate a property of a font? From upright to italic, light to bold, or anything in between? Variable fonts can let you do that, too!

For everyone else

Have a website, for yourself or for your company? Test it with websitecarbon.com. Is your score lower than you’d like? Talk to your designers and developers about ways to improve your site’s efficiency, change your host to one that uses sustainable energy where possible, or perform carbon offsetting by planting trees or purchasing carbon credits.

Use Youtube, or other streaming services? Youtube will let you set a default quality level — consider setting it to the lowest reasonable setting, and only increasing the quality when you need it. Netflix has a similar option.

The web can be sustainable, and in making it sustainable, we can ensure that its treasures are available and accessible to all, now and into the future. The web is the largest, publicly-accessible library we have ever known. It’s worth asking ourselves — what can we do to make sure that it lasts, for generations to come?

Resources

• Test your own website at www.websitecarbon.com
• Sustainablewebdesign.org is a fantastic resource, with detailed strategies you can employ as a designer, developer, or company leader.
• A Book Apart has a whole book on it!