Eco-design

As an environmentally conscious company, we chose to collaborate with the WebSenso agency to develop an eco-designed website. This collective approach allows us to reconcile digital performance and ecological responsibility.

We have therefore developed a site that meets your needs while minimizing our digital footprint.

In short, how
Did we proceed?

• Clean design : We’ve removed all unnecessary elements
• Essential content : each piece of information has been carefully selected
• Optimized resources : compressed images, lightweight code, etc.

What is eco-design?

Web eco-design is an approach aimed at reducing the environmental impact of a website throughout its life cycle. It consists of designing sites that consume less energy and are more respectful of the environment, by optimizing resources, code, and favoring green hosts. This approach not only minimizes the carbon footprint, but also improves performance and user experience.

Key indicators and benchmarks

EcoIndex

EcoIndex is a free tool for assessing the environmental impact of websites. Developed by the GreenIT association and Nxtweb, it allows users to measure the ecological performance of their web pages. EcoIndex analyzes criteria such as page weight, complexity , and number of queries, then assigns a score out of 100 and a grade from A to G.

GTmetrix

GTmetrix is a web performance analysis tool. It evaluates website loading speed and optimization by providing detailed metrics and recommendations for improvement.

GTmetrix uses various metrics such as load time, total page size , and number of requests. It generates comprehensive reports with performance scores and offers specific suggestions to optimize the site. Although its main focus is performance, GTmetrix indirectly contributes to eco-design by encouraging lighter and more efficient sites.

The “115 good practices in web eco-design” standard developed by the Green IT Collective.

This comprehensive guide offers a structured approach to designing and maintaining environmentally responsible websites. It covers the entire life cycle of a web project, from specification to end-of-life, including design, implementation, production and use.

The 115 best practices are organized into six main sections : Specification, Design, Implementation, Production, Use, Support / Maintenance / End of Life. Each practice is presented in a concise manner, offering practical tips for reducing the environmental impact of websites. These recommendations aim to optimize performance, reduce energy consumption , and minimize resource usage, while improving the user experience.

Our site in a few key points

Level of eco-design of the site moustiers.fr

• Page weight: Significantly reduced
• Loading time: Optimized
• Indicateurs GTmetrix :
  • Homepage: C (75%)
  • Legal notice: B (76%)
  • Tourist profile: B (76%)

Rigorously selected choices

• Reduce the weight of web pages: asynchronous loading of images, few fonts, pre-loading of fonts…
• Limit the number of requests to the server as much as possible, without sacrificing all functionality
• Further optimize user journeys
• Review the way we design our content
• Optimization of our technical practices (aggregation, minification, responsive images, …)

From the start of the project, a design method adapted to meet our challenges!

Development

Optimized caching

To reduce load times and resource consumption, we have implemented efficient caching. Static files (CSS, JS, images) are stored on the user side to avoid reloading them on each visit.

Lightweight HTML structure

The HTML code has been cleaned up to avoid any unnecessary elements. A simplified structure reduces page size and speeds up browsers’ interpretation.

Asynchronous loading of resources

Non-critical assets, such as images, videos, and widgets, are loaded lazy loading using lazy loading techniques. This improves performance and reduces initial load time.

Optimized server requests

Exchanges with the server have been reduced by limiting unnecessary requests and grouping data when possible. The use of optimized queries, combined with response caching, decreases response time and improves page display.

Integration

Asset optimization

To lighten the site, only the necessary fonts were integrated, with optimized formats such as WOFF2. Critical resources use preloading, and icons have been grouped into a single sprite to limit requests. The images, compressed and converted, combine lightness and visual quality.

Fewer external dependencies

We have reduced the use of third-party libraries such as jQuery, preferring native solutions and custom CSS. This decreases the weight of the site while providing full control over the code.

Standard, high-performance code

The code follows current standards and CSS Lint rules. This simplifies its playback, improves browser-side performance and ensures better durability.

Reducing environmental impact

We’ve limited the power of the animations, optimized the DOM, and enabled efficient caching. These choices reduce energy consumption while improving the user experience.

Being partners in an eco-responsible approach is essential. WebSenso’s expertise combined with our vision has made it possible to create a high-performance, sustainable site aligned with our values.