10 tips to make your Umbraco site more sustainable

Why sustainability matters?

Climate change is no longer a distant threat, it's here, and our planet is feeling the heat. From rising sea levels to extreme weather events, the way we produce and consume energy is fundamentally unsustainable.

How does this affect the tech world?

You might not think your website has much to do with melting ice caps, but here's the reality: the internet now accounts for roughly 4% of global carbon emissions, putting it on par with the airline industry. [ref]

Every page load, every image served, every video streamed requires energy. If we're serious about tackling climate change, the tech industry needs to step up.

So what can we do about it?

Thankfully, there are loads of quick wins we can implement right now to make our websites significantly more sustainable. Small tweaks to how we build and optimise sites can dramatically reduce unnecessary carbon emissions.

And if you're working with Umbraco, you're in luck, there are ready-made packages and solutions that make this whole process far easier than you might think.

1. Keep your framework and software up to date

Newer versions of frameworks and libraries are typically more lightweight, performant and energy efficient than older ones.

With each new release of .NET, the framework becomes considerably more performant and efficient. The improvements aren't just about fancy new features, they're about fundamental optimisations in how the code runs behind the scenes.

This means your applications can handle more traffic, load pages faster, and do all of this whilst using less energy.

The good news for Umbraco developers is that Umbraco now mirrors the .NET release cycle, making upgrades far more straightforward.

Umbraco 17, which dropped just last month, runs on .NET 10 and takes full advantage of all the performance, stability and sustainability improvements that come with it. So if you've been putting off that upgrade, now's the perfect time to get current and reap the benefits.

2. Optimise Images

Images are often the biggest culprits when it comes to bloated websites, but there are some great quick wins here:

Use modern image formats

Serve WebP or AVIF instead of traditional JPEGs and PNGs. These formats are significantly smaller whilst maintaining excellent visual quality, meaning faster load times and less data transfer.

Implement responsive crops

Use picture tags with multiple crop sizes so you're not forcing a mobile user to download a massive desktop-sized image. Different screen sizes need different image dimensions, so serve what's appropriate for each device.

Enable lazy loading

If an image isn't visible when the page loads, don't bother downloading it until the user scrolls to it. This saves bandwidth and energy, especially when users might never scroll down to see those images anyway.

Use low quality image placeholders (LQIP)

Load tiny, blurred versions of images instantly to maintain your page structure, then replace them with the full quality version as it loads. This is particularly important for users on slower connections, the web should be accessible to everyone, not just those with lightning-fast broadband.

The good news is that the Slimsy package by Jeavon handles all of this out of the box. Install it, update your views, and you're done. It's been around for ages and does about 90% of the heavy lifting for image optimisation. It even supports the AVIF format, which Umbraco doesn't natively support yet, and there's already a v17-compatible version ready to go.

3. Be clever with your use of media

Avoid unnecessary videos, disable auto-play where possible, and consider converting short auto-playing videos into animated images instead.

Video is great for storytelling, but it's also incredibly energy-intensive. Every second of auto-playing video content is burning through bandwidth and processing power, often for users who didn't ask for it and aren't even watching.

If you've got a short looping video that's purely decorative (think background animations or subtle effects), convert it to an animated WebP or even a well-optimised GIF. You'll slash the file size dramatically whilst achieving the same visual effect.

Please, disable auto-play wherever you can. Let users choose whether they want to load and watch that content, it's better for sustainability, better for accessibility, and honestly, better for user experience too.

4. Reduce third-party scripts and trackers

You might be surprised at just how many third-party scripts are lurking on your website. Analytics tools, advertising pixels, social media widgets, chat plugins, they all add up fast.

Each one makes additional HTTP requests, loads external JavaScript, and consumes energy on both the server and client side.

Pop open your browser's dev tools, hit the Network tab, and have a proper look at what's being loaded.

You'll probably find scripts you forgot you added, tracking codes from old campaigns, or tools that nobody's actually using anymore. Be ruthless, audit what's genuinely necessary and bin the rest.

Not only will this reduce your carbon footprint, but your pages will load faster and your users will have a snappier experience. It's a win all round.

5. Proper caching and CDN (Content Delivery Network) usage

Every time someone requests a page from your website, that request has to travel to your server, wherever it happens to be hosted.

If your server's in London and your user is in The Democratic Republic of Congo, that's a long journey consuming quite a bit of energy. This is where CDNs like Azure Front Door or Cloudflare come in properly handy.

They cache your assets (even full pages) on data centres distributed around the world, meaning users can grab content from whichever location is closest to them. The result? Faster load times significantly less energy consumed per request.

Tools like Cloudflare take this even further by offering full HTML page caching, not just static assets. This means the vast majority of requests to your website can be handled by the CDN itself, dramatically reducing the load on your origin server.

Our Cogworks team have a package that helps automatically purge stale content from your CloudFlare cache. (V17 version coming soon)

Less server load means less energy consumption, users get their content from a data centre just down the road rather than halfway across the planet. It's a straightforward win for both performance sustainability.

6. Use less AI-generated images

AI image generation might seem like a convenient shortcut, but it comes with a hefty environmental cost that we're only just beginning to understand.

The computational power required to generate images through AI models is massive, consuming significant amounts of energy with each request.

Whilst we're still scratching the surface of the full impact, early research suggests it's far more energy-intensive than most people realise.

The good news is there are loads of cool alternatives out there. Stock image libraries like Unsplash, Pexels, and Pixabay offer thousands of high-quality, free images.

