Concepteur Designer UX UI éco-performant
3

Concevoir un site web éco performant

This website obtain a score of 82 - checked by kastor.green

Le résultat de l'audit réalisé sur la page accueil de krisken.fr le 27JUIL2025 par Kastro.green montre que Krisken.fr atteint un score d'éco-responsabilité de 82/100.

L’éco performance, qu’est ce que c’est ?

L’éco-performance est le concept qui permet de répondre aux besoins de l’utilisateur en améliorant l’impact environnemental tout en restant économiquement viable. Partant de cette définition, on peut déduire plusieurs manières de travailler mieux dans un objectif écologique.

Choisir un hébergeur proche de son client

Tout site web est hébergé sur un serveur. Un serveur est une sorte de disque dur toujours accessible via une adresse URL. Ce serveur consomme de l’énergie pour rester allumer en permanence. Si vous souhaitez afficher un site web, vous envoyez une information numérique (une requête) via internet depuis votre ordinateur. L’information circule vers l’hébergeur et celui-ci vous renvoie les informations qui permettent d’afficher le site web que vous attendez. Le trajet effectué par toutes les informations consomme lui aussi de l’énergie. Dès lors, plus l’hébergeur est éloigné de l’ordinateur d’où vous naviguez, plus l’énergie consommée est importante.

