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.
HOW DID WE DO IT?
- 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 bage-pontdevaux-tourisme.com
- Page weight: Significantly reduced
- Loading time: Optimized
- CO2 emissions: Minimized
- Eco-index score:
- Home page: C
- Legal notice: B
- Indicateurs GTmetrix :
- Homepage: A (96%)
- Legal notice: A (99%)
- Website Carbon Calculator:
- Homepage: B (cleaner than 71% of all web pages)
- Legal Notice: A+ (cleaner than 94% of all web pages)
The Bagé Pont de Vaux tourism tourist office is committed to digital sobriety
By launching the project to redesign its bage-pontdevaux-tourisme.com website, our company has committed to a serious and solid eco-design approach by requesting the support of the agency WebSenso which is based on reliable standards and indicators in terms of web eco-design. WebSenso also has multiple quality expertise in this field to achieve specific objectives: to create a lightweight, efficient and environmentally friendly online presence, accessible, while ensuring that the needs of our users are met.
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!
WebSen’SCORE: a collaborative assessment tool created by WebSenso
With WebSenso, we used WebSen’SCORE, an innovative assessment tool that allowed us to:
- Evaluate our impact : Starting with an initial score of X/5, we explored together the different possible and recommended design options.
- Make informed decisions : Through an interactive process, each choice was discussed and had a direct impact on our final score: X/5
This tool facilitated our dialogue and helped us understand the implications of our eco-design decisions .
User-Centered Design Methodology with UX Design
UX design plays a crucial role in reducing the environmental impact of websites through several key approaches: simplification and minimalism, performance optimization, improved navigation, accessibility, reduction of visual pollution…
UX Design methods such as focus groups and card sorting carried out on the bage-pontdevaux-tourisme.com redesign project, help to optimize user journeys and structure content in an efficient and intuitive way. These workshops aim to complement the technical challenges of eco-design while maintaining a high quality of user experience.
Participatory design involves users in the design process and allows for the co-creation of solutions that more precisely meet their needs. This approach limits the waste of resources by avoiding the development of unnecessary or complex features that weigh down the site.
This method , recommended and led by WebSenso , actively participates in eco-design. They have helped us focus on user-centric practices to optimize journeys and content design.
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.