Comment rendre son site web éco-responsable ?

Épisode 29

Dans ce nouvel épisode, nous abordons un sujet devenu incontournable pour les professionnels du tourisme : comment rendre son site web plus éco‑responsable, sans sacrifier la performance ni l’esthétique. Aux côtés de Charly Dumont, responsable de l’agence de communication YATA, nous explorons des actions simples et efficaces pour réduire l’empreinte carbone de votre site : optimisation des photos et vidéos, choix des polices, allègement des contenus, hébergement vert… Autant de leviers concrets pour améliorer l’expérience utilisateur tout en adoptant une démarche numérique plus durable.

Transcription

Jean-Baptiste : « Imaginez que vous puissiez adopter une démarche écologique dans l’ensemble de la gestion de votre activité, y compris pour sa partie numérique. Car chaque clic, chaque image, chaque page web a une empreinte carbone. Aujourd’hui, nous allons voir comment repenser son site en adoptant des pratiques éco-responsables, sans pour autant renoncer à la performance ou à l’esthétique. Avec Charly Dumont, responsable de l’agence de communication Yata, nous allons découvrir des conseils pratiques et des exemples très concrets permettant de transformer facilement votre site internet avec une démarche plus écologique. Charly, bonjour. »

Charly : « Bonjour Jean-Baptiste. »

Jean-Baptiste : « Charly, je vous propose de commencer par la question des photos, question ô combien cruciale pour les sites web du secteur du tourisme. Et les photos, c’est justement ce qui pèse le plus lourd, je crois, sur une page web. Alors, quels sont les conseils en vue d’une démarche éco-responsable ? »

Charly : « Alors effectivement, Jean-Baptiste, sur les sites internet, généralement les photos, ça représente 60 % du poids de la page. Donc il y a un vrai intérêt de s’intéresser à la compression des images. Donc il existe des outils en ligne, en fait, gratuits, qui permettent de faire ça, et notamment de transformer les images que vous avez sur votre site web en format WebP, qui est le format aujourd’hui le plus optimisé sur le web. Donc c’est un petit peu fastidieux, mais effectivement, il y a des gains à faire qui sont plutôt intéressants pour optimiser votre page et justement qu’elle se charge plus rapidement. Alors après, effectivement, pour aller un cran un petit peu plus loin, ce qui peut être fait, c’est d’installer des outils qui automatisent cette tâche. Donc ça évite d’aller sur le web pour réduire vos images. Et à ce moment-là, c’est l’outil qui travaille pour vous. Vous intégrez vos photos, comme vous le faites actuellement, dans votre médiathèque internet, sur votre site, et l’outil gère automatiquement la réduction des images. Alors nous, pour petit exemple, on travaille sur WordPress, donc on utilise un outil qui s’appelle Imagify. Cet outil automatise la transformation des images et l’optimisation en WebP automatiquement. Vous n’avez rien à faire. Pour vous donner une idée des gains de performance sur un site web, on travaille dans le tourisme, nous. Sur une station de ski, on a fait l’essai avec un site qui a beaucoup d’images. Donc on avait 7,1 gigas d’images sur le site web. Après la compression, on arrive à 2,9 gigas, ce qui fait quand même une belle économie de plus de 60 % du poids total du site. Je parle pour les images. Effectivement, des gains de performance accrus aussi pour l’internaute qui consulte le site internet. »

Jean-Baptiste : « Une fois qu’on a fait ce constat, qu’on a compris le sujet, comment on s’y prend ? »

Charly : « Comment on s’y prend ? L’idée, c’est aussi d’avoir une stratégie. Ce n’est pas que de réduire les photos. Effectivement, globalement, quand on arrive sur votre site web, si on veut parler d’un site éco-conçu, il faut aussi avoir la notion de service rendu. Est-ce que la photo que j’ai mise rend un service à l’utilisateur ? Est-ce qu’elle a un intérêt ? Est-ce qu’elle est percutante ? Généralement, quand on arrive sur des sites web, on a souvent un bandeau avec un carrousel de photos, donc un slider photo, avec trois, quatre, des fois cinq photos qui sont là directement quand on arrive sur le site. Effectivement, ces photos, il faut les charger. Ce qu’on conseille, ça va peut-être être de varier en fonction de la saison. Peut-être d’avoir une seule photo, mais qu’on puisse la changer directement à l’automne, ensuite à l’hiver, avoir une saisonnalité et éviter tout un florilège de photos à charger sur le site internet quand on arrive. Avoir en tête que l’image, elle doit avoir un intérêt et un impact important, et pas juste être là en déco pour agrémenter le site sans réel but. »

