Pourquoi optimiser un site internet : un gain écologique, mais aussi économique

S’il n’a jamais été aussi facile de créer des sites web, il n’y a jamais eu autant de sites lourds à charger. Ces sites web demandent davantage de ressources serveur ainsi que des téléphones, tablettes et ordinateurs plus rapides. L’optimisation de ces sites web permettrait à de gros fournisseurs comme OVHcloud d’en héberger davantage dans un même datacenter. Cela permettrait au nouveau site web de fonctionner de manière optimale sur les téléphones d’il y a 5 ans, y compris lorsque le réseau n’est pas bon.

Pour rappel, l’impact environnemental du numérique se compose de 30 à 40 % de consommation électrique et de 60 à 70 % de la fabrication de matériel (côté datacenters ou consommateurs).

Améliorer la performance d’un site internet a donc une vertu écologique, mais aussi économique.

Améliorer un site internet a donc une vertu écologique, mais aussi économique. Cela permet de booster la visibilité et la performance du site web :

• optimiser le référencement en travaillant son pilier technique ;
• réduire le taux de rebond ;
• optimiser le taux de conversion d’un site web;
• optimiser l’affichage d’un site internet, et globalement proposer une meilleure expérience utilisateur pour vos usagers.

Quels sont les conseils d’hébergement d’un site web écoconçu ?

Le premier conseil pour votre solution d’hébergement de sites n’est pas forcément d’avoir de l’énergie renouvelable ou l’efficacité énergétique (PUE) du datacenter. Cela peut commencer par vous héberger dans un pays avec un mix énergétique bas comme la France, la Suisse ou la Suède. Vous aurez déjà fait 90 % du travail.

Si vous voulez aller plus loin, vous pourrez ensuite affiner votre choix en regardant l’efficacité énergétique (PUE) du datacenter, s’il est relié directement à des réseaux de récupération de chaleur ou alimenté par des énergies renouvelables.

Attention à la communication de grands acteurs américains : leurs annonces concernent le plus souvent de l’énergie compensée. Cela signifie que le datacenter est alimenté par des centrales au charbon, mais que le fournisseur investit dans une ferme de panneaux solaires de l’autre côté du continent.

L’autre point consiste à utiliser au maximum des solutions mutualisées. Chez OVHcloud par exemple, pour un site web, privilégiez les solutions mutualisées de type Web Cloud aux services dédiés (VPS ou serveurs dédiés Bare Metal). Cela permet à OVHcloud de fabriquer moins de matériel pour autant de sites internet. En bonus : cela réduit aussi les risques de piratage de votre site web.

WordPress, Drupal, Webflow : puis-je encore utiliser un CMS ?

Le système de gestion de contenu (CMS) le plus connu est WordPress. Il s’agit du leader avec plus de 65 % des parts de marché, le second étant autour de 5 %. Pourtant, il a très mauvaise réputation. Les sites sont lourds pour les utilisatrices et utilisateurs, donc probablement impactants écologiquement.

Ce ne sont que des outils, il faut aussi de bons artisans. L’illustration suivante montre qu’au score Google Page Speed sur mobile, un site internet peut avoir une très mauvaise évaluation comme 9/100 et monter jusqu’à 98/100. Le point commun : le même CMS, WordPress.

Drupal et WordPress peuvent aussi permettre de créer des sites très écoperformants en remplissant tous les critères d’un site compétitif et écoresponsable.

Néanmoins, il y a des pièges à éviter. Sous WordPress, vous pouvez utiliser des builders pour faciliter la mise en page, le plus connu étant Elementor. Ces derniers ne sont pas tous égaux. Chez Webvert nous avons fait un comparatif des builders WordPress.

Chez Shopify, le moteur optimise les images des pages article automatiquement. Si toutefois vous utilisez les builders comme GemPages ou PageFly pour la partie blog et collection, c’est une catastrophe (nous n’avons pas d’autres mots).

De la même manière, les solutions no-code comme Webflow ou Squarespace sont aussi très permissives : on se retrouve avec des sites très lents à charger pour nos terminaux, ce qui pousse au renouvellement de ces derniers.

Quels outils pour mesurer la performance d’un site web ?

Actuellement, il existe différents types d’outils pour mesurer la performance d’un site web.

Pour choisir un thème, nous vous recommandons l’EcoIndex de GreenIT. Attention, il n’est pas forcément adapté pour analyser le contenu. De plus, ces indicateurs d’équivalent CO₂ et d’eau ont pour objectif de sensibiliser. Ils ne sont pas utilisables dans une étude.

Pour travailler sur le contenu, nous vous recommandons les outils suivants :

