Catégorie de l'article : Tendance

Podcast Low-tech web : faire simple, utile et efficace

·
lecture 40 minutes
Frédéric Pineau - Expert Web Performance
publié par

Frédéric Pineau
Directeur Technique

Il y a quelques semaines, j’ai eu la chance d’être invité par Monica BAUTISTA et Emma Nardelli-Peltier pour participer à un épisode de L’Ec(h)o Web, consacré au low-tech appliqué au web. Celui-ci a été partagé sur plusieurs plateformes de podcast pour être mis à la disposition de toutes et tous… Du moins, c’est qu’on pourrait croire. C’est là que la règle n°121 d’Opquast m’est revenu à l’esprit :  » Chaque contenu audio et vidéo est accompagné de sa transcription textuelle » . Alors que l’accessibilité devient un sujet de plus en plus important sur le web, il me semblait impensable de ne pas rendre le contenu de ce podcast (selon moi essentiel vu que c’est mon propos…) accessible et lisible. Il va s’en dire car vous n’êtes pas dupe, que l’intérêt est ici double puisque le texte ci-dessous sera aussi indexé par les moteurs de recherche et crawlable par toutes les IAs tendances du moment et de demain.

Donc bonne écoute et/ou bonne lecture selon votre choix.

 


Introduction et présentation de l’invité

Emma : Bonjour et bienvenue dans « L’Ec(h)o Web », le podcast où l’on parle du numérique autrement, avec un axe écologique, sociétal et culturel.

Je suis Emma Nardelli et je suis ravie de vous retrouver pour ce nouvel épisode. Aujourd’hui, on va parler d’un sujet qui peut sembler paradoxal, le low-tech appliqué au web. Alors que nos sites, nos applications, nos outils numériques deviennent toujours plus complexes, plus lourds et plus énergivores. Est-ce qu’un autre modèle est possible ? Un web plus simple, plus sobre, plus local, mais toujours plus performant et efficace.

Pour en parler aujourd’hui, je suis accompagnée de Frédéric Pineau, co-gérant et directeur technique chez artwaï. Avec lui, nous allons parler de sobriété numérique, de low-tech, de souveraineté numérique, mais aussi de conception web, de performance et de production locale.

Emma : Bonjour Frédéric, bienvenue, merci.

Fred : Bonjour Emma.

Emma : Est-ce que pour commencer, tu peux te présenter et nous expliquer ce que tu fais comme métier, s’il te plaît ?

Fred : Alors je suis co-gérant & directeur technique d’une petite société, une agence web qui s’appelle artwaï, à Rennes en Bretagne, qui compte une dizaine de collaborateurs, dont deux collaboratrices, c’est important de le dire parce qu’on n’est pas nombreuses, et qui travaille conjointement avec une agence sœur, qui s’appelle l’agence Polux pour tout ce qui est UX. Et on a une petite dizaine d’indépendants aussi avec qui on travaille régulièrement. Nicolas, mon associé, dit couramment qu’on a l’équivalent d’une production de 30 équivalents temps plein.

Voilà, pour donner une petite idée. Ce qu’on fait, c’est du site web. Alors, soit en maintenance, soit en refonte, soit en création. Mais aussi, on a développé ces dernières années une expertise sur la webperf. Au sens temps de chargement des pages de votre site web et on a même développé une IA, une intelligence artificielle qui s’appelle MilleCheck.

Emma : Ok.

Fred : Qui s’appelle MilleCheck parce que ça check mille trucs.

Emma : C’est pas mal.

Fred : Avec un petit shaker qui se remplit au fur et à mesure qu’il fait ses tests. C’est assez rigolo, mais ça teste vraiment énormément de choses et ça a beaucoup d’indicateurs. Et nous, à la base, on s’en servait pour nous, pour avoir un cahier des charges minimum qualité, puisque ça ne check pas que la performance. Ça check aussi les normes d’éco-conception, on en parle aujourd’hui, le SEO, la sécurité.

Et bientôt, on va même tester un peu d’UX. Donc là, on va faire des tests comme ça.

L’ADN d’artwaï : Accessibilité et Télétravail

Emma : Toi, ton rôle exactement, tu fais quoi ? Tu gères les équipes ?

Fred : Je gère les équipes, donc je vais voir le suivi de production, que tout le monde soit bien occupé et qu’on réponde aux demandes de nos clients. Mais je vais aussi concevoir MilleCheck et être l’expert référent sur toutes les problématiques WebPerf.

Emma : D’accord. Et l’entreprise, elle est née quand ?

Fred : Alors, l’entreprise, elle est née en 2005.

Emma : D’accord.

Fred : On a 20 ans depuis l’année dernière.

Emma : Joyeux anniversaire!

Fred : Merci! Et c’est une société qui est en full travail.

Emma : D’accord, ok.

Fred : Ça veut dire qu’il n’y a pas de local depuis sa création.

Emma : Donc ça a toujours été comme ça ?

Fred : Ça a toujours été comme ça et c’est notre ADN. Même à un moment, on a une société qui vivait bien, on a gagné un peu d’argent. On s’est demandé est-ce qu’on ne pourrait pas investir, ce qui est toujours recommandé par nos chers financiers. Mais en fait non, parce que c’était gâcher notre ADN.

Donc on est resté dans cette logique-là de télétravail. Et en matière d’éco-conception, c’est que le télétravail, ça a un certain avantage.

Emma : Et l’éco-conception, c’était vraiment la base de la création de… Pourquoi tu as décidé de faire cette entreprise ? C’était quoi les valeurs de base ? Qu’est-ce que tu voulais répondre comme besoin ?

Fred : Dans artwaï, il y a “Art”. L’idée, c’était de faire des choses jolies. Et “Waï”, c’est la Web Accessibility Initiative. Donc de faire des sites qui étaient conformes aux normes. Notamment aux normes pour l’accessibilité.

