Drupal eco-design: integrating RGESN best practices into our Starter

With us, every Drupal project starts on a common foundation: our Drupal Starter.

This technical foundation, enriched over more than 25 years of web projects, is not just a basic starter kit. It’s a ready-to-use architecture, designed to immediately meet the most common needs: editorial components, security, accessibility, performance, maintainability… and eco-design !

The idea is simple: don’t start from scratch on every project, but build on a robust, proven, and continuously improved foundation.

Today, a major part of our work involves evolving this Starter so that, from the very beginning, it incorporates as many best environmental practices as possible.

Digital eco-design involves reducing the environmental impact of a digital service throughout its entire life cycle: design, development, hosting, use, and maintenance.

In our case, this notably means:

• reducing unnecessarily downloaded data;
• limiting heavy processing on the browser side;
• avoiding unnecessary components;
• optimizing media;
• designing optimized user journeys to limit navigation.

To do this, we rely on the RGESN (General Reference for the Eco-design of Digital Services). This French standard sets out a series of concrete criteria for designing more eco-friendly digital services.

Not all RGESN criteria can be industrialized.

Some can be directly integrated into our Starter:

• optimized media formats;
• progressive loading;
• front-end best practices;
• limitation of unnecessary scripts;
• compression settings.

But another part is inherent to the nature of the project.

For example, a simple institutional website does not have the same constraints as an e-commerce site or a video platform, which will inevitably have a higher impact. 

Moreover, some criteria fall within the scope of the commissioned service : did the client consider it necessary to include essential UX design services to define user needs and design optimized user journeys? What hosting provider was chosen? Does the project include AI? These are just some of the questions that will influence the RGESN criteria.

In practice, today we consider:

• 60% of the RGESN criteria are covered by default in our Starter;
• 30% of the criteria are subject to review on a case-by-case basis, depending on the type and scope of the project;
• 10% of the criteria remain difficult to implement at this time.

Eco-design is therefore not a fixed state : it's an ongoing process, assessed case by case and strongly involving the client.

Here are the latest industrialization efforts we have implemented in our Starter to benefit our clients' web projects.

Load only what is actually used (RGESN criterion 6.5)

One of the habits in web development is to load all components as soon as a page opens, even when the user will only use part of them. Technically, it's convenient. Ecologically, much less so.

The RGESN criterion 6.5 recommends loading only the resources that are strictly necessary at the moment they become useful.

We were already applying this principle to media. With lazy loading, images only load when they actually enter the visible area of the screen.

Today, we're going further with smart preloading of videos.

Until now, an embedded video could trigger an immediate download of large resources. We are now moving to a more efficient approach: the user only sees a static thumbnail, and the actual video loads only on click (preloading).

In other words: if the video is never watched, it doesn't consume unnecessary resources. It's a simple optimization... but extremely effective on media-heavy pages!

Inform the user when a feature uses a lot of resources (RGESN criterion 4.12)

Eco-design isn't just about code. It's also about transparency for the users. In this regard, the RGESN recommends indicating features that have a significant environmental impact in criterion 4.12. So we added to our Drupal Starter a contextual message below audio and video media.

By default, the message is as follows: "This feature is one of the uses identified as having a significant environmental impact. We encourage you to use it responsibly."

This message remains deactivatable and editable in the back-office, at our clients' discretion. In fact, the goal is not to induce guilt. It is simply to make visible what often remains invisible in line with the site's administrators' eco-design policy.

Optimizing files uploaded in the back-office (RGESN criterion 5.7)

A site can be technically very well-designed... and then lose all its efficiency as soon as content is added.

This is especially true for uploading large documents (PDF, .doc, etc.) as well as uncompressed images and videos used without moderation.

It's a central topic because many RGESN criteria actually depend on contribution and therefore the ability of administrators of the site to adhere to several best practices.

To address this constraint, we have set up an awareness workshop. However, once the website is delivered, we no longer really have control over its management. Especially since there are sometimes many contributors, teams change, and information gets lost.