Jean-Baptiste : « On a parlé des photos. Forcément, on pense aussi aux vidéos qui sont encore plus lourdes que les photos. Est-ce qu’il faut aller jusqu’à supprimer les vidéos du coup ? »

Charly : « Non, pas forcément. De manière générale, une stratégie d’éco-conception n’implique pas forcément de renoncer au design. En fait, il s’agit plutôt de hiérarchiser votre contenu, de l’épurer, de fluidifier la navigation pour faciliter l’accès à l’information. C’est ça, les points clés. Donc en bref, d’améliorer l’expérience utilisateur. On ne va pas forcément supprimer non plus tout ce qui va avoir de l’intérêt. Par exemple, sur les sites de tourisme, on a les webcams. Souvent, les webcams sont la plupart du temps les pages qui sont quasiment les plus consultées sur les sites web. Pourtant, ce sont des pages qui sont assez gourmandes à charger, à afficher. Là encore, il y a un intérêt puisque c’est une page très consultée. On ne va pas se dire qu’on va supprimer ça parce que ça consomme. Ce n’est pas du tout l’idée.

Jean-Baptiste : « Ce qui est intéressant, c’est effectivement toujours de partir de la stratégie, des priorités pour éco-améliorer son site. Comment on s’éco-améliore dans son usage des vidéos ? »

Charly : « L’idée déjà, c’est d’oublier les vidéos d’ambiance qui démarrent toutes seules, qui tournent en boucle derrière, qui sont lourdes à charger. On va préférer avoir peut-être une photo à la place qui remplit le même usage. Et ensuite, d’intégrer des vidéos qui démarrent au clic, donc qui ne sont pas chargées par l’internaute directement quand il arrive sur la page, mais qui sont plutôt volontairement lancées par la personne, sans forcément de charge serveur avant sur le site web. Ensuite, privilégier des vidéos à valeur ajoutée. Forcément, c’est simple de le dire, mais ça permet aussi de se dire que ce ne sont pas des vidéos d’agrément qui ne servent pas à grand-chose. Il y a vraiment un but qui correspond à la stratégie : où est-ce que je veux emmener mon internaute, mon client, pour après, derrière, soit un clic, une demande, un téléchargement, un achat. C’est l’idée. Et ensuite, ce qu’on conseille, ça va être de télécharger vos vidéos sur une plateforme comme YouTube ou Dailymotion et de les intégrer sur le site. Voilà, ce sont des plateformes qui sont faites exprès pour la lecture vidéo et c’est beaucoup plus performant que si vous les mettez directement dans le back-office de votre site et que vous les chargez à chaque fois. »

Jean-Baptiste : « Donc si on procède par ordre de priorité, on a vu que la première action à faire, c’était de s’occuper de sa médiathèque de contenu visuel avec des photos et des vidéos qui pèsent très lourd. Une fois qu’on a fait ça, qu’est-ce qu’on peut faire ? »

