Sustainable Web Development

The year is 2024, and there are more websites and web apps than ever before. Over 5 billion people use the Internet every single day. But did you know that every time you visit a website or open your favorite app on your phone, you emit a small amount of CO2? In 2022, it was calculated that the Internet was responsible for 3.7% of the entire world's carbon emissions, and it was expected that this figure would double by 2025. (Source: Impresa clima)

In other words, we should all be considering how to make our online lives more sustainable for the world we share. When we at Creative Oak are engaged in digital marketing, including website development, we have explored how to think more green when building digital projects. We do not want to keep this knowledge to ourselves, as we all share a common responsibility to integrate sustainability into our digital actions.

‍

The Internet 101

The internet, in general, works quite simply. When you enter a URL into your browser and press “enter”, your browser sends (e.g. Chrome, Firefox, Microsoft Edge) a request to a server located somewhere in the world. The server then sends back a “response”, which consists of what appears on your screen - colors, layout, images, video, text, etc.

This basically amounts to a simple cold-response interaction that is usually not the biggest culprit when it comes to CO2 emissions. Server-side optimization can be done in terms of location, cooling, and power source selection. Unfortunately, these decisions are often beyond the control of developers, as they rarely host web projects themselves. However, it is worth considering the choice of hosting provider and ensuring that they use green energy, but there are also many measures that developers themselves can implement to ensure a greener footprint.

Font, colors & photos

When you type an address (URL) into your browser and press “enter”, your browser sends some kind of message to a computer somewhere. That computer then responds with everything that appears on your screen - images, colors, text, and so on.

As a developer, you decide what to show. We don't think websites should be boring without images or colours because we can do amazing things on the internet. But there are some things you can do to make it more environmentally friendly, and we'd like to share that with you.

Fonts

Fonts are more complex than you think - they are small programs that contain fonts in different variations. There are large, small, italic, underlined, different thicknesses, etc.

(Source: Thinking With Type 2nd Ed)

When you “pick up” a font for your website, you're actually picking up a whole package with all these variations. It is quite common to see that only 1 or 2 variations of a font are used, even if the entire package is downloaded.

Here you can really make a difference by downloading only the variations you actually need. For example, if you use Google Fonts, a collection of free fonts, you can choose to download only the precise thickness or variation you need. It's a good idea to keep the number of fonts on your website as low as possible, without compromising on the design. This can help reduce unnecessary data transfer and make your website more efficient.

‍

Colours

The colors of your website actually affect your carbon footprint as well, but not because of the amount of data that needs to be sent from server to computer. This is because your monitor uses more energy to display colors than just black and white. Although it may seem a bit paradoxical since this website is very colorful, we believe that your brand and identity matter so much that it can offset the extra energy consumption that comes with colorful websites. However, this does not mean that there is no room for improvement.

By optimizing the colors of your website, you can still reduce energy consumption and thus contribute to green web development. It's about striking the right balance between visual appeal and environmental concerns.

Photos & Videos

One of the big data consumers on your website is images and videos. Here it is mainly about optimizing them so that they look sharp without taking up too much space. We will differentiate between logos and photos — logos are graphics, while photos are images like those you take with a camera.

To optimize your photos, you can compress them and ensure that the size is correct. For example, if you display an image on your website with dimensions of 500 x 500 pixels, the image must also be 500 x 500 pixels and not larger. Indeed, it is possible to “load” a large image and then “display” it in a smaller version, but this means that you are retrieving more data than you are actually displaying.

At the same time, you can ensure that your images are optimally compressed. The modern standard right now is “.webp,” which is a strong compression with no loss of quality (Google WebP). You can avail free services to convert your photos to .webp format and use them on your website to reduce data consumption (see e.g. CloudConvert). An added benefit is that this will also make your website faster.

‍

When it comes to logos or other graphics on your website, it is sometimes seen that “.png” files are used for this, which is not considered best practice. PNG files take up a lot of space and do not scale optimally. Here it can be advantageous to convert your graphic or logo into vector graphics, also called SVG (Scalable Vector Graphic), or make sure that the graphic or logo is made in this format from the start. This significantly optimizes the amount of data, while allowing your graphics to scale infinitely. In other words, it will look just as good, whether it's 5000 x 5000 pixels or 100 x 100 pixels.

You can use a service such as Konvertering to convert your graphics files from PNG to SVG format. This can improve the performance and speed of your website, while providing greater flexibility in terms of scaling.

Videos are now widely used on websites, for example as a background that adds movement and life to your page. However, videos often take up a lot of space and can slow down the speed of your page, while also increasing your carbon footprint. Here it is important to compress your videos so that they take up as little space as possible.

One of the best compression tools for videos can be found on YouTube. You can upload your video to YouTube, wait for them to compress it, and then download it again. Alternatively, you can try to reduce the number of frames per second in video editing programs. Sometimes it requires no more than 15-20 frames per second to maintain a smooth video experience without the notch.

You can also consider whether an image with a small animation instead of a video can give the same effect to your page. This can be a more energy efficient way to create movement without negatively affecting speed and environmental impact.

‍

Caching

Last, but certainly not least, one should consider caching. Basically, caching involves storing some of the content from a website locally on your computer. The next time you visit the site, the content does not need to be downloaded again. Therefore, it is a good idea to set up caching on your page, especially if you use a lot of images and videos.

Many website builders already use caching without you having to do much. However, if you use WordPress, it can be advantageous to download a plugin such as W3 Total Cachethat can help implement a caching strategy. This can improve the speed of your website by reducing the time it takes to load the content, while decreasing the amount of data transferred between the server and your computer.

‍

The data hoarder

As mentioned at the beginning, the Internet is generally quite simple - you send a request and receive a response. But if your server sends more requests to other services, more data will be pushed across the network, increasing the carbon footprint. This applies if you use external services such as Google Analytics or other services that host something on other servers. Here one should consider the degree to which one collects data - does one use it at all?

We often see that data about visitors is collected for no real purpose. You could consider turning some of these services off or possibly activating them for periods of time, such as during a specific campaign. Alternatively, you can develop your own data collection, where you store the information you find useful yourself. But here you need to pay attention to the legislation, especially the GDPR (which, by the way, you must always comply with). It is important to be responsible and transparent about how visitor data is handled and used.

‍

Code Optimization

If you've developed your website without using a tool, you get kudos for it! But in that case, you should review your code and make sure there is no cluttered code that consumes unnecessarily much energy. It is important to optimize your code as much as possible and avoid unnecessary and unused code.

A quick way to optimize your CSS and JS is by “minifying” it. This involves removing all unnecessary space and line breaks. You can use online services such as Minifier for this purpose. However, be aware that your code will become unreadable in the process. Fortunately, you can always reverse the process if you need to make changes later. Optimizing your code can help improve your website's performance and reduce its energy consumption.

‍

What about the future?

The future in this field is constantly evolving, and we hope to find better and more sustainable solutions for powering servers. There is already intensive research in this area. For example, the company has Grow Your Own Cloud developed a method to store data in plants, representing a green approach to server operation. Alternatively, technologies such as blockchain or decentralized networks could also play a role in the server solutions of the future.

In general, it is important to be curious and stay up to date on upcoming opportunities. This can include new compression methods, new standards, and hosting options. By being aware of and embracing these innovations, we can all contribute to making the internet more sustainable and environmentally friendly.