À une époque où on faisait des sites web, alors pour ceux qui codent un petit peu, les mises en page étaient faites avec des tableaux en HTML. Donc ça voulait dire quoi un tableau en HTML ? C’est que pour faire un bloc avec des coins arrondis, il fallait faire des images pour les quatre coins arrondis en blanc, mettre des fonds dans les cellules et après vous mettiez votre page à l’intérieur de tout ça par exemple.

Emma : Et pour ceux qui ne codent pas, ça ressemble à quoi ?

Fred : Vous ne voyez pas la différence, si ce n’est que le code produit derrière est illisible pour un lecteur d’écran. Parce que pour lui, il dit premier coin, image, deuxième coin, un titre, deuxième cellule, un titre, troisième cellule, le deuxième coin arrondi de l’autre côté.

Donc c’est illisible pour un lecteur d’écran, ce n’était pas bien référencé et puis à maintenir c’était juste l’enfer.

Emma : Donc ça c’est pourquoi tu as créé l’entreprise, mais comment tu en es venu à ça, c’est quoi ton parcours ?

Fred : Alors mon parcours, alors c’est assez rigolo, j’ai fait du latin au collège, plutôt littéraire, pour arriver en une seconde technique, pour repartir sur une première et une terminale scientifique avec un bac C

Emma : Oula, alors attends, Bac C…?

Fred : Bac C, c’est un bac maths physique. Mais derrière, j’ai fait administration économique et sociale. Donc j’ai un DEUG en administration économique et sociale. Tout ça pour remigrer en maîtrise de l’information et de la communication.

Emma : Donc la question, c’est qu’est-ce que tu n’as pas fait en fait ?

Fred : L’informatique. Je n’ai pas fait de cours en informatique ou pas du tout. Ou c’était moi à côté. Et quand j’ai vraiment voulu m’y mettre, je voulais faire du web. Je me suis inscrit dans un master, je ne sais même pas si ça s’appelait un master à l’époque à Nantes. Ils avaient la salle, ils avaient les ordinateurs, mais ils n’avaient pas les profs.

Donc là, j’ai commencé à bosser direct sur le web. On est en 98.

Emma : Et ça t’a pris de passion comme ça ? T’as découvert un peu tout seul au final ?

Fred : Au final petit à petit, je codais déjà un peu à droite et à gauche. J’étais à une époque où les jeux ne marchaient pas sur les ordinateurs donc il fallait les pirater pour les faire marcher. Et après quand on fait des pages web pour les associations, pour les copains, c’est un truc qui vous parle. Et puis c’était intéressant. Et puis voilà.

Et puis c’était émergent. Donc du coup j’ai commencé à faire des sites pour des gens, puis pour des sociétés, dans le cadre de stages, d’alternance, de CDD. Et puis finalement une agence web m’a embauché.

Comprendre le concept de Low-tech appliqué au Web

Emma : Tu t’es découvert une passion au fur et à mesure qui est devenue ton métier.

Fred : Oui, qui est devenue mon métier, mais qui reste une passion. Ça, c’est cool. Parce qu’en fait, le web, aujourd’hui encore, il évolue beaucoup, énormément. Et en fait, c’est marrant, mais ça rejoint la problématique du low-tech. Si vous suivez l’évolution du web, finalement, vous restez low-tech.

Emma : Alors du coup, le low-tech, pour ceux qui ne savent pas, c’est quoi ?

Fred : Ah, le low-tech, qu’est-ce que c’est ? Alors, le low-tech, je pense qu’il y a plein de définitions. Je vais vous donner la mienne, mais ce n’est pas forcément celle que donnera tout le monde.

Pour moi, le low-tech, c’est utiliser des choses qui ont fait leur preuve et qui permettent de ne pas rajouter des couches trop multiples, trop complexes et qu’on ne sait pas appréhender.

Emma : Donc c’est enlever le superflu sur un site internet par exemple ?

Fred : C’est ça. C’est Saint-Exupéry qui disait « On obtient la perfection quand on a fini d’enlever tout ce qu’on pouvait enlever ».

Emma : C’est pas mal, je ne l’avais pas.

Fred : C’est une citation à peu près. Je fais beaucoup “d’a-peu-prisme”, il ne faut pas m’en vouloir.

Emma : Les citations de Frédéric à peu près.

Fred : Voilà, c’est ça. Mais l’idée, c’est ça. Je vais prendre un exemple matériel. Si chez vous, vous avez une cuve à eau, vous pouvez acheter un capteur qui va vous coûter très cher, un capteur de pression. Vous ne savez pas comment ça marche, un capteur de pression. Moi, je ne sais pas comment ça marche. Je vous le dis tout de suite. Et ça coûte assez cher.

Alors que vous pouvez très bien mettre un tube en plastique avec un fil électrique à chaque niveau et une diode à chaque bout avec une pile, un petit bouton. Et en fait, quand la diode s’allume à un certain niveau, c’est que vous êtes rendu à ce niveau. Tout simplement. Et tout le monde comprend que l’eau est conductrice. Donc, quand l’eau ne passe pas à tel niveau, la diode ne s’allume pas.

Emma : Et pourquoi les gens, enfin, il y en a qui disent que le low-tech, ce n’est pas fou, c’est mal vu.

Fred : Alors, le problème, c’est qu’il ne faut pas opposer le low-tech et le high-tech. C’est que pour moi, le low-tech répond à un problème aujourd’hui qui est la complexité. Et les choses sont devenues trop complexes pour des choses qui n’en ont pas besoin. Ça s’appelle de l’efficience.

Et quand on parle de low-tech, c’est pour répondre à un problème d’efficience. Et quand on va rajouter des couches et des couches de surplus, non seulement ce n’est pas efficient, personne ne les comprend, ça surconsomme, c’est pas écolo. Et quand ça tombe en panne, il faut trouver le bon interlocuteur pour travailler sur le bon problème.