Charly : « Alors effectivement, il y a aussi le contenu qui va être intéressant à travailler dans sa stratégie d’optimisation.
Donc privilégier des contenus courts, suffisants aussi pour optimiser le référencement de son site, disons environ 600 mots, mais sans perdre aussi l’attention du lecteur. On voit maintenant, toujours se rappeler que les gens lisent de moins en moins, voire très peu. Donc ça va être aussi jouer peut-être sur les gros titres, sur les chapeaux, pour améliorer aussi la compréhension, la mise en forme, et utiliser des polices qui sont plutôt légères. C’est vrai qu’on n’y pense pas souvent, aux polices, mais elles ont un impact aussi. Dans l’éco-conception, on conseillerait plutôt des polices système. Alors, quand je parle de polices système, ça va être des polices qui sont directement intégrées dans votre ordinateur. Donc ça évite de charger la police. Arial, Verdana, Times New Roman, on les connaît, on a l’habitude. Donc comme elles sont déjà installées, il n’y a aucun téléchargement, donc le poids est nul en ressources. Du coup, ça permet d’avoir des chargements très rapides de police et une bonne visibilité sur tous les systèmes. Et ensuite, on a deux autres types de polices : les polices optimisées et les variables. Les polices optimisées, c’est avec chaque graisse et style ajouté. Donc à chaque fois, c’est un fichier en plus à charger. Et pour les variables, c’est une seule police qui regroupe plusieurs graisses et styles. Donc ça réduit un petit peu le nombre de fichiers. Et ensuite, on a également les polices avec les bonnes pratiques Google Fonts, donc Lato, Open Sans, etc., qui sont aussi optimisées pour l’affichage web. Alors le top du top en éco-conçu, ça va être de rester sur une police système. Forcément, elle ne charge pas. Et si on veut un bon compromis design versus écologie, je dirais qu’on peut rajouter une police variable un peu moderne, en limitant les variantes de graisses pour avoir le moins de fichiers à charger. »

Jean-Baptiste : « Et si on s’intéresse maintenant au côté peut-être plus technique, sans être un professionnel de l’informatique, est-ce qu’il y a une action simple à réaliser sur le fonctionnement de son site ? »

Charly : « Alors effectivement, sans rentrer dans les détails techniques comme le code, le back-office du site, une action qui peut être simple et qui peut également être intéressante pour le site web, ça va être d’utiliser un hébergeur vert, un data center qui fonctionne grâce aux énergies renouvelables. C’est peut-être aussi l’occasion d’avoir un hébergeur plus local, ça dépend où le site est hébergé. Il en existe plusieurs en France, on pourrait en citer quelques-uns, comme Switch, PlanetHoster. Nous, on utilise à l’agence DataCampus, qui est un très bon hébergeur vert, avec une charte RSE qui est plutôt poussée et des engagements écologiques qui sont forts et détaillés. D’ailleurs, ils hébergent une partie des sites de l’ADEME, donc on n’a pas d’actions chez eux, mais je vous les conseille.

Jean-Baptiste : « Et est-ce que c’est facile de changer d’hébergeur ? »

Charly : « Oui et non. Ça dépend si vous avez la maîtrise de votre site ou si c’est une agence qui l’a. Mais effectivement, changer d’hébergeur, ça implique de récupérer sa base de données et de l’installer sur le nouveau serveur. Donc il y a quand même un petit bagage technique à avoir, mais c’est tout à fait faisable. »

Jean-Baptiste : « Alors maintenant qu’on a réalisé toutes ces actions, qu’on est content d’avoir adopté une démarche d’éco-conception, est-ce que vous recommandez de communiquer sur cette démarche, sur son site, de raconter tout ça ? »

Charly : « Je dirais que c’est même essentiel. En fait, l’idée, c’est vraiment d’avoir une page dédiée sur votre site internet qui explique vos actions de manière concrète, pouvoir présenter ce que vous avez mis en place pour être en accord avec soit la destination, soit votre entreprise, et mettre en avant vos valeurs. Moi, je dirais que ça a vraiment un intérêt, et pour vous et pour l’internaute, de savoir quelles sont vos prérogatives et comment vous agissez pour être plus éco-conçu, plus en phase avec le développement durable, et avoir un réel impact sur le site. Donc après, même si tout n’est pas parfait, même si vous avez encore des choses à modifier, ça montre au moins votre volonté d’aller dans le bon sens. Et ensuite, pour appuyer votre discours, ce qui peut être fait, ça va être une analyse de votre site internet pour présenter un score écologique. On a plusieurs outils qui existent sur le web. C’est une bonne base avant éventuellement de présenter une refonte de votre site, donc faire un avant-après. Nous, on a développé à l’agence un outil qui s’appelle EcoWebScore. Vous pouvez l’utiliser. Il est accessible et gratuit, c’est en ligne. Ça vous donnera une note sur votre site classée de A à G, A étant la meilleure bien sûr, et G étant la plus mauvaise. »

