How to improve your website's carbon footprint
Share on:
A climate-friendly Internet
Climate protection is the task of the century. Not only since the latest IPCC report has it become clear that we must radically transform our society in order to still achieve the 1.5 degree target: only if the world becomes climate-neutral by 2050 will it still be possible Reduce global warming to 1.4°C by removing CO2 from the atmosphere.
Climate neutrality by 2050 is not an easy goal. Forgoing emissions can have far-reaching consequences in some places: in developing countries, a large proportion of greenhouse gas emissions come from agriculture, which of course cannot be avoided. It is therefore all the more important to rigorously reduce emissions wherever they are not necessary. Each of us should be aware of the responsibility and critically question our own way of life: Where do I produce emissions with my actions? What can I possibly do without?
As a web developer, my eyes inevitably fall on the Internet. The Shift Project, a Parisian think tank focusing on the energy transition, has examined the influence of the Internet on the climate and published the results in the March 2019 report "Lean ICT" - Towards Digital Sobriety. It estimates that the internet is responsible for 3.7% of total greenhouse gas emissions. This is comparable to global air travel. And it can be assumed that this share will increase significantly over the next 20 years as a result of digitization. The report assumes an annual increase of 9%. It is all the more important that we also make the Internet as climate-friendly as possible. In contrast to air traffic, however, this topic is relatively rarely noticed by the public.
We at flank 7 would like to do our part by paying attention to the carbon footprint of the websites we develop in our work. As I wrote earlier, this is also one of the reasons why we recommend the Jamstack to most of our customers. But why is a Jamstack website usually more climate-friendly than a classic website? To do this, it is important to first understand how the carbon footprint of your website can be generally measured and improved.
How can you measure the carbon footprint of your website?
Strictly speaking, the carbon footprint of your website cannot be measured, but it can be estimated relatively well. There are various tools that can make such an estimate, such as the Website Carbon Calculator or EcoPing. But how do these tools work?
The Website Carbon Calculator estimates your website's carbon footprint based on five metrics:
How much data is transferred when your website loads?
How much energy does this data consume? The data centers, the telecommunications network and the end devices of the users consume a certain amount of energy per transmitted byte. The calculator uses an average value of 1.8 kWh per gigabyte.
What energy sources do the data centers use? If a data center obtains part of its electricity from renewable energy, the calculator reduces the CO2 emissions accordingly. Since the calculator is of course not able to know the energy source of the telecommunications network and the end devices, it assumes the standard power grid here.
What is the CO2 intensity of the energy consumed? Here the calculator uses the international average: 475 grams of CO2 per kWh for conventional energy and 33 grams of CO2 per kWh for renewable energy.
How many users visit your website? The carbon footprint of a single page view can be estimated from the previous key figures. Multiplied by the number of annual page views, this results in the carbon footprint of your website.
But what can you do now if the Website Carbon Calculator certifies that your website has a relatively large carbon footprint? On the one hand, you can compensate for the CO2. The calculator itself gives you a few suggestions here and also tells you how many trees you would need to plant to balance your site. But providers such as ClimatePartner can also help you to calculate and offset the exact CO2 emissions of your entire company (and not just the website).
How can you improve the carbon footprint of your website?
On the other hand, you should also try to improve the carbon footprint of your website. The main way to do this is to reduce the amount of data transferred. There are different set screws here:
The amount of data your website transfers per pageload or per second.
The average time it takes users to reach their goal on your website.
The number of users for whom your website is not relevant.
I deliberately formulated the last two points in this way. Of course you should not try to simply reduce the session duration of your users or the number of your users. That would improve the carbon footprint, but above all it would damage your company.
Instead, it's about getting users to their destination as quickly as possible. And users for whom your website is not relevant should notice this as early as possible. Preferably, of course, before they even go to your website. This is not only in the interest of the user, but also in that of Google.
Specifically, optimizations in these areas can help:
SEO: The better your website is optimized for search engines, the more precisely Google and co. Show your website to the right target group. This reduces the number of irrelevant users on your website.
User Experience: A good UX ensures that there are as few obstacles as possible on your website and that your users reach their goals quickly. If a user first has to click through many confusing subpages to do what he/she intends to do, then the session duration increases unnecessarily. Good UX also includes good content that provides users with the information they are looking for without having to read long, unstructured articles.
Design: The majority of the data on a website often consists of images, fonts and videos. Of course, your website should still look good and not completely do without such elements. But it can help to question some images, videos and fonts: Does each image, video and font really add value to the design? Could individual images perhaps be replaced with vector graphics or CSS? Are the images properly optimized, compressed and in an efficient format (WebP)? And are all imported fonts actually used? Are modern web font formats such as WOFF used?
Clean code, plugins and scripts: Your website developers should take care to write efficient code and only install plugins that are really necessary. Are there any old tracking scripts on your website that are no longer needed? Does your website use optimizations like Tree-Shaking, Lazy Loading or Deferring von non-critical CSS?
Caching: Caching ensures that your website is not completely reloaded every time a returning user visits your website again.
Performance marketing: If you place ads, whether on Google, on social media or in display networks, you should of course always set your targeting in such a way that only relevant clicks are generated as far as possible.
Apart from these points, you can also make sure to choose a hoster that is as energy-efficient as possible. The so-called PUE value (Power Usage Effectiveness) is decisive here. This is formed from the total energy consumption of a data center divided by the energy consumption of the computers operated there. The further the PUE value is above 1, the more energy is required for external tasks such as cooling. The average here is a PUE of 1.67. In contrast, Google's particularly efficient data centers have a PUE value of just 1.11.
The problem with the optimization measures just described quickly becomes clear: it seems to be extremely time-consuming to optimize a classic website in terms of climate friendliness. This is where a Jamstack website can help.
Why the Jamstack is the best way to reduce your site's carbon footprint
Jamstack websites are generally more climate-friendly than classic websites.
What exactly the Jamstack is, you can read here. In summary, with the Jamstack approach, websites are built in advance with a Static Site Generator (SSG) and then delivered at run time (when a user visits the site) as a finished static website via a Content Delivery Network (CDN). This means that each user is only transferred "ready" HTML, CSS and JavaScript.
Traditional websites, on the other hand, are only built at run time by sending multiple requests to the backend server each time a user visits the website. This is extremely inefficient and nowadays only necessary for a few, very dynamic websites. Each of these requests to the server causes additional CO2 emissions, which in most cases could be avoided.
In addition, the Jamstack also makes it possible to deliver the entire website via a CDN. A CDN is a network of servers that use edge computing to distribute content around the world and at high speed. This content is hosted on a central Origin Server and cached from there on a large number of Edge Nodes distributed around the world. Each user then gets the content delivered from the nearest edge node. This reduces the distance the data has to travel as much as possible. This also reduces energy consumption and thus CO2 emissions. Classic websites can (and should) also use CDNs. However, only to deliver larger content such as images and fonts. Static Jamstack sites, on the other hand, can be distributed entirely this way.
In addition, many of the optimizations described in the previous chapter are already included in our Jamstack websites:
SEO: In contrast to single page applications, Jamstack websites are also easy to read for SEO crawlers.
User Experience: The loading times of a Jamstack website are hardly noticeable. Logically, this speed reduces the time it takes users to reach their destination.
Design: We use the SSG (Static Site Generator) Gatsby.js for our Jamstack websites. Gatsby already takes care of many of the optimizations to images, videos and fonts when building the website. For example, Gatsby automatically generates smaller versions of all images so smartphone and tablet users don't have to download desktop-sized images.
Clean code, plugins and scripts: Gatsby takes care of lazy loading and tree shaking. And we are happy to take care of efficient code and superfluous plugins and scripts.
Caching: We do the caching with Netlify.
The Jamstack only has no influence on the targeting of your performance marketing. But we are also happy to help you here.
The low-hanging fruit in the fight against the climate crisis
In its report, The Shift Project calls on companies to “digital sobriety” – in other words, digital abstinence. Both on an individual and collective level, everyone should question their purchasing and consumption behavior of digital products and services with regard to the CO2 balance. If companies want to have a new website built, they should therefore ask themselves: Which features will help my users to reach their goal faster? And do I really need a server and database for this, or does a static Jamstack website actually cover all my needs? In my experience, most dynamic content works just as well with static Jamstack sites.
Example company news: Most of the companies I know have a news subpage, but only rarely publish new articles there. Does it really make sense that a new request is sent to the server for each page view in order to retrieve the current articles? A Jamstack website, on the other hand, is rebuilt as soon as the company publishes a new article (automatically thanks to webhooks). After that, only static HTML, CSS and JavaScript is delivered with each page view, without further requests to a server.
Classic websites are therefore often inefficient and produce CO2 emissions for features that hardly offer any added value compared to the Jamstack variant. And in 2020 only about 1% of all websites used the Jamstack!
No, the Jamstack does not make sense for all websites. But for a large chunk of the 99% of sites that aren't using the Jamstack yet, they are. Therefore, in my opinion, the Jamstack is the absolute low-hanging fruit in the fight against CO2 emissions from websites.
And the best thing about it is: While climate protection in other areas often goes hand in hand with doing without, this is not the case at all when switching to the jamstack! Your website will also be significantly faster, more scalable, and more secure. So you get an all-round better and faster website that meets all your needs and is also better for the climate.
