A not useless guide to sustainable websites

Let’s shut up about the planet, all that doomsday panic and start with why you would want to make your website sustainable? You are building the website or paying for it, what’s in it for you?

More performance, more better. It will speed up your website, improving your productivity, your visitors will love the snappy website, resulting in higher conversion and Google gives you SEO bonus points. For high traffic sites it can even save money.

Oh yeah, it will make the planet happy. Since IT has a growing impact on earth because it uses a lot of energy. If we all chip in we can make a big impact.

You are not only helping the planet. It’s a valid business case.

Green hosting! Am I using that?

Using sustainable energy for your applications and websites have a great impact since servers use a lot of energy and are turned on day and night. It’s a good place to start.

Curious if you are using sustainable energy? The Green Web Foundation have a great tool to check that: The Green Web Check.

If not, that same foundation has a Green Web Directory. There you can find a lot off sustainable hosting providers, both local and global.

Is my website sustainable by using green hosting?

It’s a great start, but there is more to it than that. Having a resource munching chunky boy website will use a lot of energy and transfer slowly, even on green hosting.

Shall we get to the performance part where all the interesting things happen?

Optimising assets, small is fast

For a lot of projects this is where you can make a big difference. Assets can be chunky and waste a lot of bandwidth and resources. A bunch of tips:

• Minimise the amount of fonts you need and load, those hit hard (try to use max 3, but less is better).
• Use SVG’s where you can, they are small and scale well.
• Scale and crop images to the size you need, systems like WordPress have tooling for this and the srcset attribute can help switch size.
• Use modern formats for images and video’s, like WebP and WebM/AV1. Those offer improved compression and quality.
• Lazy loading images is a matter of using loading="lazy", just load what you need. You don’t need any scripts for this anymore.
• For video, only use autoplay if your really need to.
• Use compression (next up) and don’t load things you don’t need :)

Bonus for Tag Manager users: check all the third party scripts and tools you have. Do you use them? Do you get any value out of them? Periodically grooming is necessary. It’s not only about the assets you are loading, big data processing needs a lot of energy.

Serve it fast and small: cache and compression

Enable compression. All modern webservers have it, make sure you use it. Modern options like Brotli are better, but even GZIP or Deflate can make a big difference in bandwidth. Mobile visitors will thank you even more.

Caching depends on the project, but try to cache data that as close to the visitor as possible. For static assets like CSS/JS you could start with a proper cache header for the browser, reusing the downloaded file over and over.

Do you have a content page that has more reads than updates? Serve it statically from disk or CDN. A framework like Astro can statically generate to a CDN or a plugin like W3 Total Cache can serve WordPress pages from disk.

Keep your friends close, but your data closer

Talking about CDN’s. Think about your visitors, where do they come from? Do you need a global distributed multi zone setup with edge workers to serve your local bakery website?

Probably, but that’s your inner geek having fun. Don’t over use overkill solutions and keep your servers close to your users. It will save resources for both compute and transfer, keeping latencies low.

Stop using JavaScript, CSS is awesome!

A lot of devs love writing JavaScript, doing all kinds of fancy animations, page transitions and other shenanigans. Not using vanilla JS or CSS, but big frameworks or libraries. That includes jQuery. You don’t need jQuery to get a DOM element and toggle a class! Don’t even get me started on Next.js.

I got worked up, sorry. And honestly, those websites can be beautiful. The thing is that vanilla JS and CSS are great nowadays. Full of features that enable you to build all kinds of cool interactive components, animations and even page transitions.

By using those you can write, ship and run less code. It’s all handled by your browser. Even smoother animations without blocking the main thread.

You don’t have to make it boring

I’ve seen a lot of articles talking about using dark colours, system fonts and saying you should drop every little bell or whistle.

That sounds like a public service announcement to make life dull. I don’t want that. Websites, apps, design, tech, should be fun, inspiring, alive.

I’m not saying you have to build stupid features without any value that uses a lot of resources, be mindful, but don’t be boring.

Okay, bye.

That’s it for now, but it is a topic that interests me. Expect more articles about the nitty gritty details. Any questions or tips? Please drop a comment or send me a DM on Xwitter or LinkedIn!