Electricity production. Factories. Transportation. Household products. We’re not telling you anything new when we say that all these things pollute and are responsible for environmental degradation.
It may be less obvious at first glance, but the Internet pollutes too. This means that, on its own scale, a website emits greenhouse gases and contributes to digital pollution.
To try to limit the impact of this scourge, you can take action at your level by adopting a web eco-design approach.
By the end of this article, you will know in detail what this concept covers, along with the benefits it can bring to your business and your visitors.
You will also have plenty of practical tips and tricks to apply to your next website creation projects, so that they use less energy.
What is web eco-design?
To begin, let’s define what eco-design—also spelled ecodesign—means in the broad sense.
According to the Ministry for Ecological Transition, it is a “preventive approach to environmental problems” that consists of “integrating environmental protection from the design stage of goods or services”.
Applied to the web, web eco-design consists of designing websites that are more eco-friendly and environmentally responsible, while using less energy.
A web eco-design approach applies throughout all stages in the life of a website, from its creation to its maintenance, including its hosting (web server).
To create more sustainable websites, web eco-design is based on several key principles:
- focus on the essentials and prioritize simplicity, particularly with a minimalist, clean design;
- eliminate anything unnecessary;
- center the architecture and content of your site/blog around your users’ needs;
- offer content that loads at least as quickly as on a “traditional” site, with as little code and as few requests as possible;
- limit data downloads and unnecessary files.
In France, it is worth knowing that the promotion of eco-design is handled by a dedicated organization: ADEME.
This Agency for Ecological Transition supports innovation and research in the field of eco-design.
It helps individuals and professionals accelerate the reduction of energy consumption, develop renewable energies, and reduce greenhouse gas emissions.
As you will see below, there are several advantages to adopting a web eco-design approach.
Why adopt a website eco-design approach?
Reduce environmental impact
The first “logical” benefit when discussing web eco-design lies in the environmental gains it provides.
This is a significant aspect, especially when considering the ecological pollution generated by the digital ecosystem in the broad sense.
On this subject, the figures are telling and reflect the critical scale of the problem.
According to a 2022 report by ADEME on the impact of digital technology in France, digital technology is responsible for 3.5% of global greenhouse gas emissions (nearly twice as much as air traffic produces). This carbon footprint is expected to double by 2025, the report points out.
In total, global digital technology would represent a 7th continent whose size would be equivalent to 2 to 3 times that of France, according to a study conducted in 2019 by the Green IT collective.
By way of comparison, the Green IT study indicates, for example, that the footprint of global digital technology is equivalent to 1.5 billion French employees commuting to work for 1 year…
Furthermore, it is estimated that if the Internet were a country, it would be the 3rd largest consumer of electricity in the world, after China and the United States.
Obviously, within digital pollution, websites occupy a considerable place. There are 1.112 billion of them worldwide, of which only 18% are active!
To keep them running, data centers, for example, are essential, but they consume huge amounts of electricity. Hence the importance of choosing an environmentally friendly hosting provider, as we will see later.
Improve user experience and performance through web eco-design
Adopting a web eco-design approach also means taking care of the user experience (UX) offered to visitors to your website (whether it is on WordPress or another CMS).
An eco-designed website adapts from the outset to the user’s needs. The idea? To make life easier for them from the very beginning of their journey on your site or blog.
This translates, for example, into optimized navigation, as well as the responsive display (readable on desktop, smartphone, and tablet) of your pages and articles. Thanks to this, you also improve accessibility.
At the same time, improving UX will have a positive impact on loading speed.
If your site focuses only on the essentials, it will load faster and consume less energy!
This aspect is also important from the point of view of organic search (SEO). First, because Google takes the speed of your pages into account in its algorithm, particularly through its Core Web Vitals.
And then, because a fast website or blog helps keep your visitors on your site longer, while limiting the bounce rate, which search engine crawlers like Google do not look kindly on.
Adopt a more responsible positioning that benefits your brand image
Finally, there is also a business-related benefit when it comes to web eco-design. To begin with, adopting such an approach will position you as a responsible player who is trying to move things forward at their own level.
This can have a positive impact on your brand image and reputation.
Indeed, the French are sensitive to environmental issues: 80% of them say they are “concerned about environmental protection and climate change”, this survey reveals.
Moreover, positioning yourself in the niche of eco-designed websites will automatically place you in a premium segment.
As the Ministry for the Ecological Transition explains, the price of an eco-designed product is “associated with an investment in design, higher quality and innovation, and may be higher than that of a competing product that is not eco-designed”.
Consequently, you will be able to sell your services (website creation and redesign, maintenance, etc.) at a higher price than usual, and hope for an increase in your revenue.
Without further ado, let’s now move on to the next step: presenting all our practical tips on eco-designing a website.
How to create an eco-friendly WordPress website: 9 tips
The best practices for eco-designing a website that you will find below are primarily intended for websites built with WordPress.
That is why you will find very specific recommendations… but also more general ones, ranging from design to development, including the hosting of your site or blog.
You can therefore use many of the tips presented, regardless of the eco-design CMS you have chosen.
Moreover, this list of tips is far from exhaustive. To draw it up, we relied on two resources that serve as the “Bibles” of web eco-design:
- The book “The 115 Best Practices in Web Eco-Design”, by Frédéric Bordage and the GreenIT collective. ADEME provides access to certain chapters as a free download. Also note that these 115 best practices are available as a web eco-design checklist, also in PDF format.
- The General Framework for the Eco-design of Digital Services (RGESN), co-led by the Interministerial Digital Directorate (DINUM), the Ministry for the Ecological Transition, ADEME and the Responsible Digital Institute.
This framework allows you to check 79 points on your eco-responsible website, across 8 themes (from strategy to hosting on a server), to help you reduce the consumption of IT and energy resources.
To go further, feel free to explore these two resources.
1/ Define your target audiences and their needs precisely
To begin with, our first piece of advice is to identify and precisely define your target audiences, meaning the end users of your WordPress site (your visitors).
This is essential for creating features and content tailored to their needs. Your site should be as streamlined and practical as possible. It should do “ neither too much, nor too little ,” as recommended by the RGSEN.
As soon as you create your project specifications, you need to know your target audiences, their habits, their needs and their behaviors.
To do this, implement the following actions:
- create a competitive analysis;
- analyze the existing situation;
- define your personas (ideal customers), for example using a free tool such as Make My Persona;
- conduct interviews or surveys with your users using solutions such as Google Forms, Typeform or SurveyMonkey.
At the same time, ask yourself the following questions and provide precise answers:
- What are the needs of the customers who will visit your site? Do they want to buy something? Are they looking for specific information? Do they want to download a document?
- What will the user journey be once they land on your pages?
- How can you make navigation as smooth as possible?
Understanding users’ needs will allow you to detail the essential and necessary features of your site.
You will also be able to eliminate anything unnecessary in order to focus on what matters most in terms of eco-friendly web design.
2/ Design a clean interface
In line with what you have just started doing, now focus on the architecture of your content. This is, in particular, what will allow you to develop the most effective user journey possible.
To design it as effectively as possible, consider developing the following elements:
- the site structure of your website or your blog, that is, its architecture in diagram form. You will present the strategic pages of your choice and make sure not to create pages that are too deep. This is bad for the user experience and SEO. Basically, the fewer pages you have, the less time your site will take to load, and the more you will reduce your carbon footprint.
To design your site structure, use software such as GlooMaps, MindMeister or Balsamiq; - wireframes. These are functional mockups showing the structure of your pages. Create them with an online tool such as Balsamiq Wireframes or MockFlow;
- graphic mockups, which show the final visual appearance of your pages. Designing them is not necessarily required, as they demand expertise and technical skills. You can simply stick to wireframes if you do not wish to call on a web design professional.
Tip: When you create your wireframes and/or mockups, adopt the same approach as you do with your users’ needs. Ask yourself what needs to be included in your content.
Does a particular option or animation seem like a gimmick to you and add nothing more for the end user? Don’t take it into account!
3/ Favor a minimalist design
Speaking of mockups and graphic design, let’s stay in the field of web design with this 3rd tip, to be applied both during the planning phase—before the site is developed—and during the technical design phase of your eco-designed site with WordPress.
To maintain an effective website eco-design approach, prioritize a simple, clean design adapted to the web. This is notably what emerges from the book 115 Best Practices for Web Eco-Design.
Here are various recommendations to meet this expectation:
- favor the “mobile-first” approach, which consists of first creating a mobile version of your site before its desktop version. Your content must be responsive: it must display perfectly on any type of device (computer, smartphone, tablet). To check the responsive display of your website, use Google’s Mobile-Friendly Test (free);
- limit your fonts. A good practice is to use one font for your headings and another for your body text. The fewer different fonts you use, the faster your site will load.
The Fontpair website allows you, for example, to pair them. Whenever possible, favor fonts already hosted on your site rather than those that require requests to a third-party service such as Google Fonts; - opt for a minimalist approach by giving your different sections room to breathe and favoring white space between your content elements;
- use icons rather than images whenever you can. They are lighter in weight;
- reduce the number of colors used. Here again, choose one main color and 2 to 3 secondary colors or variants. Use a tool like Color Hunt to combine them well.
4/ Reduce the weight of your media
Remember the beginning of this article: we explained that with a successful web eco-design approach, the pages of your WordPress site would load faster… and consume less energy.
To achieve your goals, you need to drastically reduce their weight. To do this, focus first and foremost on images, which in some cases account for 50% of a web page’s loading time!
To do things properly, apply the following web eco-design best practices and tips:
- reduce the dimensions and file size of your images before uploading them to your site, for example using the “Save for Web” feature in software such as Photoshop (paid). There are also free alternatives such as GIMP. A maximum size of 2,000 pixels x 2,000 pixels is often more than enough for your images;
- enable an image compression plugin on your WordPress site such as Imagify or Smush. You can also use third-party tools such as Tiny PNG, Kraken.io or Optimizilla;
- use an image format suited to the type of image and the display context. For example, choose JPG format for photos and PNG for images that handle transparency. Favor a vector format such as SVG whenever you can (illustrations, icons, logos, etc.);
- select your photos carefully and reduce their number as much as possible.
Good to know: Also watch out for videos, which are very resource-intensive. When it comes to them, avoid uploading them directly to your site (prefer hosting on a third-party platform such as YouTube or Vimeo).
And above all, prevent autoplay, that is, automatic playback of the video as soon as the page loads.
Avoid this as part of a web eco-design approach on WordPress. Let the user choose to click the “Play” button only if they want to watch the video.
5/ Take care of the user experience
With lighter images and videos, you will take care of the user experience, which is an integral part of a web eco-design approach.
However, this is only the tip of the iceberg. It is possible to go much further in terms of UX.
To help your visitors easily find what they are looking for, we recommend that you:
- design a clean navigation menu. Try not to exceed 5 to 6 items in your menu. These items (links) should lead to your most strategic pages;
- add a search bar to your header or navigation menu. Many WordPress themes offer this option natively;
- set up internal links to direct your readers to additional content and keep them on your site longer.
- avoid infinite scroll. Instead, favor page-based navigation. The WordPress plugin WP-PageNavi allows you to do this.
Also consider switching your site to HTTPS to strengthen its security. As a result, you will also prevent your visitors from seeing messages indicating that the connection to your WordPress site is not secure.
Finally, since user experience also goes hand in hand with the performance of your WordPress site, we recommend that you activate the WP Rocket plugin to speed up the loading time of your pages.
If your site loads faster, it will consume less energy and pollute less.
A real plus when it comes to eco-friendly web design. WP Rocket is a paid plugin, admittedly, but it has the advantage of being very easy to use. And above all, it combines multiple features into one:
- it lets you enable caching on your pages;
- it has a lazy loading feature;
- it can optimize your database, etc.
In short, it is simply essential.
6/ Reduce your site’s code
If you have been following along so far, you know that an eco-friendly web design approach involves focusing first and foremost on the essential features of your website.
This of course includes the visual appearance and content, but also everything that happens behind your screen, in the code (HTML, CSS, JavaScript, PHP, etc.).
The heavier your site’s code is, the longer your pages will take to load. And the larger your carbon footprint will be.
Choose a lightweight theme as part of a web eco-design approach
How can you limit the damage at this level? First, prioritize a lightweight WordPress theme that follows best practices. A few meet these two criteria in the official WordPress directory:
- GeneratePress ;
- Kadence ;
- Blocksy ;
- Astra.
Please note: If you are used to using a page builder (Divi Builder, Elementor, Beaver Builder, etc.), be careful.
While they are very practical for designing advanced layouts without touching code, they also include a large number of features you may not necessarily need. And more features also mean a site with heavier code.
Limit the number of plugins and minify the code
After the theme, you are bound to use plugins. Here, prioritize quality over quantity.
Limit the use of plugins whenever possible and delete those you no longer use.
Furthermore, update your themes and plugins as soon as possible. It’s a good practice for WordPress security, but it’s also valuable in terms of web eco-design.
Indeed, developers sometimes add performance optimizations in their new versions.
Finally, apply these last two tips to reduce your code:
- minify HTML, CSS and JavaScript. Your theme may offer this option, so check its settings and documentation carefully. If not, rely on a dedicated plugin. WP Rocket, for example, offers this option;
- reduce animations on your site, in order to limit these unnecessary resources (especially CSS and JavaScript). For example, avoid using sliders, which negatively impact a page’s loading time.
7/ Optimize your SEO
To present a site that “pollutes” as little as possible, you should focus on quality rather than quantity.
Your content must be easy to find, thanks to SEO actions focused on strategic queries, that is, adapted to the needs of your target audience.
Here are several avenues to explore to achieve this:
- target keywords that match the needs of your target audiences and their search intent;
- work on your on-page SEO using an SEO plugin such as Yoast SEO, SEOPress or Rank Math. Thanks to them, you will be able to optimize strategic tags such as , or for your images.
In addition to this, make sure you provide a clear presentation of your different content types (posts, pages).
When writing, we recommend that you pay close attention to the visual presentation of your writing by using subheadings (h2, h3, h4), creating paragraphs, or using bold text to highlight certain essential information.
Did you know? The Yoast SEO plugin is one of the most committed players in the WordPress ecosystem when it comes to web eco-design. Its developers offer, for example, a crawl optimization feature (crawling of your pages by search engine robots) for certain types of URLs, scripts, and metadata that WordPress adds automatically. Thanks to this, you can reduce your carbon footprint in just a few clicks.
8/ Choose eco-friendly web hosting
All set—you’re about to put your eco-friendly WordPress website online? In that case, you’ll need a hosting provider committed to reducing its environmental impact.
What exactly is a “green” web host? If we stick to what the RGSEN recommends, this host must meet multiple strict criteria:
- it must have signed the European Code of Conduct for Data Centres;
- it must be committed to the environment by meeting certain environmental standards (ISO 14001, ISO 50001 certifications, etc.);
- it must use a type of server cooling that relies on renewable energy sources (water, air, etc.) or waste heat recovery;
- it must make available the environmental impacts related to its use and operation;
- it must offer a transparent and eco-friendly policy for managing its equipment (servers, etc.).
If you search for the best eco-friendly web hosting providers on a search engine, you will notably come across the following providers:
It will then be up to you to check whether the hosting provider of your choice is truly committed to an environmentally friendly approach. To do this, contact its customer service department and ask whether it meets the various criteria above, in particular.
9/ Validate your pages with the W3C
To conclude our series of tips, we would like to draw your attention to one final good practice to implement: validating the code of your pages, in order to check for errors and/or incorrect usage (missing angle brackets, duplicated CSS classes, etc.).
This is notably possible thanks to the services offered by the W3C (World Wide Web Consortium), an organization responsible for promoting and developing web standards.
The latter provides you with various tools, such as validation services:
- The HTML markup of your website.
- The CSS code. This tool “will not only compare your style sheets against the CSS specifications but it will also tell you if your CSS code is risky in terms of usability”, the W3C explains.
- Your hyperlinks.
Each time, all you need to do is enter the URL of the page of your choice, then click the “Check” or “Verify” button.
You will then get an indication of the faulty markup or the error to be corrected, with its precise location (line) in the code.
Please note, sometimes you’ll have your work cut out for you ;-). Finally, to make it easier to improve the accessibility of your websites, you can also rely on the general accessibility improvement framework (RGAA).
106 check criteria will help you make your WordPress site understandable and usable for people with disabilities.
If you’d like to delve deeper into web eco-design on WordPress, we recommend watching the video conference that Olivier Gobet presented at WordCamp Bordeaux 2019 (Eco-designing a website. Yes, but how?).
How can you assess the environmental impact of your website?
Once your site or your client’s site is online, you’ll probably want to know what its environmental impact is after applying all our advice.
Note that this approach can be applied before designing a site, especially if you are handling the redesign of a WordPress site.
You will also get a more precise overview of the site’s situation and its weak points in terms of web eco-design.
To help you, there are several free tools that can calculate the environmental impact of a website:
- Website Carbon Calculator measures the carbon footprint of a page on your site, comparing it with the rest of the web. For example, you’ll get the CO2 emissions rate of a page, with a comparison to other elements;
- EcoIndex assesses the environmental impact of your site. It is quite similar to Website Carbon Calculator, but it is in French. EcoIndex also provides precise metrics for your page (weight, number of elements and requests);
- The GreenIT-Analysis Chrome or Firefox extension, offered by the GreenIT collective. It brings together the features of the EcoIndex and Ecometer online services. Its designers state that it is mainly intended for developers and makes it possible to check the implementation of web eco-design best practices.
- PageSpeedInsights. With this Google tool, you can specifically measure the loading speed of your WordPress site’s pages. The displayed results will provide you with metrics evaluating your users’ experience (Core Web Vitals), as well as—and above all—the performance issues detected. Suggestions for improvement will be offered. Remember to apply them to your site to boost your web eco-design approach.
Did you know? Since May 2023, a free system has made it possible to display a summary of a website’s environmental impacts and highlight the web eco-design efforts implemented to reduce these impacts. This environmental performance label, which is somewhat similar to a web eco-design certification, was designed by the Association des Agences-Conseils en Communication (AACC) and the Green IT collective. Find out how to use it here.
Web eco-design: 5 examples of eco-responsible websites
To wrap up this article, how about a selection of websites to inspire you and to take a closer look at what an eco-designed website looks like when best practices are applied?
Here are several examples of websites designed using a web eco-design approach:
- The French Agency for Ecological Transition;
- Slowebcréation;
- La forêt et nous (created with WordPress) by the Teragir association;
Summary
As you have seen throughout these lines, adopting a web eco-design approach offers several advantages when creating an eco-friendly website.
For your business, first of all. You help reduce the environmental impact generated by creating a website, while improving your brand image by adopting a more responsible positioning.
For your visitors, the most notable added value lies in improving the user experience you offer them, which is never insignificant.
To implement an eco-design strategy on WordPress, you know that it is essential to activate different levers, such as creating a minimalist visual interface and taking your target audiences’ needs into account.
If this topic matters to you, discover our WordPress website creation service. Our team of experts will help you design a website with an optimal user experience, while being fast, attractive, and secure.
