Sustainability in digital developments
The development of modern technologies continuously creates a multitude of new digitization possibilities. Digital change is simplifying many processes in business and society. All the advantages cover-up that digital technologies can also have negative influences. You can name the rebound effect at this point. In particular, the effects on our environment have so far been completely ignored.
Digital technologies are currently responsible for 4 % of global greenhouse gas emissions. This amount is comparable to the amount of greenhouse gas emissions caused by air traffic (3.5 %). This value will increase considerably in the future. Furthermore the energy demand for the internet will grow by 9 % annually.
Against this background, we must bring digitization and sustainable development together. The merger is necessary to enable a digital, sustainable future.
The internet, in particular, plays an essential role in this context. The average size of a website in 2020 was 2 megabytes. This value increased by an average of 37.0% from 2017 to 2020.
Visiting a website with a size of 2 megabytes generates 2 g CO2. 2 g is a low number in itself. If a user visits the page 10,000 times, the amount of CO2 produced is roughly the same as the amount that seven trees can absorb in one year. An electric car could drive 1.8 km with this energy.
In November 2020, amazon.de, a site with approximately three megabytes, had 609 million page views. 609 million page views correspond to nearly 26.726 tons of CO2.
Newsletter
Hello and welcome! Don't miss out on crucial web performance insights, plus the latest on accessibility and sustainability, delivered directly to your inbox. Elevate your craft in creating fast, user-friendly, and eco-conscious websites. Sign up now to access seasoned expertise and the freshest news!
The total of all website visits and the websites’ size has a significant impact on CO2 emissions. Keeping the total number of page views as low as possible generally contradicts the primary purpose of a website. You can influence the website size without damaging your business. But is the topic of sustainability of websites in companies already taken into account? For this purpose, I carried out an analysis with selected companies in my neighborhood.
It might also be interesting:
Sustainability analysis of selected companies
As a consultant for sustainable digital development, I examined many websites for speed and sustainability. I made the experience that there is hardly any awareness of the importance of a sustainable and fast website in small and medium-sized enterprises (SMEs). Speed and sustainability are often not yet used as software quality features in the implementation of web projects. However, many are not aware that companies could boost their online business with a fast and sustainable website. I have a blog post about “How can performance improve conversion?” if you want to know more.
In my analysis for this blog post, I examined four companies and three authorities. I analyzed their carbon footprint and website speed. I don’t want to pillory these companies and authorities. The aim is to make the potential for the speed and sustainability of the pages visible. Also, I want to show that local companies benefit from a fast and sustainable website and big ones.
CO2 test results
I used websitecarbon, and the Chrome DevTools to gather the data for my analysis of the carbon footprint. The data may vary if you repeat the tests, as the values always reflect the website’s current state.
Website | Page weight | Page weight | Page weight | Page weight | g CO2 / pageview | amount of trees (1) | electic km (2) |
---|---|---|---|---|---|---|---|
https://www.bmu.de/ | 4.8 MB | 4.8 MB | 2.3 MB | 3 MB | 1.68g | 10 trees | 2.716 km (424 kWh) |
https://bayern.de/ | 4.7 MB | 4.7 MB | 3.4 MB | 3.9 MB | 2.11g | 12 trees | 3.419 km (534 kWh) |
https://www.kempten.de/ | 4.3 MB | 4.3 MB | 3.2 MB | 3.2 MB | 2.28g | 13 trees | 3.684 km (576 kWh) |
https://auew.de/ | 7.2 MB | 7.8 MB | 5.1 MB | 5.3 MB | 2.68g | 15 trees | 4.782 km (747 kWh) |
https://www.feneberg.de/ | 5.9 MB | 6.6 MB | 5.4 MB | 5.6 MB | 3.40g | 19 trees | 5.504 km (860 kWh) |
https://www.allgaeuer-zeitung.de/ | 7,8 MB | 14,5 MB | 6,7 MB | 10,4 MB | 0.81g | 5 trees | 1.307 km (204 kWh) |
https://www.soloplan.com/ | 27.2 MB | 27.4 MB | 24.3 MB | 24.3 MB | 14.52g | 80 trees | 23.475 km (3,668 kWh) |
1 The amount of carbon that X trees absorb in one year (10,000 page views).
2 The amount of electricity needed to drive an electric car X km (10,000 page views).
The analysis results show that all companies far exceed the average page size of 2 MB. Besides, twice as much data is loaded from some websites if no advertising blocker is activated in the browser. Even the top-rated page is extensive, with 5.4MB and far away from sustainable. This fact suggests that sustainable web development has not yet been a focus for companies.
CO2 emissions per page view in grams
Page weight with / without adblocker
While an ad blocker does not make a big difference for the loaded data at any other company, the value almost doubles at www.allgaeuer-zeitung.de.
Web Performance / Page Speed Results
I gathered the data to analyze all of the websites’ speed with webpagetest.org, PageSpeed Insights, and web.dev/measure.
Website | LCP | Critical rendering path | FCP | Speed Index | Costs |
---|---|---|---|---|---|
https://www.bmu.de/ | 5.365s | 255 KB JS + 74 KB CSS = 329 KB | 1.3s | 3.889s | $$$$$ |
https://bayern.de/ | 3.5s | 371 KB JS + 83 KB CSS = 454 KB | 2.7s | 1.697s | $$$$$ |
https://www.kempten.de/ | 2.6s | 703 KB JS + 51 KB CSS = 754 KB | 1.9s | 3.718s | $$$$$ |
https://auew.de/ | 3,7s | 1,1 MB JS + 116 KB CSS = 1,2 MB | 3s | 4,720s | $$$$$ |
https://www.feneberg.de/ | 2,8s | 292 KB JS + 51 KB CSS = 343 KB | 1,5s | 7,0s | $$$$$ |
https://www.allgaeuer-zeitung.de/ | 3.1s | 1.7 MB JS + 131 KB CSS = 2,1 MB | 2.2s | 2.776s | $$$– |
https://www.soloplan.com/ | 8.8s | 909 KB JS + 209 KB CSS = 1,1 MB | 8.4s | 13.123s | $$$$$ |
The metrics Largest Contentful Paint and First Contentful Paint are indicators of large elements on the website. Almost all of the sites have a high LCP score. This fact suggests that companies use large images on their websites.
LCP is also interesting for companies. Since it is one of the Core Web Vital from Google, it influences the Google search ranking.
The values for the critical rendering path are too large for all websites. The critical rendering path describes a browser process. The browser needs to load all the necessary data before it can display the first pixel. If the loaded data is large, the process will take a long time. As a result, the site is not fast and less sustainable. A good value for all critical resources (especially CSS, JS) is 170 KB. None of the pages stays below this value.
Many factors make a heavy website. Some are particularly common. For example, many websites transfer uncompressed or not required data. Besides, most of the large amounts of data are images, especially hero images. These intend to attract the site visitors’ attention and want to encourage the user to take a specific action. Additionally, external fonts, CSS, and JavaScript do their part to make the website bigger, slower, and less sustainable.
The causes of the problem areas mentioned are different. Sometimes it is a lack of knowledge during development. Sometimes the web design, content, and layout do not leave the developer the choice to work entirely sustainably. Everyone who is involved in the development of the page also has an impact on the page load time and sustainability.
Even if the website speed and size are important factors, one cannot assume that the website will remain fast and sustainable in the future. Every website is fundamentally at risk of regression when people work on it. Preventing regression can sometimes be more effective and less expensive than optimizing the speed of the website.
How does regression happen? Sometimes, web design and development are sustainable, but the content editor or website owner adds a big picture. Also, often we underestimate the influence of third-party scripts.
I wrote a blog post about managing third-party scripts on websites if you want to know more about it.
Strategies for a fast and sustainable website
A new web project’s sustainability must be an essential factor right from the beginning. Make speed and sustainability acceptance criteria for yourself, the commissioned web developer, or the authorized agency.
For example, ask yourself during the design process whether you need a big hero picture. Is it essential to achieve business goals by specifically influencing user behavior, or does it just look good?
If your website is already online, I recommend a reliable speed and data analysis. You can hire an expert to do this. Based on the analysis results, an expert can draw up a concept. This concept describes optimizations, measurements, speed monitoring, infrastructure, or responsibilities for speed and sustainability.
Continuously monitor the speed and size of your website. Set up continuous tests for your website. You can also create your speed monitoring workflow. For example, you can have daily, weekly or monthly reports or notify a developer if your site has a performance problem. If you need help with continuously monitoring page speed, please feel free to contact me.
For the technical implementation of a sustainable website, I have instructions for ten quick wins you can use in 5 minutes. I also wrote a blog series to make your website fast for the first display. Within these series, you read about how to keep the critical rendering path as small as possible.
In general, you can find many tips and tricks on the topics of speed and sustainability on my blog. Feel free to contact me if you need help.
Conclusion
The effects of digital change on the environment are significant and will continue to increase in the future. There is still insufficient awareness of the importance of sustainability in digital development. All professions involved in the development of a website have an influence on the sustainability of the website. Often similar factors cause the unnecessary increase of the page size. With the strategies outlined, you can more easily implement and maintain a sustainable website.
If you like this article, smile for a moment, share it, follow me, check out my RSS feed, and subscribe to my newsletter.
Cheers Marc