Jean-Baptiste : « Oui, vous parliez de refonte. Alors peut-être un mot avant de conclure sur l’idée d’une refonte plus globale qu’on peut peut-être imaginer dans un temps ultérieur. Quels sont les points clés à avoir en tête quand on veut lancer cette action beaucoup plus en profondeur ? »

Charly : « Alors un audit peut être bien pour commencer, pour savoir d’où vous partez sur votre site internet. Là, on a réalisé récemment une refonte de site internet pour, on peut le citer, l’Office de tourisme des Rives du Morvan. Le site était classé en E avant la refonte et maintenant, on est classé en C sur l’ensemble du site internet. Donc c’est plutôt une note honorable, notamment pour un site de tourisme avec beaucoup de connecteurs. Ensuite, la base, ça va être de rédiger le cahier des charges. Pour la refonte, vous pouvez vous appuyer sur le RGESN, le Référentiel général d’éco-conception des services numériques de l’État. Ce sont les mesures phares pour une éco-conception numérique. Elles se découpent en huit points et vous avez toutes les informations nécessaires pour construire un site éco-conçu et respectueux de l’environnement. Si je peux vous donner un conseil, ça va être de suivre déjà le référentiel. Parmi les autres points d’attention à avoir, je pourrais en citer trois. Le premier, ça va être de limiter le poids des pages et des ressources. On en a parlé : optimiser les images, utiliser des typographies légères, réduire tous les fichiers CSS et JS. Là, ça va être la minification du code, la suppression des scripts inutiles. L’objectif, dans ce premier point, ça va être d’avoir un site rapide à charger et moins gourmand en énergie. Ensuite, le deuxième point d’attention, ça va être de concevoir une architecture et une expérience utilisateurs sobres. Une arborescence claire et efficace, pour que l’utilisateur trouve l’information en peu de temps, donc le moins de clics possible. Mais ça va aussi avec du bon sens, ce n’est pas que de l’éco-conception. On a aussi des contenus bien hiérarchisés, sans surcharge, et une navigation fluide, sans effets inutiles et animations. C’est vrai qu’on peut en mettre quelques-unes, mais l’idée, ce n’est pas de noyer l’internaute sous des effets qui sont stroboscopiques, si on peut dire. Et ensuite, le troisième point, ça va être de choisir des solutions techniques responsables et durables, comme un CMS avec un code sur mesure allégé, donc pas de surcouches lourdes, pas de constructeurs de pages inutiles. Je pense à des builders comme Divi, Elementor, et des plugins superflus qui n’apportent pas grand-chose et qui sont très lourds à charger. Et bien sûr, comme on le disait, un hébergeur vert, un data center qui utilise des énergies renouvelables. »

Jean-Baptiste : « Merci beaucoup, Charly.

Je retiens les bonnes pratiques.
– Un, je ne garde que les contenus photos, vidéos et textes vraiment essentiels pour expliquer et illustrer mon activité.
– Deux, une fois la sélection faite, je compresse les photos et je les optimise.
– Trois, je choisis un hébergeur vert.
– Quatre, je communique sur ma démarche éco-responsable, notamment via une évaluation avant-après de l’éco-score de mon site.

Encore merci, Charly, et merci à vous pour votre écoute. Pour ne rien manquer des conseils de nos experts, pensez à vous abonner à notre chaîne de podcasts Explore Grand Est Académie. N’oubliez pas de mettre des étoiles si cet épisode vous a été utile.

Voix off : « C’était Adopter les bonnes pratiques, un podcast de l’Agence Régionale du Tourisme Grand Est. Rendez-vous dans 15 jours pour un nouvel épisode. »

Un podcast de l’Agence Régionale de Tourisme du Grand Est, produit avec

Un projet déployé avec le soutien de la Région Grand Est.
Explore Grand Est Académie fait l’objet d’un financement FEDER.