If you need something more specific, commissioning a photographer or illustrator not only supports creative professionals but also produces genuinely unique content for your brand. Yes, it might take a bit more effort than typing a prompt into an AI tool, but the environmental payoff is worth it.

This goes for everything from background images and demo content to author pictures on a blog site. If you can source or create real imagery instead, that's the more sustainable choice.

For more on the sustainability impact of AI usage, the Umbraco community's very own James Hobbs gave a great talk at CodeGarden entitled "Is ChatGPT Killing the Penguins?" which is well worth a watch for anyone interested in this topic.

7. Update infrastructure to scale-to-zero containers

So your containers only run when needed, rather than sitting idle.

Recent versions of Umbraco are fully compatible with containerisation, which opens up some cool opportunities for more sustainable hosting.

Instead of traditional web apps that run 24/7 regardless of whether anyone's using them, you can now deploy Umbraco sites on container apps that scale to zero. The concept is simple but powerful: when your website isn't being used, it scales down to nothing.

No servers running, no energy consumed, no charges racking up. Then, when someone hits the URL, it automatically spins back up in seconds.

This is perfect for non-production environments like development, staging, and UAT sites, or even load-balanced CMS back office instances.

These don't need to be running round the clock, so why waste energy keeping them online when nobody's using them? The entire process, both the spinning up and scaling down, is handled automatically without any manual intervention.

This approach has never been easier to implement and honestly, it's fast becoming an ethical obligation. Too often, sustainability conversations focus entirely on the front end of websites whilst ignoring the infrastructure behind the scenes.

Moving to containerised hosting could make a massive difference to your overall carbon footprint, and it's a change that benefits both the planet and your hosting bill.

8. Efficient coding and reducing duplicate code

Bloated, repetitive code isn't just harder to maintain, it's also less sustainable. Every unnecessary line of code that gets executed is wasting processing power and energy.

Take a proper look at your codebase and identify areas where you're repeating yourself.

• Can those three similar methods be consolidated into one?
• Are you fetching the same data multiple times when you could cache it?
• Is that massive controller doing the work of five smaller, more focused ones?

Refactoring might feel like a luxury when you're under pressure to deliver features, but cleaner, more efficient code runs faster, uses less memory, and ultimately consumes less energy. Plus, it makes your life easier when you inevitably have to come back and maintain it 6 months down the line.

Minify your work

Compress your CSS, JavaScript and HTML to reduce file sizes.

Minifying your CSS, JavaScript and HTML strips out all the unnecessary whitespace, comments and verbose formatting that makes code readable for humans but bloats file sizes.

Smaller files mean less data transfer, which means less energy consumed with every page load.

9. Offer dark mode

On OLED screens (which most modern smartphones use), dark mode can significantly reduce display power consumption.

Dark mode's sustainability benefits are real but a bit more nuanced than you might think. On OLED and AMOLED screens, which are standard on most modern smartphones and some laptops, dark mode genuinely saves energy. These displays work by lighting up individual pixels, so when a pixel is showing black, it's actually turned off completely. The darker your interface, the fewer pixels are lit, and the less power consumed. The savings can be quite significant, particularly for users who have their brightness turned up.

However, here's the catch: for LCD screens, which are still everywhere on desktops and older devices, dark mode makes virtually no difference. LCDs have a constant backlight that stays on regardless of what's being displayed, so a black pixel uses roughly the same energy as a white one.

So is it worth implementing? Yes, but the energy savings can be modest and device-dependent, so treat dark mode as one part of a broader sustainability strategy rather than a headline feature.

10. Use static site generation where possible

Normally, with Umbraco and other CMS platforms, pages get built on the fly every time someone requests them. That's the beauty of having a CMS; content changes frequently, so pages are generated at runtime to reflect the latest updates.

But here's the thing: static sites are significantly more performant because the HTML is pre-generated and ready to serve. No database queries, no server-side processing, just pure HTML files sitting there waiting to be delivered.

They're faster, more compact, and crucially, far more sustainable because they require so much less computational effort.

Static sites are also easier to host. You don't need a complicated web app setup, you can stick them on platforms like Vercel, Netlify, or even blob storage. Job done.

Now, this tip isn't quite as quick to implement as some of the others in this article. It might require some rebuilding or even waiting for a fresh project to start from scratch.

But if you're serious about sustainability and have the opportunity, it's definitely worth considering a static front end powered by Umbraco's Content Delivery API.

Over the last few years, headless integrations have become much more straightforward. You can build a static front end using Next.js or whatever framework you fancy, pull content from Umbraco's API, and generate lightning-fast, incredibly sustainable web pages.

The good news is there are already helpful tools out there to help with this like:

• Phil Whittaker recently released his headless implementation of Clean Starter Kit with a Next.js front end
• Sam Mullins created the XStatic package (which generates a static version of your Umbraco website straight from the back office).

Tools like these make it genuinely achievable to move towards fully headless, statically-built websites whilst keeping all the benefits of a CMS for content management.

TL;DR: The Umbraco Sustainability Cheat Sheet

• Use the latest Umbraco version
• Install Slimsy for automatic image optimisation
• Avoid auto-play videos
• Audit and remove unnecessary third-party scripts
• Implement CDN caching
• Use real images instead of AI-generated ones
• Host on scale-to-zero containers
• Keep your code lean and efficient
• Minify your CSS, JavaScript and HTML
• Offer dark mode/theme
• Have a static frontend