On s'est vite rendu compte que si internet était un pays, il serait le 3ème plus gros consommateur d’électricité au monde avec 1500 TW/H par an (2022), derrière la Chine et les États-Unis. Au total, le numérique consomme 10 à 15 % de l’électricité mondiale, soit l’équivalent de 100 réacteurs nucléaires !!
(src: https://www.fournisseur-energie.com)

Il devient donc tout à fait nécessaire de chercher par tous les moyens de réduire cette quantité d’énergie utilisée. Une des solutions est de réduire la distance entre l’ordinateur et le disque dur. Et cela devient possible en choisissant un hébergeur physiquement proche de ses clients. Si votre site web est destiné à des cibles françaises, quel est l’intérêt d’aller installer son site web sur un serveur américain ? Autant choisir un hébergeur dont les disques durs sont hébergés en France, n’est-ce-pas ?

La base : Choisir les bons formats de fichier image

Ce qui pèse le plus lourd dans un site internet, ce sont les visuels. Chaque visuel à son format adapté pour le web selon des critères techniques précis.

Choisir le format .jpg pour exporter les photos

Pour intégrer une photo dans son site internet, c'est le format .jpg qui est le pus adapté. Le format .JPG possède cet avantage d'être compressé numériquement et en plus il peut être optimisé grâce à l'export pour le web en réduisant sa qualité visuelle jusqu'à un résultat optimal.

Utiliser le .png pour les fichiers qui ont besoin de transparence

Si toutefois, vous aviez prévu d'utiliser la transparence, et que certains de vos visuels, telles que des photos, doivent être exportées avec leur canal alpha, le réflexe nous inculque d'utiliser le format .PNG pour le web. Seul le format PNG permet d'exporter la transparence pour le web. C'est donc un bon réflexe ! Attention cependant, car le .png est plus lourd que le .jpg. Contrôlez bien votre export et pesez le pour et le contre.

krisken.fr un site web responsive conçu en mobile-first

Quelle est la différence entre le PNG-8 et le PNG-24 ?

Proposé dans l'export pour les écrans dans Photoshop par exemple, Le PNG-8 est un export qui prend en charge 8bits de transparence. C'est à dire que les éléments de votre fichier .png sera oo transparent ou opaque. Il n'y a pas d'entre les deux. Contrairement au PNG-24, qui prend en charge une transparence de 24 bits, ce qui lui permet de proposer des éléments de votre fichier de 0 à 100% de tansparence.

Intégration de contenus personnalisé sur urbanoe.fr

Dernière technologie image Les images de dernière génération

Ce qui est bon pour la planète est aussi très bon pour votre référencement !

Exporter les fichiers vectoriels en .svg

Si vous avez créé des pictogrammes avec votre logiciel vectoriel favoris, le meilleur format pour utiliser du vectoriel dans le web est le format SVG. Et oui ! C'est le format de fichier vectoriel exclusivement dédié au web. Et le format SVG possède beaucoup d'avantages :

  • Son poids en octets très réduit
  • Son homothétie
  • Il conserve la transparence
  • Il se manipule grâce au CSS (en code html)
  • On peut l’animer (en code html)

Quelques restrictions à observer cependant. Une fois qu’on commence à utiliser le SVG, on va vite se voir exporter tout nos fichiers vectoriels en .svg. Mais attention, parfois le poids du fichier SVG devient plus lourd qu’un export d’un autre format tellement il y a de vecteurs dans l’illustration. C’est le limite qui nous conduit à favoriser le type de fichier suivant…

Utiliser le format .webp

Ce format de dernière génération est particulièrement intéressant car il permet d'exporter des visuels de type photgraphies de manière encore plus compressée que le .jpg. Il permettrait d'économiser entre 20 et 30% de plus que le .jpg otpimisé. Et "the cherry on the cake" (faux-ami anglais à jeter à la poubelle après m'avoir lu), le format .webP comprend aussi la transparence de 24bit (comme le .PNG-24) ! Il est donc sans doute la compromis le plus éco-performant pour les visuels du web (hors vectoriel).

À savoir que ce format est éditable depuis Photoshop.

En savoir plus: https://helpx.adobe.com/fr

La rapidité d'affichage de votre site web est une des clefs de sa réussite

Le 21 novembre 2022, le moteur de recherche Google a modifier son algorythme. Il favorise le référencement des sites web qui s'affichent plus rapidement. En maîtrisant tous les facteurs d'économie d'énergie, vous contribuez donc aussi à améliorer votre positionnement.

Il existe aussi d'autres façons d'accélerer son site web :

  • Minimiser les fichiers de feuilles de styles et javascript
  • Supprimer les pugins WordPress inutilisés de vos sites web
  • Limiter les technologies qui demandent un CDN (réseau de diffusion de contenu)
  • Préférer le langage Javascript plutôt que JQuery. Art. Les langages du web

Un site web éco-performant et accessible

Le web représente une consommation d'énergie non négligeable dans le monde. En 2018 Internet consommait déjà 10 à 15 % de l'électricité mondiale. En 2023, Internet représente 2 à 4 % des émissions de gaz à effet de serre (src: ekwater.fr).

De plus, Google privilégie de plus en plus l’expérience utilisateur ; la performance du front end est incontestablement prise en considération dans le classement des résultats de recherche. Depuis novembre 2023 c'est même un facteur améliorant le positionnement des sites web.

Il me paraît donc indispensable d'offir à vos utilisateurs, un site web rapide et performant tant sur le front end que sur le back end.

La performance passe aussi par l'accessibilité de vos contenus.

Je fais le maximum pour rendre votre site web le plus accessible possible en respectant les normes RGAA.

Assurer la sécurité et la maintenance de votre site web

Un site internet, notamment avec le CMS le plus connu et le plus utilisé dans le monde, j'ai nommé Wordpress, c'est comme le lait sur le feu. Il ne faut pas le laisser sans activité ! Je m'occupe de la maintenance de votre site web. À la moindre alerte, je vérifie l'ensemble des mises à jour, corrige les bugs éventuels et reste au fait des failles de sécurité.

Animer votre site internet

Vous devrez aussi faire vivre votre site web, sinon, vous allez rapidement perdre des places dans le positionnement de votre site sur les moteurs de recherches. Animez-le en même temps que l'ensemble de vos réseaux sociaux, et créez des contenus à forte valeur ajoutée vers vos cibles qualifiées. La création d'un blog, par exemple, est un excellent moyen de mettre en avant vos produits ou vos services…

Un site web inactif est un site web qui disparaît

La sortie officielle de votre site web est un évènement en soit. Dites-le sur vos réseaux pour améliorer votre visibilité et rassurez vos (futurs) clients. Il s'agit ensuite de faire vivre votre site web car un site web inactif est un site web qui disparaît. Si vous laissez vivre votre site sans jamais y toucher les moteurs de recherches vous feront peut à peu disparaître au profit d'autres plus actifs. Confiez l'animaiton de votre site web et de vos réseaux sociaux pour asseoir votre e-réputation sur la toile.

Découvrir mon Book / Portfolio

Book / Portfolio