Sustainable web design: Eco-friendly solutions
In Canada, the green energy sector has experienced such rapid growth that it now employs more people than the oil sands industry. Climate issues were at the forefront of the last election. However, much remains to be done, particularly concerning the digital ecosystem and sustainable web design.
According to some experts, the pollution generated by the web sector and its impact on the climate are comparable to those of the aviation industry. The digital ecosystem now consumes nearly 10% of the world’s electricity. This pollution will increase further with rising demands for personal data storage and a growing number of global users.
Major companies like Facebook, Google, and Apple are among the first to commit to a greener web. Many leaders in the tech sector are now addressing this issue. If you’re not a tech giant, what can you do in terms of web eco-design? Here are actions you can take to make your website more environmentally friendly.
Minimize requests
When someone visits your website, an HTTP request is triggered. This request tells the server to send all necessary files to display your site on the user’s screen. Often, not all sent files are needed. You can enhance your site’s performance by eliminating unnecessary requests, thereby reducing the loading of excess files. For example, you might use JavaScript for basic operations instead of loading the entire jQuery library. Are all the weights of a font being loaded unnecessarily when only two are used? Browser caching functions can also be utilized to improve loading speed.
Eliminate unused code
Consolidate all CSS formatting instructions into a separate .css file rather than embedding them directly in the tags on the page. Avoid excessive use of divs and classes for HTML and CSS. Most unused code tends to be found in CSS. Several tools, like UnCSS Online!, can help you remove unnecessary code. While some JavaScript variables must be on the page to function correctly, when possible, place JavaScript code in a separate .js file.
Opt for a clean design
Web eco-design encourages designers to eliminate excess elements on site pages to reduce HTTP requests. Are all elements on the page necessary? Does a carousel with large images enhance understanding on the homepage? By keeping just one image, you can reduce loading while maintaining the positive visual impact of a large introductory image. The benefits will also be felt in terms of SEO. By opting for a clean web design—without stripping it down completely—you minimize requests. This concept also applies to responsive versions, where lighter content can be adapted for different devices.
Reduce media weight
Ideally, you should adjust the dimensions and weight of images to fit the display space. There’s no point in using an image that’s 1200 pixels wide if it is resized to 300 pixels by the browser. It’s better to resize the image using software like Photoshop to match the space where it will be used. Good JPG compression should also be prioritized to minimize file size. Videos should be adapted and compressed for the web as well. Consider offering a lighter image version for mobile.
Choose green hosting
You might choose a local host if your users mainly come from the same area. Some hosting providers are committed to an environmental policy by offering green hosting. The carbon footprint can also be reduced with low-consumption dedicated and virtual server infrastructure. Your website will then be hosted in data centers powered by renewable energy.
A few suggestions:
Measurement tools for your website
There are now several tools available to measure the environmental footprint of your website.
For instance, Kryzalid’s website is cleaner than 75% of websites tested on this platform.
Want a greener site?
Kryzalid can help you reduce your environmental footprint by streamlining your website, minimizing HTTP requests, and decreasing media weight. Contact us today to explore your options for a greener future.
