Dans le cadre de la stratégie touristique départementale pour un tourisme responsable, qui se traduit dans le Schéma du tourisme et des loisirs responsables 2023-2028, les équipes oeuvrent pour tendre vers un numérique plus responsable.
Pour assurer une durée de vie la plus longue possible avec un poids le moins important de notre site internet https://tourisme-loireatlantique.com , l’équipe a recherché une solution technique et fonctionnelle visant à contourner l’obsolescence trop rapide du site web.
Accompagnée par l’agence conseil LunaWeb, nous avons développé ce nouveau dispositif numérique dans une logique de numérique responsable en respectant :
- Le référentiel général d’écoconception de services numériques (RGESN) lors de la phase de conception, de webdesign et de développement
- Le référentiel général d’amélioration de l’accessibilité RGAA
- Le référentiel d’éco-conception web (proposé par le Collectif Conception Numérique Responsable)
Parmi les solutions mises en place, on retrouve notamment :
- Un hébergement français du site et de sa base de données sur l’infrastructure haute disponibilité Cognix Hosting basée à Rennes, et en particulier son offre CLO2 Green. Cette formule propose une compensation carbone adaptée et des pratiques vertueuses de gestion matérielle et logicielle des services, en vue d’économiser l’énergie et d’améliorer la durabilité des équipements.
- Une sobriété visuelle (moins de photos, plus d’illustrations légères…)
- Des fonctionnalités essentielles (le superflu a été écarté)
- Une taille limitée pour le téléchargement de fichiers
Un site web écoconçu dès la conception
Se concentrer sur les objectifs utilisateurs pour répondre à leurs besoins
Fluidifier l’expérience utilisateur et simplifier l’arborescence
- L’organisation du site a été revue pour fluidifier l’expérience utilisateur : arborescence repensée en fonction des attentes des utilisateurs avec 5 grandes entrées par envie, saisonnalité et accessibilité
Éliminer le superflu
L’intérêt des fonctionnalités et contenus a été questionné lors d’un atelier de sensibilisation à l’écoconception et l’accessibilité web et un atelier de co-conception (arborescence, navigation et fonctionnalités). Certaines fonctionnalités initialement souhaitées ont été écartées car elles n’étaient pas réellement nécessaires à l’utilisateur naviguant sur le site (contenus en provenance du SIT, module cartographie, téléchargements excessifs).
Supprimer ce qui n’est plus utile
- Dès la phase de définition de l’arborescence, il a été décidé de supprimer les contenus qui ne seraient plus utiles, comme par exemple une vidéo affichée en plein écran sur la page d’accueil de l’ancien site web
- Éliminer la recherche via une infographie dynamique par ville pour accéder aux contenus éditoriaux et via une carte pour accéder aux contenus du SIT
- Supprimer les spécificités du module de recherche par zones géographiques et multicritères pour proposer une recherche guidée en 3 étapes afin d’accompagner l’utilisateur pour affiner sa sélection et créer son carnet d’escapades personnalisable et partageable.
Penser mobile first
- Le site est responsive et a été conçu en mobile-first, dès la phase de zonings, évitant ainsi d’intégrer du superflu et de concevoir des pages trop longues.
Choix graphiques
- Utiliser uniquement une typographie (Be Vietnam) avec une limitation des graisses
- Ne pas embarquer la gestion du Retina
- Choix de ne pas afficher d’images en plein écran, d’alléger le header/footer, pour limiter le chargement de chaque page
- Limitation du nombre d’images et utilisation dans des formats plus petits (en taille et format d’image webp)
- Utilisation du format svg pour les éléments graphiques simples
Pas de scroll infini
- Privilégier des paginations plutôt que des scrolls infinis (moins de ressources, donner le contrôle à l’utilisateur, afficher uniquement ce dont il a besoin et pas tout charger inutilement…)
Un code html propre et sur-mesure
Le site est basé sur des technologies Web standards (HTML, CSS, JS) qui ont peu de chances de devenir obsolètes. Aussi, le site respecte les normes HTML5 pour une validité W3C à 100%.
L’interface est réalisée sur-mesure :
- Le markup HTML (balises) est limité au strict nécessaire, réduisant ainsi la taille du DOM et le poids de la page.
- L’interface est développée en composants :
- améliorant ainsi la maintenabilité et la réutilisabilité des éléments,
- réduisant sur le long terme la quantité de code obsolète chargé inutilement.
- L’usage d’éléments HTML natifs (éléments de formulaires, détails…) est favorisé afin de bénéficier de leur sémantique et de leurs fonctionnalités embarquées par les navigateurs. Cela permet d’éviter le développement superflu tout en garantissant la compatibilité du site avec les différents navigateurs et terminaux.
- Le site embarque un minimum de librairies externes, réduisant ainsi :
- le nombre de ressources pour lesquelles nous n’avons pas le contrôle du poids et de la qualité du code,
- le nombre de requêtes.
Responsive design
Le site est responsive : il s’affiche correctement sur l’ensemble des terminaux et leurs résolutions.
Le responsive design est géré à l’aide de breakpoints permettant de définir des styles CSS dédiés à des résolutions de fenêtres spécifiques, réduisant ainsi le nombre de propriétés chargées pour chaque terminal.
Les images
Toutes les images du site sans exception sont redimensionnées à leur taille d’affichage et compressées automatiquement. Ainsi, les fichiers images téléchargés sur le site par l’administrateur ou l’éditeur ne sont pas utilisés tels quels : ils profitent d’un traitement en amont.
Selon la direction artistique et les choix opérés lors du maquettage, certaines images sont croppées. Le cropping permet, en plus du redimensionnement (qui respecte les proportions de l’image d’origine), de définir une taille exacte à l’image, coupant ainsi les bords haut/bas ou gauche/droite de l’image. Dans certains cas, cette technique permet encore de réduire le poids de l’image et de ne charger que le nécessaire, c’est-à-dire la partie visible de l’image (il est par exemple inutile de charger une image au format portrait dans un bloc carré).
Une réflexion est portée sur le type de l’image : illustrative (exemple : une photo de paysage) ou informative (exemple : un graphique). Par exemple, une image informative ne peut pas être croppée, contrairement à une image illustrative. Ainsi, chaque image est pensée et traitée individuellement selon les choix de conception préalables, l’administrabilité du contenu ou encore l’évolution responsive du composant d’interface.
Dans le cadre du responsive design, une variante de l’image est générée pour chaque breakpoint afin de respecter la taille d’affichage sur chaque terminal et ainsi réduire le poids de l’image chargée. Selon les besoins, l’attribut srcset ou la balise picture sont utilisés. Le navigateur peut ainsi délivrer l’image la plus adaptée au contexte de l’utilisateur. La propriété background-image est évitée autant que possible.
Deux formats d’images sont très largement privilégiés :
- Le WebP : format d’image dit “nouvelle génération”, il réduit drastiquement le poids des images sans perte de qualité et gère la transparence, permettant de l’utiliser en remplacement du format PNG.
- Le SVG : format vectoriel très léger, il est utilisé pour toutes les icônes du site, ainsi que pour les logos et les illustrations lorsque c’est possible.
Dès que possible, le chargement des images est différé (lazyloading). Cette méthode concerne les images en dehors du viewport, soit la plupart des images sous la ligne de flottaison et dans des composants dont certains contenus sont cachés (slider, burger menu…).
Focus sur le SVG
Contrairement à un fichier image classique (JPG, PNG, WebP…), un fichier SVG n’est autre qu’un ensemble de balises HTML. Ainsi, chaque icône SVG est optimisée, réduite au strict nécessaire en termes de balises et d’attributs. Le code source est ensuite normalisé et compressé.
Les fichiers SVG ne sont pas appelés individuellement, mais agrégés dans un seul et même fichier appelé sprite SVG. Il s’agit d’un seul et même fichier réunissant un ensemble d’icônes SVG. Cette méthode permet de réduire drastiquement le nombre de requêtes (une seule requête pour toutes les icônes du site). Plusieurs sprites peuvent être générés pour réduire le nombre d’icônes intégrés inutilement dans le fichier selon les pages du site.
Compression et minification des ressources
Les fichiers CSS, JS et SVG ont été travaillés pour réduire le nombre de requêtes envoyées au serveurs en fonction des parcours utilisateurs (Sprite SVG, fichiers fusionnés, illustrations SVG ). Ainsi, tous les styles CSS utiles sont réunis et minifiés en un seul et même fichier. Il en est de même pour le JavaScript.
Les différents fichiers délivrés au navigateur par le serveur sont compressés en GZIP et comportent un système de hash afin de capitaliser sur le cache navigateur.
Contrôle qualité
Des critères de contrôle qualité liés à l’écoconception et l’optimisation sont présents dans le process projet :
- La stack LunaWeb de départ (le noyau) a été développée sur-mesure et optimisée pour garantir une performance optimale.
- Des outils permettent d’analyser et de valider la qualité du code produit tout au long de la phase de développement.
- Une checklist de contrôle dédiée à la qualité du développement est mise à jour tout au long du projet, puis revue et validée en fin de projet lors de la phase de recettage.
- Un test Google PageSpeed approfondi est systématiquement réalisé en fin de projet afin de détecter d’éventuelles améliorations complémentaires liées principalement à la performance et à l’éco-conception du site.
Les éléments techniques du site internet
- Mise en cache
- Optimisation base de données
- database index indexes
- nombre de requêtes
- optimisation des requêtes
- Performance stack Worpress