Who would’’t want an eco-friendly website?! You get to help save our planet while promoting your business? Win/win, right?
Well, unfortunately, eco-friendly websites, or green websites (the terminology is still all over the place!) have got a bit of a bad rep for being boring.
So, when we suggest creating a low carbon website for our clients, some say “Ew, no thanks!”.
Therefore, we felt we had to cover this topic and show the world that it is possible to have a low carbon website that’s beautiful, impactful and captivating.
What factors impact the carbon score of a website?
This is a blog post in itself, but for the purpose of this article, we’re going to focus on the big assets.
The major culprits for a carbon-intensive website are media assets – your videos, animations, and high-res images.
Incidentally, these are also usually the reasons for a very slow website. Sustainability and performance go hand-in-hand.
The problem is; videos, animations and high-res images are the assets that often contribute to how impressive a website is. They are often non-negotiable when it comes to most people.
How to optimise website assets for performance
Let’s face it; you’re not going to want to have a website without all these powerful visuals, so we need a way to ensure that when we do use these assets, they’re optimised.
What this means is that they’re small enough to run fast and not use up too much energy and emit excess carbon.
Videos:
The easiest way to tackle this problem is to host your video with a 3rd party – do not upload the video directly to your website.
We prefer to use the likes of YouTube or Vimeo and then just embed their link to the website. The video plays just as seamlessly without the extra resources being powered from your website.
However, remember the cardinal sin of sustainable web design: NEVER AUTOPLAY VIDEOS!
Images:
If you’ve had professional photos taken, you will be eager to display them proudly on your website. However, photographers provide images in huge file sizes and uploading these directly to your website will cause a whole host of problems.
So, always ensure you resize your images down to a smaller size that’s more appropriate for your website. You often only need them in a 600x400px size when displaying them on a webpage, so double-check what your requirements are.
Once they’re sized down, you can run them through a program such as Tiny PNG, which compresses the file size without losing the quality of the image.
Formats:
The file types matter a great deal when it comes to visual assets too. Since you will be uploading your videos to a third party platform, we won’t cover those formats here.
However, with images, it can make a big difference which format you choose.
Most people still use JPGs and PNGs on their websites, but the best formats for sustainable website design are AVIF and webp.
AVIF actually has better compression now, but is still not compatible on Safari and Edge, which is why many opt for webp.
You absolutely must be using these image formats if you want to ensure you have a low carbon website.
What are sustainable web design principles
This is where the balance comes in with aesthetic websites vs low carbon websites, because those who adhere very strictly to sustainable web design principles will often want to eliminate imagery altogether.
If you look up guides to building green websites, such as the Web Environmental Sustainability Guidelines by BIMA, then it will clearly state that you should only use images IF they add something to the user experience.
Therefore, if you’re using stock imagery, it probably doesn’t, because it’s not even your image.
Many people include images just to break up the text and thinks it looks nice, but this goes against sustainable web design principles.
However, truly low carbon websites do not need to be plain and boring.
We’re super proud of our website, for example – we have so much animation on each page, tons of original graphics and lots of high-res imagery from our client work. However, we’re still cleaner than 89% of the rest of the internet pages!
This is because we custom code all our elements and do not have templated files or themes.
Speed, UX and Sustainability
A green website = a fast website.
Building an eco-friendly website should mean building a high performing website.
Speed, UX and sustainability all go hand-in-hand.
If you start with what your user actually wants, you will have fewer things on your website. Many people just add “nice-to-haves” because they think it looks pretty or impressive. But actually, this doesn’t improve the UX.
So, stripping things back, creating a green website, will make things cleaner and faster.
Choosing green hosting
A simple way you can improve your website’s carbon score is to choose where you host your website.
We only use green hosting for all our clients and ones which are ethical.
Many providers claim to be eco-friendly website hosting but they just offset their carbon emissions without even trying to reduce their impact.
We work with hosting companies that use 100% renewable energy, ensuring we are producing truly low-carbon websites.
Spreading the word
We need to bust this myth that low-carbon websites are dull and often just plain text. Of course, some agencies choose to create their websites like that but we certainly don’t!
We also still use incredible CMSs like WordPress and are still able to achieve low levels of carbon, so it’s all possible if you know what you’re doing!
Make sure others know that you can indeed have a low carbon website that’s beautiful – just give them the link to our website ????