Many people are unaware of the impact the internet has on the environment. Every time you visit a web page, data – which includes code, text, images and video – is sent to your device from a server elsewhere in the world. And because this uses up electricity, it carries the cost of carbon emissions.
You can use the handy Website Carbon Calculator to estimate the carbon emissions of your website.
Indeed it does, and although fair strides have been made to decarbonise electricity generation, many countries are still far from where they need to be. In the UK for instance, the percentage of electricity generated from renewable sources, such as solar and wind power, fluctuates daily due to the weather conditions. See live stats on the National Grid via this handy visualisation website. During 2021, 41% of electricity generation in the UK was from fossil fuel sources. Yikes!
There’s plenty you can do to lessen the impact of your website and it’s mainly to do with ‘performance’. Making your website more efficient and faster to load by avoiding wasteful bloat and using best-practice optimisations is key.
Here’s how I can help you make your website more sustainable.
It’s important that your website is built on a solid foundation with modern standards that ensure faster performance and a superior workflow for efficient development.
The modern way for sites to be built is with Jamstack architecture, which I talk about in this article. This is ideal for most of my clients. With such ‘static’ websites, pre-rendered content is served via a Content Distribution Network (CDN) for blazing-fast load times, better security (with fewer potential points of attack) and flexibility for your data with effortless scalability. This also has advantages for Search Engine Optimisation (SEO) as your visitors (and consequently search engine crawlers) will more quickly see the content of your site, rather than an empty page while it waits to load.
This site is built using the Nuxt framework, which allows for static site-builds with a powerful developer-friendly experience (so, this means the best of both worlds). There are many other options with some of the most well-known being Next, Eleventy and the more recent Astro, with Jamstack.org having a more comprehensive list.
Here are some ways I use to trim down on unnecessary code.
The Google Chrome browser offers a performance and accessibility report via Lighthouse in the Developer tools. Open a site in Incognito mode (so your downloaded extensions won’t affect the result) and press ‘F12’ or open via the ‘More Tools’ > ‘Developer Tools’ menu. You can then run a report to see what score the website gets out of 100 in four main categories – Performance, Accessibility, Best Practices and Search Engine Optimisation (SEO).
You should aim for green (a score higher than 90) in all four categories. The great thing is this report is very detailed and has information about the issue and how to fix it.
It’s important to think about the methodology you will use to write your CSS. Work with its advantages (the cascade and inheritance) to enable simplicity and thus smaller file sizes of code delivered to the end user. CUBE CSS has emerged as an effective and easy-to-follow methodology, and is one I am increasingly embracing for new projects.
Even if you optimise your code, there’s still third-party scripts that can hamper your site’s performance. For example, things like Google Analytics can increase data transfer file-sizes and requests. Are my third parties green? has a great tool to check this particular area. If there’s one (or several!) culprits, then consider alternative services – Plausible for analytics, for instance – or even if you can remove them entirely.
One of the most resource-intensive elements on a web page is images – something that can take up the bulk of your bandwidth. If you don’t optimise your images, they will increase loading times, but luckily there are several things you can do that will help.
There’s no point having massive pixel sizes if even the biggest screens only ever reach a particular maximum width. Avoid any big discrepancies between the original size of the image and the rendered size (what size your image ends up being on the page), as that will result in wasted bandwidth.
The JPG format (with the quality down to a comfortable level so as not to affect how it looks) and PNG are good options. However, the WebP format is usually the best choice, as it can reduce file sizes (compared to JPG and PNG) by as much as 25-35%, while offering both lossless and lossy compression (the latter is the technique used in JPG to reduce file sizes). SVGs are great for vector images (such as icons or logos) and will not lose quality no matter the width or height. These can also be animated.
It’s also important to serve images from a Content Distribution Network (CDN) provider where possible (if your website isn’t already hosted on such a platform), with one of the most well-known being Cloudinary. If your images are served from a CDN then you will reap the benefits of data being provided to your site visitors from geographically suitable servers and thus reducing load times.
Browser support for lazy loading images is becoming increasingly well supported. The
loading="lazy" attribute can be added to your HTML image tags to defer the image from being loaded until it is scrolled into view. You can check cross-browser support on caniuse.com.
If the above sounds like it involves a lot of work, there are ways to dynamically alter your images so you don’t have to continuously open Photoshop. As an example, since this site is built using the Nuxt framework, there is an add-on module called nuxt/image that can transform images and do much of the optimisation work for you.
If you have the option of using fonts hosted on a Content Distribution Network (CDN) then use it. Google fonts are typically served in this way and have become popular due to their ease of use and wide choice.
For any custom fonts that are hosted locally, make sure you use Web Open Font Format (WOFF). If possible, subset your fonts or, in other words, remove the characters you know you won’t use. Font Squirrel has an online Webfont Generator tool so you can alter your fonts with fine-grain control, but be careful not to inhibit the functionality of your font!
Also consider whether you really need custom fonts. As a typography nerd I love a great typeface, but there are merits to using a ‘system font stack’. These days there are many well-designed fonts included with devices, so you can minimise the loading times of a custom font. See systemfontstack.com for a great list of fonts for your CSS.
When it comes to making your website more sustainable, there’s a lot to consider, and it’s certainly an on-going learning process. I can help improve your website and make it better for the planet, so feel free to get in touch!