Thus, in an effort to comply with criterion 5.7 of the RGESN, which requires using a file format suited to the content and usage context, we decided to add a reminder message directly in the administration interface, when files are added in the Drupal back office. 

The message reminds document contributors of best practices: 

• compress before upload;
• avoid duplicates;
• choose the right format;
• prefer text whenever possible.

Image compression: moving from WebP to AVIF (RGESN criterion 5.2)

The weight of images has a direct and significant impact on a website’s environmental footprint. Reducing the number of resources and optimizing their size is therefore an essential lever for eco-design.

This is precisely the goal of criterion 5.2 of the RGESN (“Are media files optimized in terms of size and format?”), which encourages the use of modern formats offering the best compromise between visual quality and data volume transferred.

For a long time, our standard was the WebP format. Already highly efficient, it allowed us to significantly reduce page sizes.
Today, we are updating our Drupal starter to the AVIF format, which is more advanced in several key aspects.

Why is AVIF more efficient than WebP?

AVIF is based on a newer and more efficient codec, which specifically results in:

• Significantly better compression: At the same quality level, AVIF files are on average 20 to 50% lighter than WebP (and up to 50% lighter than JPEG).
• Better preserved visual quality: AVIF maintains more detail, especially in complex gradients, fine textures, and high-contrast areas. This allows for weight reduction without degrading the user experience.

Result : lighter pages, faster loading, and a reduced environmental impact, with no compromise on quality.

The SVG format: already lightweight… but still can be optimized!

For us, the SVG format is already a well-established best practice. And for good reason: for icons, logos, or certain graphic patterns, it’s hard to find anything more efficient.
Unlike raster formats (JPEG, PNG), an SVG is vector-based: it does not store pixels, but drawing instructions. The result? Files are often very lightweight, perfectly sharp on all screens, even in high resolution.

But by digging a little deeper, we realized one thing: a “lightweight” SVG doesn’t necessarily mean “optimized”. In reality, most SVGs exported from design tools (Figma, Illustrator, etc.) come with a lot of unnecessary “noise”:

• invisible metadata,
• empty groups or layers,
• redundant attributes,
• sometimes even hidden elements.

In short, extra code… that unnecessarily weighs down pages.

Our response: automate the cleanup.

Rather than rely on manual optimization by contributors (tedious and rarely systematic), we've chosen to industrialize the process. We've set up an automatic optimization step with SVGO directly in our frontend pipeline (Webpack integrated into Drupal).

Specifically, each time an SVG is added:

• the file is cleaned (unnecessary elements are removed),
• the code is simplified and compressed,
• without ever altering the visual rendering.

Why does this matter?

This work may seem “invisible,” but it’s fully part of an eco-friendly design approach:

• less data transferred, even with already small files;
• fewer requests and total weight on icon-rich interfaces;
• and consistent quality, without relying on individual best practices.

What we are evolving today in our Drupal Starter reflects a strong conviction: eco-design cannot rely solely on intentions or goodwill.

It must be structured, equipped, and integrated at the very heart of the project.

That is the essence of our approach: industrializing as many RGESN criteria as possible, so that they are respected by default, without systematically depending on individual choices.

In practical terms, this means integrated technical optimizations in the foundation (image formats, conditional loading, automatic compression), as well as mechanisms that limit errors and omissions on the contributor side.

But we remain realistic: not everything can be automated. That’s why we are also committed to engaging and supporting the skill development of our clients through awareness workshops and educational messages directly in the back office.

Because we know: an eco-designed site depends not only on its technology. It also depends on how it is used, enriched, and maintained over time. In this sense, eco-design is less a state than a collective process, involving both project teams and contributors.

And that’s precisely where we want to position ourselves:
not only as a development provider, but as an engaged partner, capable of equipping, simplifying… and sustainably improving practices.

We support organizations that want to combine performance, accessibility, robustness, and digital sustainability.

And above all, without pitting business requirements against environmental requirements. Let's talk about it !