Eco-web design

Eco-web design consists of developing websites with a lower environmental impact, respecting the principles of sustainable development while having increased performance. To achieve this, each of the website design phases must be optimized.

In my last article, we have discussed the Blue Ocean Strategy examples, if you want some more information on other SaaS-related topics, feel free to check out this blog.

All around the world the green energy sector has grown so rapidly and has become such an important part of the economy that it now employs more people than the tar sands. The climate issue was at the heart of the last election. Yet a lot remains to be done, especially in the digital ecosystem.

According to some experts, the pollution generated by the web industry and its impact on the climate is equivalent to that of the aviation industry. The digital ecosystem now absorbs almost 10% of the electricity produced in the world. The network will become even more polluting with the increase in our personal data storage needs and the growing number of users worldwide.

Giants like Facebook, Google, and Apple are among the first to embark on the race for a greener web. Several leaders in the IT industry are now addressing the issue. If we are not a computer giant, what can we do in terms of web eco-design? Here are the actions to take to make your website more ecological.

Minimize requests

A visit to your website triggers an HTTP request. This request signals the server to send all the files necessary to display your site on the user's screen. Sometimes not all files sent are needed. You can improve the performance of your site by removing too many requests and thus reduce unnecessary file loading. For example, you can use JavaScript to do some basic operations rather than loading all the JQuery code. Are all weights in a typeface loaded unnecessarily when only two weights are used? You can also use the browser's cache functions to improve loading speed.

Eliminate unnecessary code

Collect all CSS formatting instructions in a separate .css file, rather than just the style tags on the page. Avoid excessive use of divs and classes for HTML and CSS. We find the most unused code in CSS. Several tools exist, such as UnCSS Online, to help you eliminate unnecessary code. Although some JavaScript variables must end up directly on the page to work properly, when possible, place the JavaScript code in a separate .js file.

Go for a clean design

The eco-web design will encourage the designer to remove the superfluous from the pages of the site to eliminate HTTP requests. Are all the items on the page necessary? Does a carousel with large images add to the understanding of the reception? Maintaining a single image reduces load while maintaining the positive visual impact of a large intro image. The benefit will also be felt at the level of natural referencing. By opting for a website with a clean design, without stripping it completely, we minimize requests. This notion also applies to responsive versions, where you can adapt lighter content depending on the device. If you are struggling with making your design clean and simplistic, you can always use the help of a design agency or freelance designers.

Reduce the weight of the media

Ideally, the dimensions and weight of the images should be adapted to the display space. There is no need to set up an image 1200 pixels wide if it is resized by the browser to 300 pixels. It is best to resize this image with software like Photoshop to have a size that matches the space where it is used. We also favor good compression in JPG to reduce its weight as much as possible. Videos also need to be adapted and compressed for the web. We must minimize the weight for the web and perhaps think of offering an image only for the mobile version.

Choose green accommodation

It is possible to opt for a local host if the users mainly come from the same region. Some hosts want to respect an environmental policy by offering green hosting. The carbon footprint can also be reduced thanks to an infrastructure of dedicated and low-power virtual servers. Your website will then be hosted in data centers powered by renewable energies.