Build a responsible eco-site, Géraldine GICQUEL’s tips
- 03 May 2022
Geraldine is Project Director on the development of the eco-responsible site dalkia.fr, launched in September 2021. Dalkia received two awards for this website during “Les Cas d’Or du Digital Responsable” in October 2021: the responsible website award and the innovation award.
The Green IT is used for reducing the digital fingerprint thanks to an eco design work and thanks to digital technologies.
The decision to realize an eco-friendly website is always welcomed. This decision seems easy, but behind it there are numerous renunciations and compromises to which all the client entities involved must adhere.
1 - Ecodesign is a decisive stage
1st advice : do not neglect the upstream phase of the project. The design of the site can be much longer than the design of a classic site : more workshops upstream to design and approve the models, the typography, the contents… with more people to convince on unusual ways that are taken.
A few key elements for this upstream stage : simplify the tree structure, avoid the elements involving too much code (sliders, carousel…), restrict the number of media within the pages (videos), favor factor images (less big), choose colors less energy-intensive for screens. To sum up, a simplified process, less pages and optimized contents.
To finish, the conception stage is completed, everybody made compromises to succeed at a simple site to use. Then, the development stage of the site begins.
2 - The green development in its ecosystem
To make this phase as effective as possible, your programmer must have been made aware of the green development. For Dalkia Green Site Project, we implemented a crack squad, with a project manager and programmers initiated into the green development. The whole team, really interested in the subject, exchanged views all along the project to share their knowledge and challenge each other :)
Green Dev in a few words…:
Some key principles: rewriting templates to keep only the necessary HTML elements (if a CMS is used), only use essential JS and “light” booksellers, reduce the request number, resize and compress images, reduce the complexity of page composition (DOM optimization), reduce the weight of transferred data.
We developed the site of Dalkia with the CMS Drupal, which presents more flexibility to our client to create and post contents on his website. We used the Tome module to generate a static version of the site and opted for the delayed loading of images to display them only at the time of the scroll. The static site is cached by the navigator, thus its consultation does not result in a database query.
3 - Hosting : important pillar of the Green IT
The hosting of the site has an important role in the implementation of a green website : choose a green hosting and optimize the use of servers as much as possible. For the site Dalkia, only 2 servers are used from now on, and one of them is switched off during the night and the weekend to limit the energy consumption - the static site remains open. This implies the renunciation of real time over a given period, if a content is modified in back office during this period, it will only appear at the regeneration of the static site.
4 - Post-launch, the transition is not complete
The role of backoffice contributors is also key to maintaining your site’s level of eco-responsibility. It is essential to train them on best practices when creating content. It will be needed to agree on editorial rules and to stick to them, a rule can be for example “No more than X blocks and Y images per page, no video”.
For the site Dalkia, a photoshop script is also used to “bichrome” the images and compress them. It is possible to measure after every modification the new rating of the page thanks to a GreenIT Analysis plugin.
Measuring Green Performance: how do you know if your site is eco-friendly enough ?
Several tools exist to measure it. For the site Dalkia, we chose with a general agreement the tool EcoIndex. It allows to measure the environmental performance of a site with a rating ranging from A to G.
If your site already exists and this is a redesign, it would be interesting to select a panel of key pages and to reckon the current environmental performance rating, then redo the exercise with your new site to see concretely the improvement obtained. It is a very useful tracking indicator at the page level.
Don’t forget that beyond pages and tree structure, the contribution impacts the rating, in such a way that it is not frozen and will live as the changes to the site go by.
The green quality of your new site will not stop at its launch, you will have to follow it closely and maintain it, like a beautiful plant! ;)
Other tools emerge to monitor excellence Green. It is the case of quanta.io for example which suggests the unit “Digital sobriety” to reckon the carbon impact on sites (network exchanges of pages, attribution of a score) with a roadmap provided with features to come.
Testimony of Dalkia:
“Smile has made possible the realization of a resolutely innovative project in the energy sector by allowing Dalkia.fr to become the first eco-responsible site in the field of energy!
Thanks to the professionalism of the teams, we were able to reduce the site’s carbon footprint by 64% and make it more accessible to everyone.
During the eco index audit before launch, we noted a significant improvement in the label of the optimized pages (mostly rated A/G versus D or E/G before).
We are also very proud to have won two Digital Gold Awards (“Cas d’Or du Digital”), both for the Innovation Award and for the Responsible Website Award. This would not have been possible without the involvement of the various stakeholders who were able to be the force of proposal on the technical choices and the implementation of this project. Thank you to the Smile teams for their commitment to us.
To go further, I advice you 2 sites :
- the website of the collective Responsible Digital Design where you will find the reference of 115 good practices of eco-design web:
- And the General Repository of Digital Services Design (RGESN):