The image above shows two previous versions of the main page of carbon.crane.hu. What happened between the two versions? The difference may not be so obvious at first glance, but we reduced the carbon footprint of the original website to its seventeenth part by the time Carbon.Crane was launched. Let us show you how we achieved it.
Since reducing our environmental impact is an exceptionally important issue for us, we were naturally willing to minimize the carbon footprint of the carbon.crane.hu website as well. Especially since the self-developed Website Carbon Monitor® is now also part of our product range.
As step zero, we used the Website Carbon Calculator to see how big the carbon footprint of the initial version of the site was compared to the websites included in the calculator’s database at the time. We were not satisfied with the result. However, we didn’t want to change the content so we had to turn to some tricky carbon reduction techniques. Let’s see what we did and why, step by step!
- We reduced the number of large items.
In order to minimize the carbon emissions generated during individual page loadings we reduced the use of resources that require larger data transfers. This also includes the application of various CSS and JavaScript files, images and fonts. - We used system fonts wherever possible.
Web fonts can improve the appearance of a website but they also require more energy. They have to be downloaded by the browser every time the page is loaded if they are not already installed locally on the user’s device. In order to avoid this, we have replaced the vast majority of the originally used web fonts with system fonts, typically found on all devices. - We optimized the size of the images.
The larger an image is, the more energy is required to load it, and this also results in a greater carbon footprint. At the same time there are countless tools available for free to reduce the resolution of an image while preserving the image quality. Among other things we used TinyPNG for this purpose and then replaced the original images with the resulting ones. - We minimized the code.
Source code minification also played an important role in carbon footprint reduction. What does this mean? With the help of a tool developed for this purpose, we removed those unnecessary components from the code (e.g.: spaces, comments), which helped our programmers read the code, but slowed down loading due to the larger file size, thereby increasing the page’s CO2e emissions. - We optimized loading.
We have optimized loading on the Carbon.Crane blog interface by adding the “infinite scroll” function. Thanks to this move the page only loads for as long as the user is scrolling down, and the lower data traffic achieved in this way means lower CO2e emissions.
And the result?
Thanks to these five tricks the carbon footprint of carbon.crane.hu has been reduced to the seventeenth part while we did not make any changes in the content. As a result, from this respect carbon.crane.hu performs better than 63% of the websites tested on 24 August.
What other benefits can derive from carbon reduction?
Through the above analyzed modifications we have not only made our website more environmentally friendly, but also much more user-friendly. Because each and every change that has been made affect the amount of data to be loaded, and if the browser has to render less data the page can be loaded faster and easier, even in case of poorer internet quality. And this can greatly improve the user experience as well.
Comments are closed.