Emma : Donc c’est juste un mauvais vocabulaire qu’on emploie et on ne comprend pas exactement.

Fred : Non, le low-tech, c’est vraiment ça. Parce que quand on va faire, par exemple, si on parle du web, on va revenir, on va reparler du web puisque c’est mon métier. Aujourd’hui, on parle des frameworks modernes.

Vous avez dû entendre parler des trucs comme React, Angular, Vue.js, ça vous parle tout ça ?

Emma : Non.

Fred : C’est des frameworks JavaScript. Si je vous dis ça, ça vous parle plus ?

Emma : Un tout petit peu plus, mais je ne suis pas sûre que tout le monde sache.

Fred : Le JavaScript, c’est un langage qui peut être interprété par votre navigateur et qui permet tout ce qui est interaction avec des API ou même avec un clic, avec des formulaires, etc. Sauf qu’à une époque où le navigateur ne faisait pas tout un tas de choses qu’il fait aujourd’hui, on a demandé à JavaScript de faire tous ces trucs-là à la place du navigateur. Et aujourd’hui, ces frameworks font tout un tas de trucs qui sont normalement prévus dans le navigateur.

Donc en fait, on a remplacé le comportement naturel du navigateur par des frameworks modernes qui font certes des choses en plus, mais des choses dont on n’a pas besoin sur la plupart des sites.

Emma : Donc ce n’est pas du tout écolo ?

Fred : Ce n’est pas efficient. Donc si ce n’est pas efficient, ce n’est pas écolo. Je vais prendre un exemple, j’aime bien les exemples. On avait un site de presse ou un magazine qui s’appelle Futura, avec qui on travaille toujours, qui avait un site fait en NextJS. NextJS c’est du React. Ça veut dire qu’il y a une base de données pour rentrer les contenus qui sont générées sur un serveur.

Le serveur fait une version Next, en cache de la page, qui est après réinterprétée par le framework JavaScript dont on parle tout à l’heure en React. Et le tout qui se passe dans votre navigateur ensuite. Plus le système de pub.

On a tout refondu l’année dernière. Et on a fait une couche plus simple avec des templates HTML et la couche d’interrogation des données. Du coup, on a simplifié les couches parce que toutes ces couches, il n’y en a plus que deux. Donc, on a besoin de deux connaissances en termes d’interlocuteur pour savoir où est-ce qu’il faut intervenir. Il y a la couche serveur, la couche front et c’est relativement simple.Et on a fait x10 sur les perfs.

Emma : Ah oui ?

Fred : Ah oui, non, mais c’est sans commune mesure.

Gestion des clients et l’art de la simplicité

Emma : Et tes clients, ils se rendent compte de ça ou juste ils viennent te voir avec une problématique et ils s’en fichent de la technique ?

Fred : Alors, j’ai deux types de clients. J’ai les clients qui nous connaissent parce qu’ils savent qu’on est capable de ça. Donc, on va pouvoir les aider, les accompagner dans la perf, vérifier que ça s’améliore et vérifier que ça ne se dégrade pas. Donc, avoir un monitoring régulier avec un coaching, etc. Voilà, donc ça c’est ce qu’on fait communément.

Et il y a d’autres qui s’en foutent parce qu’il y a juste un site web. Donc la façon dont on fait, ils sont satisfaits de savoir qu’on a une petite conscience professionnelle, mais pour eux c’est normal. Donc c’est pour ça que les clients avec qui on marche le mieux, c’est ceux qui ont déjà eu une première expérience déceptive.

Emma : Et c’est pas plus mal.

Fred : Moi j’adore passer sur ce genre de clients, c’est des clients qui sont confrontés à des problèmes avec qui on n’a pas su répondre aux problèmes. Donc apporter les bonnes réponses, savoir expliquer. Donc c’est ça qui m’intéresse dans mon métier aussi, c’est d’expliquer aux gens, à mes clients, à mes collaborateurs, à mes alternants, à mes stagiaires, etc. C’est aussi un truc que j’aime bien.

Et c’est ce que j’essaye aussi de transmettre au travers de MilleCheck. Puisque c’est un outil qui est aussi très documenté. D’ailleurs, pour chaque bonne pratique, il y a un texte explicatif qui essaie de dire pourquoi : pourquoi c’est utile et comment on peut corriger le problème.

Emma : Donc ça, c’est vraiment un outil que vous avez créé vous-même ?

Fred : Tout à fait.

Emma : Pour revenir au low-tech, est-ce que c’est un concept que tu vois de plus en plus aujourd’hui, qui prend de plus en plus de place ?

Fred : En tout cas, nous, c’est un concept qu’on défend. Alors, nous, on a un biais. C’est-à-dire qu’on vient nous chercher pour la performance web. Aujourd’hui, tout ce qu’on appelle les sites web modernes, surtout ceux qui sont basés sur des frameworks JavaScript, ceux que je t’ai décrits tout à l’heure avec plein de couches, qui font plein de trucs que le navigateur fait nativement, il s’avère qu’ils sont moins performants qu’avec des technos moins modernes.

Par exemple, le principe d’un framework JS, c’est de dire votre premier chargement de la page va être très très lent, mais après tout va être immédiat.

Emma : D’accord.

Fred : Pourquoi pas ? Sauf qu’il y a un développeur de chez Microsoft qui travaillait avant chez Google, etc., qui s’appelle Alex Russell, qui a fait une petite étude, ce n’est pas sa première, basée sur des données mondiales, où il s’est avéré que généralement, ce genre de site, cette promesse, elle est tenue pour un clic.

C’est-à-dire que les gens viennent, ils chargent longtemps, et puis après, ils profitent de cette accélération pour un clic. Quel est l’intérêt d’aller charger toute cette complexité si derrière, c’était pour faire un clic ?

Emma : Au final, l’innovation, c’est plus polluant ?

