The best practices of eco web design

Every website, by its existence and by its visitors, has an ecological impact in terms of energy consumption, and therefore CO2 emissions. This impact is all the stronger as the site is visited, and as its life is long. We are therefore working on a list of good practices to limit it to a minimum.

The Advency agency has set itself a goal: to save the world.

Finally, to begin with, do our best to avoid destroying it. To do this, we are gradually changing the way we design projects and develop.

So, what do we do?

We are testing, thinking, and implementing more and more best practices to ensure that the sites we create have the least impact possible.

Disclaimer: the following list of best practices is neither perfect nor absolute. It is the result of our current research, experiments and advances, and it is intended to be further enriched. But as our objective is collective and as it is a common struggle to save the planet, we share it with you.

Page weight

Our goal is to set a weight budget per page that should not be exceeded in order to keep the site light. We set it at 1MB, the ideal being if possible to be less than 800kb/page.

Best practices graphic design and UX/UI

• Replace large images with SVG images under 100kb
• Limit the number of content thumbnails
• Avoid sliders and carousels
• Avoid pages that are too long
• Limit the number of fonts and weights used

Good development practices

• Using 2 sprites (Retina and non-Retina compatible)
• Load only useful CSS on the page (no global compilation)
• Load only useful JS on the page (no global compilation)
• Delay the loading of heavy elements when the user performs an action (images, video, etc.): when scrolling the page, when hovering over an element, ect
• Avoid loading external scripts that are too greedy in requests (Google map, Recaptcha, etc)
• Limit the number of requests
• Compress Javascript files
• Compress CSS files
• Cache the site
• Use the Website Footprint extension to have an overview of the page's impact
• Avoid loading invisible elements
• Serve images of a size adapted to the device (for mobile display in particular)
• Limit the size of the images stored on the server (resize at BO insertion and not on the fly)
• Optimize the weight of the images as much as possible, use the new image formats (webp, jpeg2000, etc) and use images systematically compressed with TinyPNG
• Clean up all duplicated code, use a linter configured for this purpose

Server configurations

• Configure the web server to serve cached resources
• Configure static file expiration to avoid a new download each time the page is loaded

The respect of these good practices and more widely of the philosophy of web eco-design allows to have an eco-designed site which will be able toto have an eco-designed site that will not only emit less CO2 when stored and consulted, but also brings its share of advantages in terms of performance, SEO, maintenance and accessibility. So go green:)