• Google Page Speed qui vous donne un score d’optimisation du contenu et du thème ;
• des sites comme Website Carbon Calculator, Ecograder et beaucoup d’autres qui reposent tous sur la même bibliothèque open source CO2.js.

La limite de ces outils est qu’ils ne mesurent qu’une seule page à la fois.

L’autre limite est qu’ils travaillent sur un total, que ce contenu soit utile et visible pour les utilisatrices et utilisateurs ou non. L’approche que nous avons chez Webvert est d’identifier le gaspillage numérique. Il s’agit de la partie de la bande passante qui part des serveurs. Celle qui arrive sur vos téléphones et qui ne sert à rien. Par exemple, une image qui fait 6 000 x 4 000 pixels et qui est affichée en 300×200 pixels. Cet exemple banal fait déjà une différence de plusieurs mégas alors qu’actuellement, on essaye d’approcher la taille d’une page web autour d’un 1 Mo.

Quelles sont les grandes actions à accomplir pour optimiser un site web ?

Pour éliminer ce gaspillage numérique et optimiser vos pages web à contenu égal et à CMS égal, nous avons identifié les grandes actions suivantes :

• optimiser la configuration serveur (la mise en cache et la compression texte) ;
• le choix du format des images ;
• le dimensionnement des images ;
• la compression des images.

1-Optimiser la configuration serveur

Chez Webvert, nous voyons beaucoup trop de sites web mal configurés.

Deux réglages sont importants sur votre site internet :

• la mise en cache. Le réglage conseillé par Google est d’un an, cela évite entre autres à vos visiteurs de charger toujours les mêmes images ;
• ne pas oublier la compression texte. Elle est normalement bien réglée sur les solutions Web Cloud d’OVHcloud, mais il arrive que de mauvais réglages viennent dégrader la situation.

2-Choisir le format des images

Vous êtes sur Figma ou Photoshop : cliquez sur « Exporter », le premier format proposé est le format PNG. Ne vous posez pas plus de question : il s’agit de l’une des actions principales pour construire votre site internet.

Avec cette action qui peut sembler anodine, vous vous retrouvez avec des images 4 à 10 fois plus grosses que si vous aviez sélectionné le bon format.

Nos conseils de choix du bon format :

• le logo : préférez le format SVG et dans certains cas le PNG ;
• les schémas, illustrations en aplats de couleurs : le PNG est le bon format, mais le SVG peut être le plus adapté ;
• les photos ou schémas contenant une photo : le format JPG.

Normalement votre site web contient en général 70 à 90 % d’images au format JPG.

Vous remarquerez qu’on n’évoque pas le format WebP pour les sites internet, on en reparle plus tard.

3-Dimensionnez vos images à la bonne taille

L’autre erreur classique est de publier directement vos images sur votre site internet sans vous poser de question. Comme quand vous allez chez l’imprimeur, il est nécessaire d’adapter le contenu pour un site web et de prendre le temps de regarder comment votre image est affichée. Il pourra s’avérer nécessaire de la redimensionner avec votre visualiseur d’images (ex. « Aperçu » sur iMac ou « Photos » sur Windows).

Un tutoriel complet pour redimensionner des images est disponible sur le blog de Webvert.

4-Optimiser les images

Pour l’optimisation d’un site, les deux actions précédentes permettent de diviser par 2, 3, 4 ou 10, la taille d’une image.

On peut encore optimiser 10 à 30 % sur la taille des images. Pour ce faire, il existe des outils.

Un tutoriel complet pour optimiser les images est disponible sur le blog de Webvert.

5-Et le code alors ?

Pour l’optimisation d’un site internet, nous n’aborderons pas les sujets du code, de JavaScript, ni du CSS. Nos données d’analyse montrent que le plus souvent, cette thématique représente moins de 4 % d’impact dans la réduction de la partie inutile d’un site web.

Les données montrent qu’il faut d’abord accomplir les actions sur le contenu d’un site web, pour ensuite s’attaquer à cette partie-là.

Chez Webvert, nous ne rencontrons un site ayant besoin d’une optimisation du CSS et de JavaScript qu’environ une fois sur cent.

Comment lancer ces actions en masse ?

Chez Webvert, nous avons développé un outillage interne pour processer des centaines, voire des milliers d’images par jour avec toutes les meilleures pratiques.

Retrouvez-nous sur OVHcloud Marketplace

Attention aux effets secondaires de la suroptimisation

Quand vous soumettez le contenu de votre site internet sur Google Page Speed, lors de l’analyse pour certaines images, nous vous recommandons d’utiliser le format WebP. Ce dernier a été conçu par Google pour avoir des images haute résolution en plus petite taille. Vous pouvez donc utiliser le format WebP et ne plus vous poser de question.

