Green Code: A Blueprint for Eco-Friendly Websites

By now you'll have heard statistics that the emissions caused by digital are equivalent to the airline industry, and that since 2010 internet users have increased by 60% and internet traffic has increased by 440%.

Other scary stats can be found online, such as data centres in Ireland using a fifth of all the country's electricity and the carbon output of digital being the same as Hong Kong, Singapore, Bangladesh, The Philippines, Sri Lanka, and Mongolia rolled into one.

So... what can we as technologists do about it?

Writing green code

At this point you might be thinking to yourself "Rick, that's all well and good, but how do I actually write my code differently to make it more green?!". That's a good question!

If you're already working towards making your site both accessible and performant, you are probably a good chunk of the way towards writing green code.

However, you're not always going to be able to work on these things from scratch on brand new greenfield sites with massive budgets; sometimes you need to help out those clients on limited budgets, or those sites you only get a few hours a month to work on. What do you do then?

There are some great resources out there to help. The Green Software Foundation are doing amazing work to provide information on standards, tooling and best practice in this space and are well worth a follow.

Similarly, a wonderful group of people called the Sustainable Web Design Community Group have been working with the W3C—creators of standards and guidelines for the web—to draft standards that we should adhere to when creating digital products and services. Their first draft of the Web Sustainability Guidelines was released in September 2023 and goes into great detail of the kinds of considerations we should make when designing, building and maintaining websites.

Introducing the Umbraco Sustainability Best Practices

Umbraco is also joining the conversation! After some great conversations at Umbraco Spark back in March, and an application process, the Sustainability Team was announced in May. Since then we have been meeting monthly (including a couple of times in person in Odense) to discuss how we can have an impact on our favourite Friendly CMS.

With a number of people on the team having given sustainability talks over the past 18 months, conversation quickly turned to getting information out into the open about what developers, engineers and content editors could do to make a difference. People far and wide have now heard about the state of the world (see the top of this article too!) and want to make a difference, so what can we actually do?

That's where our Sustainability Best Practices come in! Taking all the information we know and have shared, and where the industry as a whole is at, we have come up with some best practices for writing green code when working with Umbraco.

The Low Impact Manifesto

Organic Basic's Low Impact Manifesto brilliantly captures our active goals and objectives like no other summary I've come across:

A Low Impact website:

1. Does not load any images before they are actively requested by the user.
2. Minimizes the power consumption on the users device.
3. Adapts to reflect the amount of renewable energy it’s currently running on.
4. Informs the user of the impact of their browsing behaviour.
5. Does not make use of videos.
6. Stores data locally on the user’s device to minimize data transfer.
7. Compresses all data to the greatest extent possible.
8. Loads only the most crucial programming scripts, frameworks and cookies.
9. Limits the amount of light emitted by the screen.
10. Optimizes and limits the use of custom fonts.

Their demo Shopify website adheres to all of their own rules, even going as far as shutting down completely when the power grid it runs on hits a high carbon intensity! If you can do anything at all to impact the carbon output of your site, these are the kinds of things to start with.

So where should we start? Here are a few of my favourite tips and tricks to use to get you started...

Practical examples

Keep your version of Umbraco up-to-date

Not only is this good practice for making sure you're on top of security patches, each new version of .NET is significantly more performant than the last.

On the release of .NET 5, Microsoft announced it would be up to 50% faster than the previous version. As such, when Umbraco released version 9 it was expected that this version was between 1.5x and 2x more performant than Umbraco v8. For organizations, this meant upgrading their site from v8 to v9 had the potential to halve their hosting costs. From these metrics we at Nexer hypothesized that upgrading to v9 could lower the overall carbon emissions of a website.

Upon running benchmarks on a number of client sites, we saw a significant average reduction in carbon usage of 50% across most pages, and each new version will continue to help with this reduction.

Stephen Toub's deep dives into each new version of .NET's performance are really great long reads if you're interested in that kind of thing.

Combined with Umbraco's newer versioning strategy, upgrades are much easier to perform and can be done in hours rather than the days they used to take!

Lazy load resources

This is one of the easiest things you can do to make your site more performant and sustainable. Browser-native lazy loading has been supported in evergreen browsers for quite some time now, and is one of the best quick wins you can implement for "below the fold" images and iframes.

There are also considerations that need to be made for HTML5 video or JS-heavy plugins that can be activated on click with a façade, rather than loading as soon as the page is rendered.

Performance test your code

One of my favourite lesser known features of Umbraco is the MiniProfiler. This built-in tool will let you add ?umbDebug=true to any URL when running in debug mode (with Umbraco:CMS:Hosting:Debug set to true)  and get a snapshot of how long code is taking to execute. 

You can then dig in to our C# methods or Razor code and fix anything that's long-running, or overcomplicated.

Similarly, make sure you're following Umbraco's best practice for types of code to avoid! The Common Pitfalls & Anti-Patterns documentation page is a favourite of mine and may help you get out of some bad habits that help speed your code up.

CDNs and edge computing

Services like Cloudflare have made the idea of using a CDN—or moving your cached content closer to where users are consuming it—so much easier. Their free plan includes fast DNS resolution, CDN, free SSL certificates and DDoS protection right out of the box!

Dark mode

Support for dark mode has been a first class citizen on the web since late 2018, and is supported by all evergreen browsers.

I think a lot of people think that adding dark mode support is going to be a big piece of work, but why not add it progressively? Component by component, testing as you go, until you get something you're happy with.

Start by creating a basic dark colour palette that matches your brand colours, and iterate from there! Start with background colours, headers, footers, and add more and more as you test and release.

Give your users a choice

Winner of this year's first Best Green Solution at Codegarden, herning.dk, was well chosen because of its ability to reduce the climate footprint of the site with a simple toggle appearing on every page!

When turned on, colours and content are simplified, images are removed and the site functions just as well, if not even better!

Sites like the UK Government are well known for their well thought out UX and being very heavily content driven. Whilst all the sites we work on can't be as simple as this, are there ways you can communicate without requiring a massive hero banner that uses an uncompressed JPEG!

What next?

Great question! We're just skimming the surface here. There's a ton more time, effort, and yes, money you could invest to make your site greener. Lucky for you, the web's filled with places to stay in the know about all this green-tech goodness! 🌱

• Umbraco Sustainability Best Practices
• Web Sustainability Guidelines
• Green Software Foundation
• Sustainable Web Manifesto

But my biggest encouragement is just to do something. Don't let this be just information. We have the power at our fingertips to help create a better world for future generations, so let's use that power for good.