Comment je travaille

Je vous explique ici dans les grandes lignes quelle est ma méthode pour éco-concevoir un site web. Cette méthode sera illustrée par des retours d’expérience au fil du blog dans la rubrique Webdesign.

Efficience

Avant tout je cherche la meilleur efficience possible (consommation des ressources utilisées dans la production d’un résultat) pour atteindre des objectifs définis avec le client.
Il s’agit de communiquer de manière pertinente en accordant les moyens mis en oeuvre avec les objectifs.

L’efficience ultime d’une page web serait un fond blanc avec du texte noir. Pas de mise en forme, du pur html. Le site du client serait particulièrement sobre, mais personne ne s’y attarderai. Ce n’est ni efficace ni pertinent.

Communiquer sur le web c’est aussi respecter certains canons esthétiques et inscrire son message dans univers graphique fluctuant. Ne pas respecter ces codes c’est prendre le risque de ne pas être vu (l’inverse est aussi vrai : le conformisme peut rendre identique voire indistinct).

Communiquer en étant éco-responsable c’est donc être visible et reconnu à l’aide d’une économie des moyens mis en oeuvre (peu ou pas de superflus) en accord avec des principes écologiques.

Connaître les tendances du design, leurs mise en oeuvre technique mais aussi ce qu’elles impliquent en terme de consommation de ressources : voici pour moi l’aspect fondamental de mon travail.

Webdesign

Dès le zoning, je dois être conscient de ce qu’implique mes propositions en terme technique (là rien de nouveau) mais aussi en terme environnementaux.
Une interface web moderne est impensable sans animation ni micro-interactions. Il faut dès l’origine les retenir et les penser là où elles sont les plus pertinentes pour mettre en avant le message porté et garantir le confort de navigation de l’utilisateur.

Cela suppose la mise en oeuvre de ressources et des lignes de code supplémentaire. 

WordPress

Pour permettre à mes clients une autonomie dans la mise à jour de leur site j’utilise le CMS WordPress. Celui-ci offre, une infinité d’option de personnalisation et permet d’intervenir sur l’impact environnemental du site.

Je travaille avec le thème GeneratePress qui est un framework extrêmement personnalisable, au code propre et optimisé. Qui plus est, il est très léger et permet un affichage rapide des pages (beaucoup de thème WordPress se targuent de vitesse alors qu’ils sont sur-gonflés).

Grace à ce framework je peux construire mes propres thèmes très rapidement sans avoir recours à un thème enfant qui ajouterait une sur-couche et une charge supplémentaire pour la base de données. GeneratePress n’a pas de dépendance, il ne charge pas jQuery ni Font Awesome (pour le moment il charge une google font, ce ne devrait plus être le cas lors de la prochaine mise à jour).

Code

Dans le même esprit que le thème que j’utilise, j’attache une attention particulière au code que j’écris. J’évite les répétitions pour ne pas créer de lignes inutiles. J’utilise des sélecteurs les plus précis possible en CSS et JS afin de ne pas trop solliciter le CPU. Dans la mesure du possible j’essaie de n’utiliser que du CSS, on peut déjà faire des choses remarquables avec celui-ci. Concernant les animations, j’observe dans l’inspecteur de mon navigateur leurs performances. Pour les animations CSS je choisis d’agir sur les propriétés les moins gourmandes en énergie (translate, scale, rotate et opacity). J’ai recours au JavaScript s’il le faut pour certaines interactions. Pour des animations très complexes, j’ai remarqué un gain de performance en utilisant des bibliothèques JS spécialisées même par rapport au CSS (c’est un des rare cas où j’ai recours à une bibliothèque externe).

Plugins

Mon premier critère pour choisir une extension WordPress va être son absence de dépendance.

J’ai le soucis de limiter le nombre de requête, mais aussi d’éviter l’inflation de ligne de code au travers le chargement d’une bibliothèque dont on utilise seulement une petite partie. C’est pourquoi je cherche à ne pas utiliser jQuery (le javaScript fait tout aussi bien le travail et est lu nativement par les navigateurs) ni Font Awesome (des sprites SVG, via quelques bidouilles pour s’afficher dans WordPress, fonctionnent très bien, sont plus légers et, cerises sur le gâteau, sont plus vertueux en terme d’accessibilité). Pour les polices, sauf mention dans charte graphique du client, je n’ai pas recours aux google font. Le texte sera affiché avec la police de l’OS du client (ce qui est assez classe).

Mon second critère est le nombre de requêtes faites pas le plugin à la base de données. Je fais cette mesure avec Query Monitor (qui certes charge jQuery, mais je n’utilise cette extension qu’en phase de production).

Ces critères m’ont fait délaisser un certain nombre de plugin TRES utilisés et qui pourtant ont recours à des moyens colossaux pour accoucher d’une souris (contact form 7 est l’exemple le plus emblématique). A la place : soit un autre plugin, soit DIY (mais une fois que c’est fait, c’est réutilisable).

Pour accélérer mes pages et réduire leur poids et le nombre de requête serveur j’utilise :

  • un plugin d’optimisation des images (qui limite aussi leur taille et les recadre si le client en charge une très grande). Les images représentent en moyenne un quart du poids d’une page web. J’active aussi le lazy loading.
  • Un plugin de minification du css, du html et du javascript qui supprime aussi le chargement des emoticons et autres fioritures de WordPress dont je n’ai pas besoin.
  • Un plugin de mise en cache.

Résultat, si j’ai travaillé proprement mes sites sont rapides et s’en sortent haut la main lors de la série de tests auxquels je les soumets.

Tests

Pour chaque page, j’utilise des outils de test de la vitesse très répandus comme GTmetrix ou Google insight.

Il existe également des outils qui permettent de mesurer les performances environnementales :

On peut retrouver ces deux derniers sous forme d’une extension (chrome uniquement) pour auditeur ses sites même en travaillant sur un serveur local. Enfin, cette extension (firefox uniquement) mesure l’empreinte carbone d’un site au cours d’une visite.

 

Pour résumer ma méthode : penser à l’impact environnemental dès les prémices de la conception du site, utiliser des ressources logiciel sobres et performantes (thèmes et plugins) et ne pas hésiter à les comparer, enfin, soumettre le site à des tests, faire des modifications, ajuster des réglages et retester.

Laisser un commentaire