Veuillez toutefois noter qu’utiliser uniquement le format WebP augmente l’impact environnemental d’un site web.

En effet, une bonne partie des téléphones et tablettes datant jusqu’à 2016 ne pourront pas afficher ces images. Une grande part de votre contenu sera donc tronquée.

Cependant, en affichant uniquement du WebP sur votre site web, vous obtiendrez de très bons scores d’optimisation, quel que soit l’outil. Mais vous provoquez du renouvellement de matériel. Pour rappel, la fabrication, c’est 60 à 70 % de l’impact du numérique sur notre planète.

Chez Webvert, nous n’utiliserons le WebP qu’en 2026 (10 ans après). Nous avons analysé les données sur le terrain : un JPG optimisé et bien dimensionné donne un résultat très proche du WebP.

Allez plus loin que le site web, comment minimiser l’impact de votre produit ?

Vous avez maintenant une bonne vision sur la manière d’optimiser le contenu de votre site web. Si vous voulez aller encore plus loin, pensez aux produits numériques que votre équipe conçoit et promeut.

Souvent, les équipes de développement vont se focaliser sur l’optimisation de la consommation serveur.

Le conseil que l’on peut vous donner est aussi de considérer les externalités, le fameux scope 3. Qu’est-ce que votre produit provoque comme rachat de matériel pour votre clientèle ?

Le plus souvent, il s’agit d’une décision, celle de ne plus supporter les anciens terminaux utilisés par un faible pourcentage de personnes seulement. Ce faisant, vous contribuez à retirer des millions d’appareils électroniques du marché et à appauvrir l’offre de seconde main.

Nous en profitons pour partager avec vous un dernier conseil pour votre site internet : testez-le sur un vieux téléphone et dans une zone où le réseau est mauvais (en général c’est assez facile à trouver) et jugez de l’expérience utilisateur.

Retrouvez Webvert sur OVHcloud Marketplace pour décarboner votre site web

Subject expert Youen Chéné, co-founder of the Webvert website decarbonization solution and member of the OVHcloud technology ecosystem, tells us how.

Why optimise a website: the environmental and financial advantages

While building websites has never been so easy, so many websites are also “heavy” to load, requiring more server resources and faster phones, tablets and computers. There is evidence that optimising these websites would enable large providers like OVHcloud to host more of them within the same datacentre, and allow the new sites to work optimally on even 5-year-old phones – even when the network is not good.

The environmental impact of digital technology is caused by 30-40% electricity consumption and 60-70% hardware manufacturing (datacentres or on the consumer side).

Improving a website’s performance is not only environmentally friendly, but also cost-effective. It boosts the website’s visibility and performance:

• optimising SEO by working on its technical elements
• reducing the bounce rate
• optimising a website’s conversion rate
• optimising the display of a website, and offering a better user experience for your users overall.
  

Tips for hosting an eco-designed website

The first piece of advice for your website hosting solution is to host it in a country with a low energy mix, such as France, Switzerland or Sweden. This way, you’ll have done 90% of the work already.

If you want to go further, you can then refine your choice by looking at the datacentre’s energy efficiency (PUE), whether it is directly connected to heat recovery networks or powered by renewable energy.

Beware of the marketing from major US providers: their claims are mostly about compensated energy. This means the datacentre is powered by coal-fired power plants, but the provider invests in a solar farm on the other side of the continent.

Another idea is to make maximum use of shared solutions. At OVHcloud, for a lightweight website, we recommend shared solutions such as Web Cloud, rather than dedicated services. This means we can manufacture less hardware for as many websites as possible.

Can I still use a CMS such as WordPress, Drupal, or Webflow?

The most popular content management system (CMS) is WordPress. It is the leading tool with more than 65% of the market share (the second most popular has around 5%). However, it has a somewhat bad reputation. Its sites are heavy for users, and therefore more likely to have an environmental impact.

These are just tools; you need good creators, too. The following illustration shows that on Google Page Speed on mobile, a website can have a very poor score like 9/100 or go as high as 98/100. The common denominator: the same CMS, WordPress.

Drupal and WordPress can be used to create high-performance websites, while meeting all the criteria for a competitive, eco-friendly website.

Nevertheless, there are still pitfalls to avoid. With WordPress, you can use builders to help with your page layout, the most well-known being Elementor. But not all builders are equal: at Webvert we made a comparison of WordPress builders.

At Shopify, the engine automatically optimises images on article pages. However, if you use builders like GemPages or PageFly for a blog or collection, it’s a disaster (there are no other words to describe it!).

Similarly, no-code solutions such as Webflow or Squarespace are also very tolerant: we end up with sites that are very slow for our terminals to loads, which forces us to upgrade them.

Which tools can you use to measure a website’s performance?

