Sustainable Website

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 little bit of CO2? In 2022, it was estimated that the internet was responsible for 3.7% of the world's total CO2 emissions, and this number was expected to double by 2025. (Source: Climate Impact)

In other words, we should all consider how to make our online lives more sustainable for the world we share. At Creative Oak, when we work with digital marketing, including website development, we have taken the time to learn how to think greener when building digital projects. We don’t want to keep this knowledge to ourselves because we all share a responsibility to integrate sustainability into our digital actions.

Internet 101: Understanding the Basics of a Green Website

The internet basically works in a simple way. When you type a URL into your browser and hit "enter," your browser (like Chrome, Firefox, or Microsoft Edge) sends a request to a server somewhere in the world. The server then sends back a "response" consisting of what appears on your screen — colors, layout, images, videos, text, and so on.

This is essentially a simple request-response interaction, which usually isn’t the biggest culprit when it comes to CO2 emissions. Server-side optimizations can be made regarding location, cooling, and power sources. Unfortunately, these decisions are often out of the developers' hands since they rarely host web projects themselves. However, it is worth considering your hosting provider and ensuring they use green energy. Additionally, there are many steps developers can take themselves to ensure a greener footprint.

Fonts, Colors & Photos: Design Choices for a Green Website

When you type a URL into your browser and hit "enter," your browser sends a kind of message to a computer somewhere. That computer then responds with everything that shows up on your screen — images, colors, text, and more.

As a developer, you decide what appears. We don’t believe websites should be boring without images or colors because amazing things can be done on the internet. But there are things you can do to make your site more eco-friendly, and we want to share them with you.

Fonts

Fonts are more complex than you might think — they’re small programs containing different font variations. There are large, small, italic, underlined, different weights, and so on.

(Source: Thinking With Type 2nd Ed)

When you “download” a font for your website, you actually download a whole package with all these variations. It’s common to see that only 1 or 2 font variations are used, even though the entire package has been downloaded.

Here you can make a real 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 exact weight or style you require. It’s a good idea to keep the number of fonts on your website as low as possible without compromising your design. This helps reduce unnecessary data transfer and makes your website more efficient.

Colors

The colors on your website actually affect your CO2 footprint — but not because of the data sent from server to computer. It’s because your screen uses more energy to display colors than just black and white. While this might seem paradoxical, especially since this website is colorful, we believe your brand and identity matter so much that they can outweigh the extra energy consumption that comes with colorful websites. That said, there’s still room for improvement.

By optimizing your website’s colors, you can still reduce energy consumption and contribute to green web development. It’s about finding the right balance between visual appeal and environmental considerations.

Photos & Videos

One of the biggest data consumers on your website is images and videos. The key here is to optimize them so they look sharp without taking up too much space. We differentiate between logos and photos — logos are graphics, while photos are pictures like the ones you take with a camera.

To optimize your photos, compress them and make sure they’re the correct size. For example, if you display an image at 500 x 500 pixels on your website, the image file should also be 500 x 500 pixels, not larger. It’s possible to “load” a large image and then display it smaller, but that means you’re downloading more data than necessary.

At the same time, make sure your images are optimally compressed. The modern standard right now is ".webp," which offers strong compression without quality loss (Google WebP). You can use free services to convert your photos to .webp and use them on your website to reduce data usage (for example, 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’s common to see ".png" files being used, which is not best practice. PNG files can be quite large and don’t scale optimally. It’s better to convert your graphics or logos to vector graphics, also known as SVG (Scalable Vector Graphic), or make sure they’re created in this format from the start. This significantly optimizes data size while allowing your graphics to scale infinitely. In other words, they look great whether they’re 5000 x 5000 pixels or 100 x 100 pixels.

You can use a service like Convertio to convert your graphic files from PNG to SVG format. This can improve your website’s performance and speed while offering greater flexibility for scaling.

Videos are widely used on websites today — for example, as backgrounds that add motion and life to your page. But videos often take up a lot of space and can slow down your site while increasing its CO2 footprint. It’s important to compress your videos so they take up as little space as possible.

One of the best video compression tools is YouTube. You can upload your video to YouTube, wait for them to compress it, then download it again. Alternatively, you can reduce the frames per second in video editing software. Sometimes 15-20 frames per second are enough to keep a smooth video experience without stuttering.

You could also consider if a small animation or GIF could achieve the same effect instead of a video. This can be a more energy-efficient way to add motion without negatively impacting speed or environmental impact.

Caching

Last but not least, consider caching. Basically, caching means saving some of the website content locally on your computer. The next time you visit, the content doesn’t have to be downloaded again. Therefore, setting up caching on your site is a good idea, especially if you use many images and videos.

Many website builders already use caching automatically. For example, if you use WordPress, it can be beneficial to install a plugin like W3 Total Cache, which helps implement a caching strategy. This improves your website speed by reducing the loading time and simultaneously reduces the amount of data transferred between the server and your computer.

The Data Hoarder: How to Reduce Unnecessary Data for a Greener Website

As mentioned earlier, the internet works mostly with requests and responses. But if your server sends requests to other services, more data is pushed over the network, increasing your CO2 footprint. This applies when you use external services like Google Analytics or other third-party hosted services. You should consider whether you really need to collect data — and if so, how much.

Often, data about visitors is collected without a real purpose. You could consider turning off some of these services or activating them only during specific campaigns. Alternatively, you could develop your own data collection system where you store only the data you find useful. But be mindful of laws like GDPR (which you must always comply with). It’s important to be responsible and transparent about how you handle and use visitor data.

Code Optimization: Efficiency for a Green Website

If you developed your website without using a tool, kudos! But then you should review your code and make sure there’s no messy code wasting energy. It’s important to optimize your code as much as possible and avoid unnecessary and unused code.

A quick way to optimize your CSS and JavaScript is to “minify” them. This means removing all unnecessary spaces and line breaks. You can use online services like Minifier for this. Just note that your code will become unreadable during the process — but you can always reverse it if you need to make changes later. Optimizing your code helps improve your website’s performance and reduce its energy consumption.

What About the Future? Green Websites and Technological Advances

This field is constantly evolving, and we hope to find better and more sustainable solutions for running servers. Intensive research is already underway. For example, the company Grow Your Own Cloud has developed a way to store data in plants, representing a green approach to server operation. Technologies like blockchain or decentralized networks might also play a role in future server solutions.

In general, it’s important to stay curious and keep up to date on new possibilities. This could include new compression methods, standards, and hosting options. By staying informed and embracing innovations, we can all help make the internet more sustainable and environmentally friendly.