Fred : Là effectivement, c’est surdimensionné, mais ce n’est pas le problème de l’innovation, c’est qu’est-ce qu’on utilise, pour quel usage. Donc on pourrait retranscrire cette idée, si vous êtes sur un site où les utilisateurs vont rester plus de 10 minutes et faire plus de 10 clics avec des trucs qui s’actualisent en temps réel, genre une carto où on suit des bateaux dans un détroit qui est d’actualité, vous voyez par exemple, ça je comprends parfaitement que ce soit une application moderne qui utilise ces technos modernes.

Si vous êtes sur un blog… oui… Voilà. Là, ça n’a pas du tout d’intérêt.

Emma : Donc, il faut que la technologie utilisée soit vraiment en fonction du besoin derrière.

Fred : Exactement. C’est ce que dit le RGESN, le Règlement Général pour l’Éco-conception des Services Numériques en France. C’est ce qui a une des bonnes pratiques défendues, c’est ça, c’est d’utiliser la bonne technologie, la moins coûteuse en termes d’énergie, pour le besoin effectif. Donc, c’est ça, c’est une étude qui doit être faite en préalable.

Emma : Donc pour re-vulgariser au maximum, on prend la problématique du client, on lui apporte la bonne technologie en fonction de son besoin pour moins polluer. Donc on enlève un maximum de choses qui ne servent à rien, donc on enlève des couches. Donc ça fait le low-tech. Et à la fin, au niveau de la maintenance et de la durée de vie des outils, est-ce que c’est gagnant aussi ?

Fred : Alors oui, j’ai envie de dire oui. Globalement, il y a une grande idée derrière l’éco-conception et le low-tech, même si ce n’est pas forcément vrai. Mais l’idée, c’est de respecter les standards. Lorsque vous faites un framework JavaScript, tout repose sur JavaScript, tout repose sur cette techno, donc plus sur le navigateur.

Si vous travaillez sur les standards du web, donc l’HTML, les CSS et un tout petit peu de JS, mais pas trop, résultat, vous suivez l’évolution de la plateforme sans rajouter de surcouche.

Un exemple, c’est les carrousels. Vous voyez tous des carrousels sur les pages web ?

Emma : Oui, c’est les images qui défilent au fur et à mesure, comme un peu sur Instagram.

Fred : Même avec le web, vous les faites défiler avec votre doigt, etc. Il y a énormément de JavaScript aujourd’hui qui sont utilisés pour faire des carrousels. Or, aujourd’hui, on peut les faire en CSS. Quasiment en full CSS pour mobile. Il n’y a que les deux petites flèches sur les côtés qu’on est encore obligé de faire en JavaScript.

Or, la norme prévoit demain un système full CSS pour avoir ces deux petites flèches, voire même les indicateurs de position en full CSS HTML. Donc quasiment pas de JavaScript et c’est hyper simple à implémenter. Et le navigateur, c’est lui qui fait cette interprétation-là. Et il est plus efficace à faire des rendus HTML, CSS que traiter du JavaScript.

Quand je dis il est plus efficace, c’est-à-dire que c’est moins coûteux pour lui. Il sait très bien le faire. Il y a des limites à tout ça, mais en règle générale, c’est ça. Ça veut dire que ceux qui ont suivi l’évolution du web et qui ont déjà travaillé leur carrousel en CSS, ça leur sera très rapide de passer avec ces technos-là.

Ceux qui l’ont développé en full JavaScript, il faut qu’ils démontent tout pour tout refaire. Et il y a même un truc qui est un peu vicieux, il y a des cercles vertueux et il y a des cercles vicieux, c’est-à-dire que les frameworks modernes sont très orientés développeurs friendly. Les développeurs sont fans de ça parce qu’ils peuvent développer composant par composant. Et quand on parle de composants par composants, ça veut dire que le composant JavaScript, celui qui fait le traitement de l’information, l’interaction, et les composants CSS qui fait le look.

Sauf que dernièrement, ils se sont rendus compte que le bout de CSS pour chaque composant était trop souvent redondant dans les pages, donc c’était du code en trop, donc ils ont pensé à le factoriser et le remettre dans un seul fichier.

Donc ils ont développé une couche de complexité pour refactoriser les CSS qui, à la base, auraient toujours dû l’être. Et donc c’est assez drôle. Moi, ça me fait rire parce qu’on rajoute de la complexité à la complexité.

Emma : C’est ce que j’allais dire. J’ai l’impression que plus ça va, plus le web est compliqué.

Fred : Alors pas vraiment, j’exagère quand je dis ça, mais généralement il y a des vagues. C’est-à-dire qu’il y a des mouvements. Angular était le framework moderne au démarrage le plus utilisé. Puis React a déjà simplifié une couche. Maintenant il y a Vue, puis il y a Vite, puis il y a Svelte.

Et plus ça va, plus les frameworks modernes utilisent les choses courantes. Donc plus on utilise les derniers, les plus récents, moins ils en font, le plus ils reposent sur la plateforme et le mieux c’est. Mais en termes de techno, on a de plus en plus de couches. Si par exemple, on parle de CDN, je ne sais pas si ça vous parle. Les CDN, ce sont des Content Delivery Network.

Emma : Et en Français ?

Fred : C’est un serveur qui va délivrer du contenu. Donc des images par exemple. Vous avez votre site, vous avez des images. Vous pouvez utiliser Cloudflare comme CDN. Et Cloudflare, lui, va adapter l’image automatiquement pour fournir l’image la plus optimisée en fonction du terminal qui va regarder l’image. Voilà, c’est très bien.

Sauf que Cloudflare, c’est une couche en plus. Et il faut maîtriser Cloudflare. Il faut arriver à régler tout ce que j’ai dit là. Puis c’est en plus, c’est un coût en plus. Donc, si vous avez juste un petit optimiseur ou si dès le départ, la conception, vous avez ciblé juste le type d’image qu’il vous faut, normalement, vous n’avez même pas besoin de Cloudflare.

