13 Tips on Designing a More Eco-Friendly Website

Picture of Aydee Latty
Aydee Latty
tree with roots eco friendly web design

Inside this post

Introduction

When visitors open your website a bit of CO2 enters the atmosphere. The larger and more complex the website, more CO2 is contributing to climate change. Having an eco-friendly website can help reduce your carbon footprint.

It’s a harsh reality when you think of how much of our daily lives are spent online. Not only on websites but sending emails and loading up and viewing content of any kind. In an article published by the World Economic Forum in 2021, digital technologies contribute between 1.4% to 5.9% of global greenhouse gas emissions. Those percentages are predicted to double when reports from 2022 are published.

We learned a lesson from the pandemic. Global internet use increased by 40% as people began to get familiar with video conferencing – many who never needed to be on a screen before. Digital communication and accessing information via websites are increasing rapidly.

Electricity fed by fossil fuels is arguably the major cause of climate change. The digital world is fueled by electricity.

Now that we know this information, it is time to learn how to make your website eco-friendlier by reducing the amount of electricity it needs to operate.

 

If you are the one who built your website, here are some things to consider:

13 tips for an eco-friendly website

1. Reduce your image size

reduce image size

Images on a website don’t need to be as large in files size (bytes) or physical size (pixels) when put online. The larger the image the more energy it takes to open. Optimise your images and ask yourself if it is needed on the page. Also, could a vector graphic be used instead of a photo?

Use TinyPNG or another service to make your images smaller, or make sure your images are being served in next-generation formats such as WebP format, which is a much more efficient method of resing images for the web.

2. Delete files you no longer need

Finger hitting delete

If you have images on your website that are not being used, you may as well delete them. Not only is this better for your website’s performance, it’s also better for the environment. Having unused images on your site means that they are consuming space and resources on your server. This takes up both physical and digital space, which can be better used elsewhere. Unneeded images can take up megabytes of bandwidth each month. The more images you have on your site, the more resources you use. This can lead to slower load times for your website and a negative user experience.

When you decide to delete images, make sure you have a backup in case you need to recover them later.

 

3. Create a frictionless user experience.

Direct users to the content they are looking for as quickly as possible. Once they find it make sure it is useful and the copywriting is clear and concise. Otherwise, all that energy used for browsing and clicking is wasted. It’s also worth mentioning that users have a limited amount of mental energy.

If your website is difficult to navigate, your visitors may become frustrated and leave your site without taking action. losing the user to competitors with websites that are easier to use.

 

4. Check if your website is powered by green energy?

windmill green energy web design

There’s a simple way to check what your server is using, asking your website host. Some hosts may use renewable energy, some may use a credit system to offset their C02 use. Some hosts may plant trees or support projects that sequester C02 from the environment.

It’s worth asking your host or checking out their website for details of their work.

 

5. Cut down the use of videos

Use less video on my website

Videos can take about twice as much energy as those websites that don’t use video. If you need a video to convey your information, turn off the auto-play option and use an image overlay, so the video doesn’t load. Let the user decide if they need to watch it.

 

6. Check your fonts

Check your fonts green website design

How many font types do you have on your site? System fonts are most efficient, like Arial and Times New Roman. Sticking to a single font variation reduces the amount of energy needed to operate your website and makes reading easier on the user.

 

Technical tips for an eco-friendly website

Here are a few more technical changes that may require the expertise of a web developer:

 

7. Use SEO and optimise your website

do more search engine optimisation

SEO stands for Search Engine Optimisation. It is the process of improving your website’s organic search results to get more traffic. There are a few things that you can do to improve your SEO. First, you need to have high-quality content on your website. Second, you must ensure that your website is optimised for search engines. Third, you need to implement link building strategies that will help you build links to your site.

Having excellent search engine optimisation (SEO) will allow visitors to find you faster. Make sure you or your website developer knows what they’re doing or they could hamper your optimisation and cost you a lot of money in the process. Keep persistent and consistent with your SEO in order to see results.

8. Use Clean Code

use clean code website design

Clean website code is optimised, well-written code that is easy for both humans and search engines to read and understand.

When your website code is clean, it’s easier for search engines to index your site and for users to navigate it. This results in improved overall website performance. Additionally, clean website code can help improve your site’s SEO and can lead to higher keyword rankings in search engines.

A quick hack might be streamlining the number of plugins you might add to a CMS like WordPress.

 

9. Using Javascript

javascript or css

If you are using Javascript, make sure it has deferred loading therefore, it doesn’t block any essential page elements.

Deferring a script means that we are putting it off a little while — instead of loading it when we open the page, we’ll load it in the background, after the page has loaded. This is done to improve the user experience across the website and the entire internet. Since the script is loading in the background, there isn’t any harm in it, and users don’t even know that it’s being loaded.

Do you have any JavaScript that can be replaced with more efficient CSS?

There are lots of reasons why CSS is better than Javascript. First of all, CSS is extremely lightweight because it doesn’t contain any logic. It simply applies styles to elements. On the contrary, javascript contains lots of logic and is therefore much heavier. Secondly, CSS is universal and can be used on any website regardless of the framework or language it is written in. On the other hand, javascript can only be used on websites coded in javascript. Finally, CSS is extremely easy to learn and use, unlike javascript, which requires lots of time and experience to master.

 

10. Consider using Accelerated Mobile Pages (AMP)

Using AMP

AMP is short for Accelerated Mobile Pages, a technology developed by Google that makes your content load faster on mobile devices. AMP pages are created using an automated tool that optimises and edits the pages to make them lighter and load faster making it a more eco friendly website.

AMP HTML is a simplified version of HTML that AMP-generating servers use to generate pages. The AMP JS is a library used on the client-side to load and render AMP pages. The AMP Cache allows the browser to cache the generated pages so that they can be reused in the future.

 

11. Can any of your pages be created using static files?

A static HTML file is one that doesn’t change after it’s been created. The contents of a static HTML file are written in the HTML language and stored on a web server, and can be viewed in a web browser without requiring the files to be downloaded again.

12. Consider server caching technologies.

Server caching is designed to reduce the load on your web server by storing frequently-accessed files on a dedicated cache server. When a user requests a file from the cache server, it will be delivered from the cache rather than from the original source. This can significantly save bandwidth and load times for your website.

There are two primary types of server caching: content caching and object caching. Content caching refers to the storage of entire websites or files in a cache server. Object caching is a more granular approach and involves storing individual files or components (such as images) in a cache server.

 

13. Block bots and make sure you are using the latest PHP version.

Block bots

Website bots are automated software that runs on a website to perform specific tasks at a high rate of speed. Bots can be used to amplify marketing efforts such as sending out email campaigns and generating organic search engine results. They can also be used to create content on a website, such as blog posts, comment threads, and social media updates. Many different types of bots can be deployed on a website, each with its specific function. Some of the most popular bots include content, link, and comment bots.

 

Conclusion

Know that website designer and website developers see a project through different lenses. Eco friendly website design thinks more about branding and aesthetics, while developers are the ones who can make the necessary changes to build an eco-friendly website.

Subscribe to our mailing list

Share

Continue reading