Conseils pratiques pour créer un site Internet dans une logique d'éco-conception
Dans un monde de plus en plus connecté, où la vidéo est reine et où les contenus sont scrollables à l'infini, nous nous sommes posés la question de l'impact environnemental de nos activités numériques.
Chez Pyzzly, nous sommes convaincus que les entreprises ont un rôle à jouer dans les défis environnementaux que nous devons relever.
En ce sens, nous nous sommes penchés sur l’éco-conception de sites internet.
Voici quelques conseils issus de notre propre expérience...
Qu’est-ce que l’éco-conception de site internet ?
L’éco-conception de site internet consiste à créer un site Internet le plus léger et le moins complexe qui soit.
Au sein de notre agence de communication et consulting Pyzzly, un chiffre nous a marqués : 155.
Le poids d’une page web a été multiplié par 155 en 20 ans.
En 1995, le poids d’une page web était en moyenne de 14 Ko, et il est passé à plus de 1 600 Ko en 2015.
Mais ce poids, en soi invisible, pèse sur des serveurs physiques. D’énormes datacentres, implantés un peu partout dans le monde, consomment de l’électricité 24h sur 24. Qui plus est, des systèmes de climatisation refroidissent fréquemment ces centres.
On estime que les GAFAM, rien qu'à eux, possèdent plus de 700 millions de m2 de serveurs.
Vous l’aurez compris, l’impact environnemental du numérique n’est pas négligeable.
Le numérique représente 3 à 4% des émissions de gaz à effet de serre dans le monde, soit un bilan 1,5 fois plus important que le transport aérien !
Il est possible, et souhaitable aujourd’hui, de réduire cet impact, à notre échelle.
Et ainsi de réduire le poids de notre site internet, et de chaque page qui le compose
Écoconception web : où placer le curseur ?
Lors de la refonte de notre site, nous nous sommes posés la question entre ergonomie, graphisme, facilité d'administration et éco-conception.
Notre équipe a penché pour les choix les plus optimaux, et nous avons placé notre propre curseur de l'éco-conception. En voici les lignes principales :
1. Favorisation d'un webdesign simple et épuré 💡
Suite à notre formation à l'écoconception web, nous avons premièrement optimisé le parcours utilisateur pour mener à un webdesign simple et efficace, respectant les principes de sobriété numérique. Pas de superflu, on va droit à l'essentiel ! Un vrai défi relevé haut la main par notre Directeur Artistique !
2. Pas de vidéos ni de fonds vidéos intégrés 🎬
Le chargement automatique de vidéos - qui ne sont pas systématiquement visionnées, engrange un surplus de consommation énergétique.
Et pourtant, sur le web, il est fréquent de retrouver sur des sites Internet où de multiples vidéos se lancent automatiquement. Encore plus lorsqu'il s'agit de sites Internet d'agences de communication.
Chez Pyzzly, nous avons pris le parti de ne pas en inclure, afin de réduire le poids des pages et l’impact carbone de notre site Internet.
3. Moins d'images et compression optimale des images 🖼️
Il existe une résolution d'images destinée pour le print (l'impression), qui est de 300 dpi. Et une résolution pour le web de 72 dpi. La taille en pixels doit aussi être adaptée.
Et bien entendu, le format : préférez le format webp, et évitez le png.
4. Pas de sliders, moins d'animations en code CSS et Javascript 🎯
Le slider, aussi appelé carrousel, est souvent utilisé pour mettre en avant de multiples images qui défilent en continu sur les pages d’accueil de sites Internet.
Ces derniers alourdissent le poids des pages avec du code dédié (CSS, JavaScript) et une utilisation plus importante des ressources processeur.
De nombreuses solutions existent pour une page d'accueil impactante, qui sort du lot et éco-conçue ! Prenez notre homepage pour exemple :)
5. Limitation de l'utilisation de plugins et extensions 💎
Faites le tri parmi vos extensions et focalisez-vous sur l'essentiel. Supprimez les plugins installés que vous n'utilisez pas.
Pourquoi ? Chaque ajout de fonctionnalité augmente la charge de travail pour le navigateur et les serveurs, entraînant une surconsommation de ressources énergétiques, contribuant ainsi à alourdir l'empreinte carbone du site.
6. Facilitation de la mise en cache🔧
Nous vous recommandons un plugin qui vaut toutefois le détour car il permet d'optimiser le poids de votre site Internet, sa vitesse de chargement et donc votre référencement. Il s'agit de WP Rocket. Un incontournable !
7. Utilisation de polices standard et non custom ⚙️
Optez pour des polices système (Arial, Georgia...) voire des Google Fonts qui permettent d'éviter des chargements supplémentaires.
Aujourd'hui, Google Font c'est plus de 900 polices que vous pouvez utiliser gratuitement sur votre site Internet ! Alors pourquoi aller en chercher encore d'autres ?
8. Choix d'un hébergement éco-responsable 🌎
Les études prédisent qu'en 2030, nous aurons besoin de 5 à 7 réacteurs nucléaires uniquement pour alimenter les datacenters en France.
Il existe des datacenter sensibles à l'écologie, oeuvrant pour diminuer leur impact environnemental.
Voici par exemple quelques actions dans lesquelles est impliqué l'hébergeur Infomaniak, que nous avons choisi pour l'hébergement de notre site.
- L'intégralité des activités d’Infomaniak fonctionne avec de l'énergie renouvelable certifiée
Leurs data centers sont refroidis avec de l'air extérieur filtré, sans climatisation - Infomaniak développe ses propres centrales solaires avec pour objectif de produire autant d'énergie qu’ils en utilisent
- Leur nouveau data center revalorise 100 % de l'énergie qu'il consomme pour chauffer jusqu'à 6 000 ménages
La dernière étape : utilisez des outils d'évaluation
Nous vous recommandons deux outils d'évaluation. En un clic, votre page web est passée au crible et des axes d'améliorations émergent.
L'éco-index est le plus exigeant et vous pousse à optimiser votre site au maximum : www.ecoindex.fr
Le Website Carbon mesure l'empreinte carbone de votre site, avec des chiffres parlants : www.websitecarbon.com