Emma : Et tu trouves que les applications et les sites sont de plus en plus lourds ?

Fred : En fait, il y a deux tendances. Il y a vraiment deux directions. Il y en a qui sont dans un tunnel de développement, qui n’ont pas le temps de se poser la question et qui développent avec ce qu’ils connaissent. Et comme c’est du développeur friendly, donc on leur demande de tenir des délais, c’est plus facile pour eux et je l’entends.

Et il y a les autres de l’autre côté qui ont, comme nous chez artwaï, qui ont le temps et qui prennent le temps de poser leur outil industriel et de se dire, voilà, quelle méthode on veut utiliser ? C’est quoi notre cahier des charges ? Comment on fait les choses, etc. ? Et comment on rediscute régulièrement de ces choses-là ? Comment on les remet au goût du jour vis-à-vis de l’accessibilité, de l’éco-conception, de la sécurité, voire même de l’IA dernièrement ?

Emma : Oui parce que du coup chez vous c’est vraiment une coproduction pour presque tous les projets et savoir ce qu’on garde, ce qu’on garde pas.

Fred : En gros on a des outils et à chaque fois qu’il y en a un qui est confronté à une problématique, il propose des solutions au groupe et le groupe valide ou pas. En gros c’est ça. Et après, nous, c’est pareil, on n’est pas juges et parti, dans le sens où on va s’appuyer sur des références qui font des compromis.

Mais par exemple, tous nos salariés passent la certification Opquast. Je ne sais pas si ça vous parle, Opquast. C’est un référentiel de bonnes pratiques en matière de web et maintenant numérique depuis un an, où il y a 245 bonnes pratiques à connaître. Et vous passez un test, une certification qui peut se faire en ligne. Un petit bonjour à mon ami Elie Sloïm, qui sera ravi de venir là si vous lui demandez.

Emma : Avec grand plaisir.

Fred : Il fait donc ce référentiel depuis des années, presque depuis 2005, je crois qu’il existe. Donc lui aussi, il a 20 ans. Et je le suis depuis 2007. Donc c’est pour vous dire. Donc ça fait partie des référentiels. Depuis peu, moi je participe au référentiel du comité numérique responsable avec Frédéric Bordage, qui est pour moi la référence en matière d’éco-conception en France. Et donc il produit un petit bouquin tous les ans à peu près ou tous les deux ans qui s’appelle « Éco-conception web, les bonnes pratiques ». Il y en a 115. Donc ça aussi on essaye de le suivre.

Et puis il y a les choses réglementaires comme la RGAA, le Référentiel Général d’Amélioration de l’Accessibilité. Et puis il y a la RGESN dont on a déjà parlé.

Emma : Et tu trouves que c’est compliqué d’avoir un équilibre entre l’innovation et la simplicité ?

Fred : Alors, je vais prendre ce que disait mon mentor, mon associé Denis Liénard, dont on n’a pas parlé. C’est quand on te donne une tâche en 4 jours, passe 3 jours à réfléchir comment tu vas le faire en 1. Pourquoi je dis ça ? Parce que c’est la même chose, l’innovation.

L’innovation, ce n’est pas de se jeter la tête la première dans le code, c’est de réfléchir à comment on peut faire les choses le plus simplement possible et faire les choses simples. Penser les choses simples, ça prend du temps pour pouvoir les faire rapidement et pour que ça soit efficace. Donc, il faut vraiment se poser les bonnes questions au démarrage.

L’enjeu de l’ancrage local et de la souveraineté numérique

Emma : Et tout ce qui est… Donc là, il y a tout ce qui est la partie technique, mais la partie locale et made in France, ça joue un grand rôle aussi ?

Fred : Alors, je vais prendre ma petite expérience à moi. On est des télétravailleurs, chez artwaï, depuis le début, et on a eu des télétravailleurs un peu partout. Quand je dis un peu partout, on en a eu en Australie, en Espagne, à Strasbourg, à Marseille… Mais finalement, on s’est dit non, ça serait quand même mieux qu’on ait tout le monde autour.

Donc là, on est tous plus ou moins sur le bassin Rennais, à une exception près. Mais on préfère avoir localement parce que même si on est en full télétravail, on va se retrouver régulièrement, soit à deux ou trois sur un projet, soit tous ensemble pour des séminaires ou des choses comme ça.

Emma : Et du coup, ça donne un vrai enjeu de souveraineté numérique au final.

Fred : Alors là, pour le coup, moi, c’est plus une problématique de solidarité d’équipe, d’équipe solidaire, etc. Là, les gens se connaissent, ils savent leur spécificité, leur domaine de spécialité, ils échangent. Ils se soutiennent les uns les autres. Franchement, c’est super agréable de travailler au quotidien avec l’équipe que j’ai.

Emma : Tu as l’air super fier de tes équipes.

Fred : Tout à fait.

Emma : Tu as un grand sourire quand on en parle.

Fred : Mais oui, c’est vraiment ça.

Emma : Du coup, le fait que vous soyez tous dans le bassin Rennais, est-ce que ça change un peu la relation avec les clients, le service client ? Ou pas forcément ?

Fred : Non, non, non, pas forcément. Le sujet, c’était plus le télétravail. Comme on est full télétravail depuis 2005, on s’est souvent confronté jusqu’avant 2020, la fameuse période Covid, à des réticences sur certaines missions. “Vous êtes trop loin”, “il faut venir sur place”, etc.

Mais depuis, tous les verrous ont sauté. Donc on travaille avec des sociétés aux quatre coins de la France. C’est plus un problème. C’est même des fois le contraire. “On veut venir vous voir”, “non surtout pas, gardez vos miasmes”. Voilà, donc très bien.

Emma : Et s’il y avait quelque chose sur lequel vous travaillez en ce moment, où vous avez des points d’amélioration, ça serait lequel ?