Currently, there are different types of tools for measuring a website’s performance.

To measure a theme, we recommend the GreenIT EcoIndex. Please note that it is not necessarily suitable for analysing content. The CO₂ equivalent and water indicators are for raising awareness, and they cannot be used in a study.

To analyse content, we recommend the following tools:

• Google Page Speed, which gives you an optimisation score for content and theme
• sites like Website Carbon Calculator, Ecograder and many more that all rely on the same open-source CO2.js library.

The limitation of these tools is that they only measure one page at a time.

The other limitation is that they work on a total, whether that content is useful and visible to users or not. The approach we take at Webvert is to identify digital waste. This is the part of the bandwidth that leaves the servers and arrives on your phone, but is unusable – for example, an image that is 6000 x 4000 pixels but is displayed at 300 x 200 pixels. This mundane example already makes a difference of several megabytes, whereas currently, we are trying to bring the size of a webpage to around 1 MB.

What are the main actions you need to take to optimise a website?

To eliminate this digital waste and optimise your web pages with equal content and equal CMS, we have identified the following key actions:

• optimise server configuration (caching and text compression)
• choice of image formats
• image sizing
• image compression
• Optimising server configuration

At Webvert, we see far too many misconfigured websites.

There are two important settings for your website:

• Cache: the setting recommended by Google is one year, which prevents your visitors from having to reload the same images.
• Text compression: this setting is normally well-tuned on OVHcloud Web Cloud solutions, but occasionally, incorrect settings make the situation worse.
• Choosing an image format

If you are using Figma or Photoshop, click “Export ”, and the first format offered is PNG. Here is one of the main actions you can take when building your optimised website.
By always selection PNG, you end up with images 4 to 10 times bigger than if you had selected the right format.

Our advice on choosing the right format:

• logo : opt for SVG format, and in some cases PNG
• diagrams, illustrations in solid colours: PNG is the right format, but SVG may be more suitable
• photos or diagrams containing a photo: JPG format

Normally your website will contain 70-90% JPG images. You will notice that we didn’t mention the WebP format for websites – more on that later.

• Making your images the right size

The other classic mistake is to publish your images directly on your website without a second thought. Like going to a commercial printer, you need to adapt the content for a website and take the time to look at how your image is being displayed. You may need to resize it with your image viewer (e.g. Preview on iMac or Photos on Windows).

A comprehensive tutorial for resizing images is available on Webvert’s blog.

• Optimising images

For optimising a site, the two actions above allow the size of an image to be reduced by 2, 3, 4 or 10 times. It is also possible to optimise the size of the images by 10 to 30%. There are tools to help you do this.

A comprehensive tutorial on optimising images is available on Webvert’s blog.

• What about the code?

For website optimisation, we will not cover the topics of code, JavaScript, or CSS. Our analysis data shows that, more often than not, this factor makes up less than 4% of the impact in reducing the “useless” part of a website.
The data shows that you have to address the content of a website first, then tackle the code.
At Webvert, we only see a website that needs CSS and JavaScript optimisation in about one in a hundred cases.

How can I launch these actions all together?

At Webvert, we have developed an internal tool to process hundreds or even thousands of images per day using all the best practices. This is available on OVHcloud Marketplace.

Beware of the side effects of over-optimisation

When you submit your website content on Google Page Speed, when analysing certain images, we recommend using the WebP format. This was designed by Google to create high resolution images in smaller sizes, so you can use WebP format without second-guessing yourself.

Please note, however, that using only WebP format can also increase a website’s environmental impact. Many phones and tablets dating back to 2016 will not be able to display these images, and as a result, a lot of your content will be truncated.

However, by displaying only WebP images on your website, you will get very good optimisation scores, regardless of the tool. But you may force people to upgrade their devices – and as a reminder, manufacturing accounts for 60% to 70% of the impact of digital technology on our planet.

At Webvert, we won’t be using WebP until 2026: 10 years after this. We analysed the data in the field: an optimised and well-dimensioned JPG gives a very similar result to WebP.

Beyond websites, how can you minimise the impact of your product?

You now have a good idea of how to optimise your website’s content. If you want to go even further, think about the digital products your team designs and promotes. Often, development teams will focus on optimising server consumption.

The advice we can give you is to also consider external factors, known as Scope 3 emissions. Where does your product stand when it comes to your customers replacing their devices? In most cases, the decision is made to no longer support old devices used by only a small percentage of people. But by doing so, you are taking millions of electronic devices off the market and making the second-hand supply poorer.

We would like to share one last piece of advice for your website: test it on an old phone and in an area where the network is bad (usually this shouldn’t be hard to find!) and judge the user experience.

Find Webvert on the OVHcloud Marketplace and start decarbonizing your website