We talk a lot about the carbon footprint created from transport and its detrimental effects on the environment. We have a well justified call for lower emissions globally, and as humans, it is our moral responsibility to minimise our impact on the planet as much as possible. However, there is an aspect of our carbon footprint that is often overlooked. That being our digital footprint. We spend more time online, browsing, scrolling, watching videos and looking at a screen than ever before, yet the environmental impact of our digital behaviour is something that we don’t necessarily view as unsustainable.
Each website is very different, and there is a stark difference between the footprint created by a visit to a website. Reddit creates the most CO₂ at 13.05g CO₂ per page load, whereas Wikipedia produces only 0.04g CO₂ (1).
In the UK, the average car creates 202.6g CO₂ per mile (2). When we compare these massive transport emissions to a single browse of a website, it’s easy to dismiss and view our digital footprint as a non-issue.
But as a business owner, we all want our websites to flourish and gather thousands of monthly visitors. We want users to browse through our website, learn about us, and convert to a customer.
So, let’s assume that your website takes a user through the following journey to work with you:
According to Green Economy, the global average CO₂ per page load is approximately 1.76g (3). For this example, we’ll assume that each page on a website has this average footprint, equating to 5.28g of CO₂ per website session (home > services > contact).
Let’s also assume that you have 1000 monthly visitors per month taking this journey, creating 5.28kg of CO₂ per month or 63.36kg per year.
This annual 63.36kg of CO₂ equates to driving a car over 312 miles. Now, imagine if you have 10,000 monthly visitors, that’s equivalent to over 3120 miles. This is the invisible cost of an inefficient website built without sustainability in mind. By reframing our perspective on building a website, we can decrease our impact on the planet for businesses and customers alike. To help those who want to follow that path of sustainability, I have put together a list of my top tips for improving our impact and work towards a greener digital future.
The biggest source of website CO₂ that I come across is often images that are not optimised. A poorly compressed image on your page can outweigh the rest of the page. As such a quick fix, I recommend image compression and conversion as the first and most important step to take.
PNG and JPEG images are very common yet large typically file sizes. Both WebP and AVIF are web friendly formats and can achieve the same quality as PNG and JPEG while often reducing the file size of over 50%. A simple conversion done on either Webflow’s conversion feature, or one of many online converters can be the difference between a high and low digital footprint for a website.
For all vector based images, using SVG (Scalable Vector Graphic) is the best and safest option. This can include elements such as icons, logos, and illustrations. SVGs are code-based images making them tiny in size, and infinitely scalable without any quality loss. This means that using a 30px wide SVG image has the same impact as one at 1500px.
Compress your images to the largest size they will be displayed at before uploading them to Webflow. If the image element on your website has a display of 500px max width, save and export the image as 500px wide.
GIFs can be great for websites; but the big issue is their really big file size. A 10 second GIF at 30fps is essentially 300 images stacked and being loaded as a video. With the previously mentioned issues with images, you can likely see how this can be an issue! Luckily, Lotties exist. A Lottie is a vector-based animation. Similar to SVGs, a Lottie is an infinitely scalable, code-based file, and therefor comes with a very small file size.
The second tip to reducing the digital footprint of your website is using fonts efficiently and effectively. Every font file downloaded adds weight and slows down the page load. For a lower-carbon website, the goal here is simple: minimise the number of fonts to ensure the files that are downloaded have the smallest file size possible.
The most sustainable font to use is the one that your website user already has installed! Using a system font stack (system-ui) utilises the fonts already on the device, meaning that there is a zero-byte download. This is the single largest sustainable font-related tip possible. However, understandably this may not always be a viable option due to branding. But, if possible, go with the system-ui for areas such as the body text.
It’s always a good idea to use web friendly fonts on your website. Google Fonts is the best option for this, but hosting from Google directly creates an external call by creating a server request to Google Fonts. Luckily, you can download the font you need and upload it directly to your Webflow website.
Always upload your font as a WOFF2 (Web Open Font Format 2.0). Using WOFF2 can offer up to 30% better compression than its predecessor, WOFF.
Each font weight and style requires its own separate file that the browser must download. If your website only uses regular (400) and bold (700), avoid uploading light (300) or extra-bold (800). If you site only uses 2 font weights, and you have an extra 2 uploaded, the file size the that the browser has to load will likely double. It's a simple yet effective solution to minimising the effect fonts have on our website without sacrificing design or branding.
Clean code is green code! But a common theme that I notice throughout my clients websites is the misuse of classes. It’s a recurring theme for them to be ignored, and styles to be added manually for every element. On the surface, it’s an easy way to build, but that approach creates a huge amount of ‘code bloat’. Learning to utilise classes has a bit of a learning curve, but it’s a learning curve with a positive payoff! Not only does it let us create consistency in design and allow us to update a website faster, but it can also decrease the weight of the code, therefor decreasing its footprint.
Using a global class where possible is a game changer. Using fewer unique classes means a smaller CSS file. This allows for a faster load time, and reduces the ‘computational cost’, which translates to a lower footprint. Global classes can be used for all sorts of elements that will be reused across the website, from headings to paragraphs, divs to buttons and much more.
Using Webflow’s built-in ‘clean up’ tool is a great way to get rid of any unused styles. We are all guilty of creating styles that eventually get replaced, or that we don’t like and therefor change. But these classes still live within the CSS until we delete them! By clicking a single button, we can get rid of all unused styles and create cleaner, lighter, and therefore more sustainable code.
You can build the most sustainable website on the whole internet, but if it is powered by non-renewable energy, what’s the point? It may look great on the surface, but over the time, the carbon footprint of the host far outweighs the lightweight, optimised site. Choosing where your website ‘lives’ is one of the most important decisions to make for your website’s sustainability.
There are tons of options out there, many using 100% renewable energy and some using green credits to match their CO₂ output. As a Webflow designer, the limits to hosting are a blessing and a curse. Webflow limits where the site can be hosted, as everything is controlled through Webflow, which may be a struggle if you have a specific host that you REALLY want to use. However, the positive side of this is that Webflow uses AWS to host all of their websites. While no large corporation is perfect, the systemic shift AWS provides allows small businesses to access innovative green infrastructure that was previously impossible.
While niche hosts are great, and I support their contribution to a greener future, I often advocate for the systemic impact of AWS.
Whether you host through AWS, or one of the other brilliant hosts out there like GreenGeeks, Krystal, Eco Web Hosting, or Kualo, choosing a green host will have a positive affect on your websites footprint for years to come.
On a typical website, the default way of loading content (called eager loading) tries to download every bit of content on page load. All headings, images, links, videos, and scripts are requested at once. Content buried at the bottom of the page is prioritised right away, meaning that if a user only scrolls down to your second section before clicking a button, all the energy used to load the rest of the page has been wasted.
A more efficient approach to adopt is called ‘lazy loading’.
Lazy loading essentially loads content only as it is needed. Instead of one massive data dump, the site only loads the content that the user needs as they enter the website. As they scroll, the remaining content is loaded in. If a user on your website doesn’t scroll down to the footer, those elements are never loaded. This saves bandwidth, reduces server strain, and can even preserve the battery of your user’s device. Win-win-win!
Although lazy loading is great, it’s important to be strategic. Content at the top of the page, or ‘above the fold’ should always be set to eager loading. This ensures that the page doesn’t have a visible delay when it first opens.
Everything ‘below the fold’ can be set the lazy. If the website is built efficiently, there won’t be any delay in load times when scrolling. This balance provides a high-quality user experience while maintaining a minimal digital footprint.
One major element that we must not forget to give attention to is video! If images are the low hanging fruit, video is the entire tree. A single video if used inefficiently, can be the difference between a truly low carbon, and an energy hungry site. It’s important to be intentional with video, rather than it being a decorative element that brings no further value to our user.
The single best thing you can do to reduce the impact of a video, is removing the auto-play feature. If a large video plays the moment a user lands on the page, it can load more data than the rest of the site combined. If the user just scrolls past the video, that is a lot of unnecessary energy being used.
However, some platforms load the video regardless of auto-play being turned on or not, which can be a real pain! A YouTube video embed for example can be the difference between a website graded an A on Website Carbon, or an F. This calls for stronger action when utilising a video embed.
To truly control the carbon footprint of video, my solution to this is quite a simple one. I implement a custom ‘click-to-load’ approach, which ensures the video file only exists in the browser once the user actively chooses to interact with it.
This can be a great option as many users may not interact with the video on your website. By replacing the file with a simple script, an image, and a play button until the video is requested, we can help keep the site at a sustainable size unless the user wants to play the video.
Just as we use AVIF, WebP, or SVG for images, we use WebM for video. WebM is a modern, open-source format designed specifically for web videos. It allows us to compress a video while retaining the high quality seen in MP4.
Choosing a platform is an often overlooked choice for sustainability in running a website. The bulk of focus for sustainability focuses on hosting, but there is strong case for giving some thought to the platform the website is built on too. For a truly sustainable website, I personally advocate for an ‘all-in-one’ platform. My main reason for this is to avoid the trap of transparency.
Platforms like WordPress are clearly great! The majority of websites are built there for a good reason. The open-source model allows for such diverse and functional websites that might not be possible to build on other no-code platforms. However, an issue that is often overlooked with open-source platforms is the lack of transparency.
We can view this as our digital supply chain. As a sustainable business, we want to have transparency in where our products are coming from, how they are made, and to have an accurate idea of what the impact of it all is. With WordPress, we need to have multiple ‘suppliers’ to create a website with the functionality we need. These suppliers are in the form of third party plug-ins.
Plug-ins can be a blessing. They let us upgrade our websites to new levels, but the downside is that we don’t typically have the transparency in how they are themselves operated. We don’t know whether they use a green host for their own servers. This creates a ‘shadow’ footprint that is really difficult to measure.
With an all-in-one platform, it’s possible to remove – or at least minimise – that shadow footprint, and have more confidence in the true digital footprint that we are creating with a website. We know that all features are hosted using the platforms servers of choice, and we can offer more transparency in our digital supply-chain.
Every time a plug-in is added to a website, it adds more weight to the energy requirements. Many plug-ins can load heavy files every time somebody visits your website; this unnecessary data transfer can be a major source of carbon.
I – if you haven’t realised by now – advocate for Webflow, where all features like forms, interactions, SEO, and content management are native. They are built to work together on the same server without the extra connections between different pieces of software.
A website shouldn’t just be sustainable on launch. It should stay sustainable. On a platform like WordPress, we have to maintain and update plug-ins and software to ensure it stays functional. A single bad update, and the site can break. This can lead to hours of server-intensive troubleshooting and repairing.
As Webflow – and other all-in-one platforms – manage the software for us, the site can remain stable, secure, and it just works! Without the need to update, troubleshoot, and navigate the maze of hidden shadow carbon.
In 2026, AI has found itself in almost everything that we do as humans. From content generation (not this content, promise!) to proof reading. While it can be a great tool that makes our lives easier in many ways, it is notorious for its high energy and water usage.
To put it into perspective, a single image generated with AI can use as much energy as charging a smartphone (6). Generating a single 100 word email can use as much as 500ml of water in server cooling (7). That’s a lot of resources for a throw away image of a Ghibli style selfie or an email we could write ourselves!
I am far from being anti AI, and I think that it can be great for allowing people to learn new things and complete tasks that might otherwise be out of reach. It can be a real tempting solution when writing your own web or ad copy, creating your own content architecture, or marketing plan. But when building a sustainable website, it’s important to be aware of the environmental impacts of just a single prompt, or of a single image.
If we can create the content ourselves – or by hiring a professional when possible – we absolutely should if we want to stay as sustainable as possible.
I have another article that goes into more detail about the sustainable implications of AI right here!
Everything we’ve discussed so far leads to our last but not least step: verifying your sustainability efforts! Just as we can calculate the carbon footprint of a physical product, we can do the same with a website using a tool like websitecarbon.com.
Website Carbon is an essential tool for staying aligned with sustainability standards and giving us a ‘grade’ to work towards. Knowing how your website compares to the average - and the exact grams of CO₂ produced by each page - is a brilliant way to show your customers that you value sustainability in even the most overlooked areas.
When you have a score that you are proud of, you can display the grade in your footer as a badge of honour using their live embed. This isn’t just about showing off a high score, it’s about providing transparency in the form of live data. It gives your website visitors confidence, knowing that their interaction with your brand is as eco-friendly as possible.
Beyond your own site, displaying these results helps to raise awareness. It highlights the importance of our digital footprint and can ‘plant the seed’ in your customers’ minds about their own digital habits. When people see that it’s possible for a website to be optimised for the planet, they start to expect those same standards from every other brand they interact with - standards that you have set, and standards that they will now expect others to match.
___
As time goes on, our approach to sustainability will inevitably evolve. As new formats, new techniques, and new technologies emerge, our efforts to optimise for sustainability will return a greater yield! Just as it already has with the introduction of green hosting, AVIF, Lottie and WOFF2.
That is a wonderful thing, but it also means that we have to stay in the know about what we can do to keep our digital presence as sustainable as possible. As a Webflow designer and developer, i’ll be keeping up to date with these trends, and i’ll be updating this list - or maybe even creating a new one - so that you, I, and all of our customers and clients can build and support a greener future together.
References