Fred : Alors le point d’amélioration si on parle de numérique responsable c’est la souveraineté. Aujourd’hui tous nos serveurs sont chez OVH, 99% on va dire, monitorés par Cognix System. Mais par contre tout ce qui est suite de bureautique on est chez Google.

Donc là-dessus on n’est pas bon. Je le sais, je le sais depuis le début ! Mais on n’a pas encore trouvé la solution, même si on n’a pas pris le temps de tester les dernières, qui sont plutôt pas mal d’après ce que je pense, pour migrer tout vers une solution qui soit européenne à minima.

L’impact environnemental : Le JavaScript

Emma : Après, de toute façon, personne n’est parfait. Et l’important, c’est de s’en rendre compte.

Emma : Et en parlant de faire des progrès, est-ce que tu penses que le low-tech a un vrai avantage sur l’environnement ?

Fred : Alors, cette question m’embête toujours parce que je n’ai pas de chiffres. Et moi, comme au travers de MilleCheck, c’est toujours des chiffres. C’est-à-dire que quand j’annonce quelque chose à un client, le chiffre, c’est ça. L’indicateur, c’est ça. Le nombre de secondes que vous allez pouvoir gagner, c’est ça. Moi, c’est ça que je veux savoir.

Donc dire qu’un site low-tech, ça consomme moins qu’un site high tech, je ne sais pas parce que je n’ai pas les chiffres. On le pense, on le subodore, tout le monde est d’accord avec ça. Par contre, je sais que ça a des coûts.

Par exemple, lorsqu’on supprime une couche comme Cloudflare pour le serveur d’images sur un site comme Futura, je sais que ça a une réduction des coûts en termes d’hébergement de ces images et de modification de ces images à la volée qui est assez intéressant pour le client en termes de gains.

Emma : C’est déjà un très bon point.

Fred : Voilà. Et on sait qu’on fait tourner une moulinette en moins, on fait des opérations en moins, donc c’est du CPU en moins, c’est du serveur en moins.

Emma : Donc techniquement, c’est un bon point pour l’environnement. On n’a pas exactement les chiffres, mais ça ne peut pas faire de mal en tout cas.

Fred : Exactement. Sur les images, il y a des gains sur le web qui sont pour moi pharaoniques. Et le JS, je le mets en cause tous les jours. Pourquoi ? Une page web, aujourd’hui, c’est 2,5 mégas. Alors ça ne vous parle pas comme ça, 2,5 mégas. Mais sur ces 2,5 mégas, ce que je constate, c’est qu’il y a 2 mégas de JavaScript.

Donc ça veut dire que c’est du JavaScript qui n’est pas l’information utile pour vous. Quand vous allez sur une page, vous avez du texte, des images, mais ce n’est pas compris dans ces 2 mégas dont je vous parle. Donc c’est compris dans les 0,5. Et dans les 2 mégas dont je vous parle, il y a des interactions, des systèmes de paiement, des formulaires, des contrôles, etc. Mais il y a surtout des statistiques, de la pub, des cookies de pistage.

Emma : Donc nous, ça ne sert à rien.

Fred : Exactement. Et des fois, il y a ce qu’on appelle des opérations de “pré-bid” pour le placement publicitaire qui sont extrêmement lentes.

Emma : Donc en fait, c’est plus polluant alors que tu as essayé de faire un travail…

Fred : C’est compliqué. Parce que moi, je comprends bien que les acteurs du numérique, ils doivent rentabiliser aussi le contenu fourni. Et là, on est vraiment… Tout le monde est en train de se poser des questions sur les modèles. On voit bien qu’on a des acteurs qui essayent de faire payer les IA qui pompent leur contenu. Et ça, je le comprends. De rémunérer grâce aux pubs.

Mais quand il y a trop de pubs, et c’est ce qu’on mesure notamment avec MilleCheck on perd de l’audience et si on perd de l’audience on perd des revenus donc il faut équilibrer ça donc ça c’est ce qui est intéressant quand on mesure les choses et 2,5 méga ça me fait rire parce que c’est 2,5 méga c’est pour voir une page .

Et pourquoi je dis 2,5 méga parce que je sais qu’un jeu comme Doom dans le temps qui était un jeu de shoot à la première personne ça prenait 1 méga ça tenait sur une disquette 5 pouces 1 quart vous ne connaissez pas ça vous même moi je connais et donc on avait un jeu sur lequel on pouvait jouer des heures qui tenait sur 1 méga alors qu’aujourd’hui une page sur laquelle on va rester 10 secondes ça fait 2,5 méga.

Emma : La comparaison, on la voit bien du coup.

Fred : C’est exactement ça.

L’outil MilleCheck : Allier Low-tech, IA et mesures factuelles

Emma : Justement tu parlais de MilleCheck, l’IA que vous avez créé si je ne dis pas de bêtises. C’est quoi le rapport du coup entre le low-tech, l’IA, comment l’un peut aider l’autre ?

Fred : Alors, MilleCheck, c’est un outil low-tech sur lequel on a rajouté une couche IA.

Emma : Alors. Explique.

Fred : À la base, c’est un outil qui fait des mesures, qui va agglomérer plein d’outils de test qui existent déjà sur le marché, du Google Lighthouse, du WebPageTest, du Yellow Lab Tools, plein de trucs, plein de tests qui existent par ailleurs. Et on va les retranscrire dans un seul et même rapport.

Parce qu’en fait, quand on est intégrateur web, comme nous le sommes, comme d’autres le sont, on utilise ces outils. Sauf qu’il y en a toujours un qui passe à la trappe et il y a toujours le petit détail qui va être vexant, qui va ressortir à la fin. Donc autant tout avoir dans un seul et même outil.

Et derrière ça, nous, on va aller avoir une IA qui analyse les données de manière statistique et de manière, comment dire, de façon à vérifier qu’une bonne pratique, va permettre de gagner des points à tel endroit. Donc on va pouvoir lui dire, là sur votre page, votre problème principal c’est ça, et si vous travaillez sur cette problématique-là en priorité, vous pouvez espérer gagner X points sur Lighthouse.

