How to make a sustainable website

You’ve no doubt heard about how to reduce your carbon footprint in your home or workplace, but did you know that you can also do it on your website?  

Everything involving connectivity, the internet, data centers, telecommunications networks and devices requires a lot of electricity to process and transmit the data that we send around the world. To give you an idea, the Internet accounts for 2% of global emissions, roughly the same as global aviation, but it could make up for 3.5% of global greenhouse gas emissions in 10 years. 

That’s why it’s important to know what you can do on your website to reduce its carbon footprint, but first, you have to calculate the CO2 emitted by your website.  

How can you measure the carbon emissions of a website? 

On the website www.websitecarbon.com, you can find out how much CO2 each pageview emits. Just enter the URL of your website and click the "calculate" button. A good number to know that you are on the right track is between 0.15 and 2 grams per visit.  

And where do I start to reduce my website’s emissions?  

There are three main factors that can make your website more sustainable:  

• How and where the site is hosted.  
• How much content is on the page and the type of content.  
• How the code is structured.  

Let’s start with the easiest one:  

1. How and where the site is hosted. 

The server that hosts your website is the most polluting part of the site, because it uses a lot of energy to transmit data. It is important to choose a green hosting site to reduce CO2 emissions to a minimum. 

You can go to www.thegreenwebfoundation.org to check if you are using a CO2-free host just by typing your URL. It also has a directory of green hosting companies in case you need one, plus tools so you can check how to improve the efficiency of your website. 

Another good practice is to use server caching. Ask your programmer to incorporate it. This significantly reduces server power consumption and shortens the load times of your website.  

2. How much content is on the page and the type of content. 

Making the content on your website efficient and sustainable depends almost exclusively on you. Many times, we focus on maximizing a website’s pages, photos and videos, which makes the website very data hungry. 

Here are some tips:  

1. Reduce video usage to a minimum: A website with a high number of videos is very large and consumes a lot of power. Before uploading a video to your page, ask yourself first if it's really necessary and if there’s another way to do it.  

2. Reduce the use of e-frames: Populating frames on the website with third-party content, such as Google maps, routes, podcasts or YouTube videos, requires a large transfer of data from your website to other pages, which forces all those pages to consume energy all at once. If you must use an e-frame, make sure that these pages also use good practices for responsible consumption.  

3. Minimize the size of the images: Mind the size of the photos and make them as small as possible. There are tools, like TinyPNG or ShortPixel, that compress image files with no visible drop in quality. You can also use plugins that optimize the size and dimensions of photos, or more efficient file formats for each image, such as WebP instead of JPEG. In addition, you can use the lazy loading technique to reduce the size of photos, as well as specific plugins to optimize image size.  

4. Quality of the information: Publishing content of little or no value simply to generate visits should be avoided. Clear, useful and efficient texts help reduce internet browsing time.  

5. SEO Optimization: By optimizing a website for search engine rankings, you can help people find the information they are looking for quickly and easily, which reduces the time it takes to look for information. 

3. How the code is structured. 

Writing clean code is essential to an efficient website. Ask your programmer to follow these tips:  

1. Use efficient fonts: Use system fonts whenever possible, such as Arial and Times New Roman, since they cost less to load. 

2. Use less JavaScript and more CSS: Most animations and effects are done with Java Script, which adds to the size of the page and increases the amount of processing required by the user’s device. Minimize the use of these types of practices, or find ways to achieve these animations using more efficient technologies, such as CSS.  

3. Clean code: Ask your programmer to validate the code and CSS at W3C https://validator.w3.org/ to make sure it is well structured. 

Most of these actions are not hard to implement and only require careful consideration when thinking about the design, content creation, development, and deciding which server you host your website on. A more efficient website is a fundamentally better website. If, after reading this best practices guide, you are interested in improving the efficiency of your website or creating a greener one, you can read and sign the Sustainable Web Manifesto at https://www.sustainablewebmanifesto.com/