Comment j’ai éco-conçu ce site

Pour illustrer ce qu’est concrètement l’éco-conception web j’aime bien prendre des exemples parmi mes réalisations. C’est un peu particulier ici, car il s’agit de mon propre site. A priori, le client, c’est à dire moi-même, est sensible à la question de l’écologie. Ça devrait être vite réglé.
Voyons si les cordonniers sont vraiment bien chaussés.

Le besoin

J’ai besoin d’un site pour me présenter, montrer mes précédentes réalisations et communiquer sur le sujet de l’éco-conception web. Le site comprendra des pages de présentation personnelle (accueil et CV), un blog et un portfolio. J’y ajoute une petite interface de voyage virtuel pour montrer qu’on peut se permettre quelques fioritures tout en consommant peu de ressources.

Engagé dans une démarche d’amélioration environnementale de WordPress, j’utilise naturellement celui-ci avec un thème très léger : GeneratePress.
Globalement j’ai tenté de ne pas utiliser de ressources externes ou de dépendances. Ce site ne charge pas jQuery, ni de police web. Deux entorses à ce principe cependant : une bibliothèque JavaScript pour les animations et une autre pour le lazyloading.

Évidement j’ai optimisé chacune des images et j’ai prêté attention au nombre de requêtes sql que pouvaient générer les plugins retenus.
Je ne charge pas de police de caractère et j’utilise celles de l’OS du client avec ce qu’on appelle le system font stack. Ce procédé permet une certaine continuité en termes d’UX : les polices du site sont celle de votre OS.

Menu

Une simple barre latérale fixe avec des icônes pour la navigation de base et un menu burger pour une navigation plus approfondie. Les icônes sont en SVG et délivrées grâce à un sprite SVG directement dans le CSS. J’ai systématisé le recours aux spritesheet SVG dans WordPress avec un use Xlink vers l’ID de la partie du sprite que je veux voir affichée.

Accueil

Sur cette page il y a une petite animation que j’ai réalisée en JavaScript avec GSAP. Il s’agit d’une image SVG à laquelle j’applique un 3D transform. J’aurais pu animer en CSS, mais en ayant recours au JavaScript pour du 3D transform je sollicite moins le processeur des visiteurs. De plus, j’aurais besoin à nouveau de GSAP pour une autre page : j’appelle la bibliothèque sur ces pages uniquement. Elle est mise en cache du côté client et ne sera pas chargée une seconde fois sur la page aux animations plus complexes (qui aura également des images à charger). Il est possible avec les hooks de WordPress d’invoquer des scripts localement et non sur l’ensemble du site.

Portfolio

Là encore j’utilise les spirites SVG pour les icônes que j’insère cette fois dans le HTML.
J’expliquerai prochainement comment insérer du SVG et des spirites SVG dans WordPress, car celui-ci est assez capricieux en la matière.
Hormis le script pour le lazyload et le JS du lié au thème (minifié et concaténé en un seul fichier), il n’y a pas une once de JS dans cette partie du site.

Voyages

Sur cette page j’appelle à nouveau la bibliothèque de GSAP pour faire les animations. Contrairement à la page d’accueil, celles-ci sont impossibles en CSS. J’ai tenté d’optimiser au maximum le script des animations : pas de variable pour un élément que j’utilise une seule fois, des fonctions réutilisables…

Contrairement aux apparences cette page ne charge que deux images : 

  • les images de la galerie ne font qu’une : c’est un sprite. Résultat, une seule requête HTTP pour plus de 20 miniatures. Ensuite au clic on charge la véritable image (avec une lightbox js très légère, sans JQuery),
  • le planisphère n’est qu’un unique svg où chaque continent à une ID pour me permettre d’y accéder et de l’animer.

Blog

Un simple blog WordPress sans fioriture si ce n’est un travail sur l’UI avec des boutons en accord avec le design global du site. Chaque image à la une est un SVG donc le tout est relativement léger.

Cv

Je voulais un CV en forme de frise chronologique avec des éléments cliquables qui délivreraient davantage d’informations sous forme de popup. Pour ce genre d’interface, on pense tout de suite à jQuery ou à des plugins (qui utilisent TOUS JQuery). Telle n’était pas ma volonté : tout est fait à la main en CSS.

Au final, pas de problème de rendu quelque soit le navigateur ou le terminal. La mise en œuvre est évidement un peu plus longue qu’en employant un plugin, mais pas tant que ça. Et surtout, c’est fait et réutilisable.

Conclusion

Quelques dépendances volontaires avec des plugins liés aux images et à l’animation, mais que je pense avoir utilisés avec parcimonie. J’ai limité le recours aux images matricielles et je les ai optimisées. Les icônes sont des SVG servies inline grâce à un système de sprite. Cela a pour résultat d’alléger le poids du CSS, mais j’ai pris garde de fragmenter mon CSS en plusieurs feuilles pour ne charger que le CSS de la page.
Les scripts et les feuilles de styles sont concaténés pour chaque page et ne génèrent chacun qu’une requête HTTP par page.
La démarche de Webdesign est bien là. J’ai travaillé spécifiquement la typographie et l’interface (icônes, navigation, boutons…) pour proposer une expérience fidèle à mon propos.
Par rapport à l’ancien, mon portfolio a considérablement réduit son empreinte carbone tout en délivrant une navigation dynamique et des interactions modernes. Pour en juger, vous pouvez toujours le consulter à cette adresse (login et mot de passe : portfolio).

Laisser un commentaire