Donc c’est ça notre objectif en greffant de l’IA. En plus d’avoir une interface en langage naturel, comme les gens aiment bien aujourd’hui.

Emma : Donc ça vous fait gagner du temps et ça ouvre l’esprit sur des choses que vous auriez peut-être pu louper.

Fred : Voilà, c’est ça. Moi, l’intérêt, j’y vois aussi à cet outil-là et ça revient à la question que tu m’as posée sur le low-tech par rapport à d’autres, c’est de visualiser les échelles. Et dans MilleCheck, il y a plein de visualisations des histogrammes pour dire, par exemple, on a un histogramme qui permet de dire, en termes de perf, qui a la responsabilité du temps de chargement ? Est-ce que c’est plus la pub, les outils marketing, le contenu, la gestion des cookies, l’acceptation des cookies, le fameux bouton « Accepter » qu’on voit partout, etc.

Donc on peut tout de suite cibler si c’est le code qui est développé pour le site par le développeur en interne ou est-ce que c’est le service de statistiques que j’insère qui me coûte le plus cher en perf. Des fois j’arrive en mode “casque bleu”. Il faut comprendre qu’il y a un site chez un client avec son équipe informatique qui fait ce qu’elle peut et à qui on lui demande de rajouter plein de services externes sur lesquels elle n’a pas la main.

Et le service marketing qui rouspète parce que le site est lent. Sauf que lui, il me dit, “mais ce n’est pas ma faute, c’est le service externe qu’on intègre au site qui est lent”. Et l’autre, il dit, “ce n’est pas vrai, il y en a qui disent qu’ils y arrivent.”

Donc, en mesurant avec MilleCheck, on a des chiffres factuels. On sait combien de ressources sont importées par le service externe, combien de temps CPU il prend, combien il y a de blocking time, combien il fait de requêtes, la qualité de ses requêtes. Donc, on peut dire, non, effectivement, c’est le service externe qui est le plus court. Toujours mesurer.

Emma : Et tout à l’heure, Je t’avais posé la question si tu pensais que le web devenait de plus en plus complexe et tu m’as dit que c’était surtout des tendances au fur et à mesure des années. Est-ce que tu penses que justement le low-tech, ça va être une tendance parmi ça ou ça va être quelque chose qui va être appliqué durablement ou est-ce que pour l’instant on ne sait pas ?

Fred : J’ai envie de te dire que j’en sais rien je pense qu’il y a vraiment deux couloirs, il y a un premier couloir qui est celui du full IA. L’IA étant un outil statistique qui se base sur ce qu’il voit le plus fréquemment il reproduit ce qu’il voit le plus fréquemment et ce qu’on voit le plus fréquemment c’est pas du code propre voilà, je le dis direct, c’est des sites qui sont faits en full javascript pour la plupart du temps, et il reprend ces stéréotypes-là.

Donc si on ne sait pas ce qu’on doit produire, ce qu’est un code propre, et qu’on ne demande pas à l’IA de faire du code propre, il va vous faire du code qui est le plus commun. Et on va avoir l’autre tendance qui serait plutôt réfractaire à l’IA, des seniors la plupart du temps, qui eux vont essayer de pousser du low-tech, des choses simples, des choses qu’ils maîtrisent, des choses qui ne coûtent pas cher et sur lesquelles ils ont une grande réactivité.

Parce que le gros problème des sites développés avec des IA, c’est qu’il faut maîtriser parfaitement ses prompts, mais le code produit, il faut être capable de le relire derrière. Donc c’est l’inconvénient qu’on a dans le domaine de l’apprentissage. Si nos alternants commencent à développer avec l’IA,

Emma : Ils ne sauront pas la corriger.

Fred : S’ils ne savent pas relire, s’ils ne savent pas demander ce qu’il faut, c’est un vrai problème. C’est un vrai problème à long terme. Je ne sais pas comment on va résoudre cette histoire, mais c’est un vrai problème à long terme.

Emma : Oui, ou alors il faudrait, comme vous avez fait, créer des IA…

Fred : Pédagogiques.

Emma : Oui, c’est ça.

Fred : Oui, c’est ce qu’on essaye de faire, d’avoir un rapport qui soit le plus explicite possible sur les solutions, le pourquoi on fait les choses et comment on les résout. C’est ça, c’est intéressant. Mais c’est le principe de tous les référentiels, comme Opquast. Pourquoi on fait les choses ? Quel est l’objectif ? Et comment on peut obtenir ce résultat ?

Conseils pratiques pour les commerçants et les artisans

Emma : Et ça serait quoi tes conseils de base pour, admettons, on va prendre un commerçant. Le web, ce n’est pas son métier cœur. Il a un site parce qu’il faut avoir un site. Ça serait quoi tes premiers conseils pour quelqu’un dans ce cas-là ?

Fred : En fait, il y a plein de paramètres à prendre en compte. J’ai travaillé avec un client il n’y a pas longtemps qui a laissé tomber le site web en propre et il est passé sur une suite, je crois que c’est PrestaShop. Et en fait, pourquoi ? Parce que PrestaShop, ils ont maintenant toute la suite qui correspond à son produit, notamment la gestion de stock, les interlocuteurs pour les livraisons.

Donc, ça lui simplifie la vie énormément. Et donc, il va permettre de se concentrer sur son métier et non plus sur la gestion de son site web, sur l’optimisation des performances, etc. Et je le comprends parfaitement. Parce que là, c’est un choix rationnel.

Donc, je n’ai pas de conseils à donner. Un artisan aujourd’hui, je connais plusieurs artisans. J’en ai un très proche, qui est de ma famille, qui s’est fait un petit site web. Mais en fait, son canal le plus efficace, c’était dans les forums de bricolage pour répondre à la demande. Mais répondre à la demande technique. Je pense qu’aujourd’hui, il faut connaître sa cible, identifier sa cible, où est-ce que sa cible va pouvoir trouver de l’info, quel type d’info il faut vouloir.

Et un autre truc qu’il faut bien comprendre, c’est que si vous avez du contenu à mettre sur le web, Il faut penser non pas à ce que ça soit joli, même si c’est bien toujours d’être joli, je suis d’accord, mais la première chose c’est comment on va vous trouver et à quelle réponse vous répondez, quel service vous allez résoudre.

Le web est truffé aujourd’hui de contenus à rallonge, pondus par des IA dans tous les sens. Le top 10 de tel truc, comment faire tel truc. Il y a dix fois le même article dans les dix premiers résultats de Google maintenant, dans tous les problèmes. Et l’IA peut répondre à la même question.

Donc si vous n’avez pas une approche personnelle, locale, avec un point de vue objectif qui répond à une question précise, ça ne sert à rien de publier. Vous n’aurez pas la force de frappe de ces gens-là.

Emma : Tu vois, tu as donné le plus précieux conseil au final. Pour répondre à vos clients avant de commencer à faire un site.

Fred : Un artisan, je pense qu’aujourd’hui, il a tout intérêt d’aller sur un réseau social classique et de se faire une toute petite page pour déjà commencer à voir comment il peut générer une communauté autour de son activité. Ou d’aller dans la communauté, il y a des forums pour plein de trucs, et déjà en répondant aux questions technique, vous allez avoir une communauté qui va vous répondre et après si vous voulez vendre vos services, il faut se mettre d’accord avec le webmaster du forum pour savoir si vous avez le droit de parler de votre activité ou pas sur ce forum.

Mais ça marche plutôt pas mal comme approche. Ça prend du temps.

Emma : Mais au moins, on est moins polluant, on répond aux besoins de nos clients finaux.

Fred : Tout à fait.

Emma : Et techniquement, c’est plus rapide.

Conclusion, initiatives inclusives et mot de la fin

Fred : Je dis toujours, je ne suis pas là pour vendre du site à la pelle. Ça ne m’intéresse pas. J’essaie de vendre un site qui vive et sur lequel il y a des utilisateurs. Et qui sert vraiment à quelque chose. Et qui serve à quelque chose. Et nous, on a un panel de clients vraiment large. On va travailler avec beaucoup de presse. Comme avec des petites associations.

Je travaille avec l’association du Dr Bru qui travaille sur l’inceste chez les enfants, sur des toutes petites compagnies de théâtre, sur mes amis du Fab Lab de Rennes, le Human Lab, “My Human Kit”, qui eux aussi font beaucoup de low-tech.

Et pour le coup, ça va vous intéresser aussi. Ils font du do-it-yourself pour les mécanismes pour les personnes handicapées. C’est-à-dire que vous allez dans leur Human Lab, vous avez un handicap, et ils vous aident à comment construire votre handicap pour répondre à votre handicap. Parce qu’ils ont constaté que c’était la personne handicapée qui était experte de son handicap.

Emma : Oh bah, c’est fou !

Fred : Voilà, c’est pas bête. Et en fait, par exemple, ils vont transformer des trottinettes électriques en fauteuils roulants électriques.

Emma : C’est trop bien !

Fred : Ou alors des comptes-gouttes pour mettre dans les yeux avec une petite pipette pour les gens qui ne peuvent pas lever les bras. Avec des imprimantes 3D, ils ont des trucs qui sont effectivement un petit peu high-tech, on va dire, mais au final, c’est pour construire des petits process, des petits trucs très simples, des mécanismes qui permettent de répondre à ce truc-là.

Alors, sur le low-tech aussi, ils en auraient pas mal à dire, je pense.

Emma : Intéressant. Avant de clôturer, est-ce que tu as une info que tu aimerais faire passer ?

Fred : Oui, on peut dire tester MilleCheck, parce qu’on en a pas mal parlé.

Emma : Donc MilleCheck, ça s’écrit ?

Fred : M.I.L.L.E.C.H.E.C.K.ai. C’est gratuit. Il suffit de fournir une URL et une adresse mail. Vous pouvez même vous créer un compte. Et dans ces cas-là, vous avez accès à tous les rapports MilleCheck avec tous les détails.

Emma : Donc on arrive sur le site MilleCheck, on met l’URL d’un site qu’on veut analyser.

Fred : Une page, voilà. Envoyer et c’est parti.

Emma : Parfait.

Fred : Et vous aurez le rapport avec un focus sur la performance, sur l’éco-conception, sur le SEO, sur la sécurité. Et j’espère d’ici septembre sur l’UX.

Emma : On croise les doigts.

Fred : Oui.

Emma : Merci beaucoup pour cet échange. J’étais ravie de t’avoir aujourd’hui.

Fred : Merci, moi de même.

Emma : Tu nous as appris beaucoup de choses, tu nous as éclairé sur beaucoup de choses sur le low-tech. Même personnellement, j’ai appris énormément de choses. Même sur la sobriété numérique.

Fred : Merci.

Emma : C’était vraiment chouette. On retient surtout qu’un autre modèle est possible, donc un web plus simple, plus humain, qui répond à des vraies problématiques, plus performant aussi, parce que c’est important, il ne faut pas oublier.

Fred : La performance va avec l’éco-conception. Il y a un truc qu’on n’a pas dit, juste pour conclure, je suis venu sur l’éco-conception par la performance. Parce que quand on veut faire des choses qui vont vite, on cherche l’efficacité.

Et quand on cherche l’efficacité, finalement on gère notre effort. Gérer l’effort c’est gérer de l’énergie. Donc plus on cherche à être performant, plus on sera écolo en fait.

Emma : Moi, je ne dirais pas mieux. Merci beaucoup, encore une fois.

Articles similaires