Combattre le gras numérique

Les pages sites et les applications par leur engraissement génèrent une pollution de moins en moins invisible (article : pollution numérique). On peut être tenté d’ajouter à son site un nombre incalculable d’images, de vidéos, de fonctionnalités, d’effets… parce que c’est facile et fait en 2 clics. Mais, ces artifices sont-ils vraiment capables de booster l’intérêt de ton audience ou est-ce que de la poudre aux yeux ?

Le gras (numérique) c’est la vie !

Toujours plus gras !

Peut-être t’es tu déjà dit “Ce gif de chat et cette typographie sont vraiment canons, je les veux sur mon site !”. Puis j’ai lu qu’il est intéressant d’avoir une vidéo ou un carousel en en-tête alors je vais en mettre un. Une carte également, il faut que mes futurs clients sachent où je suis. Plus, il y a mieux c’est n’est-ce pas ? 

Désolé, mais le plus est parfois l’ennemi du bien. Plus tu ajoutes d’éléments à ta page, plus son poids augmente. Le principal ennemi d’une page web (et de mon chat) c’est son poids.

Des avancées techniques

Avec l’ADSL, la fibre et l’évolution technologique les possibilités ont augmentés. Les pages web se sont enrichies d’images, de vidéo, de carte, d’animations… La création de sites (au code pas qualitatifs) s’est simplifié et démocratisée. Contribuant à la prise de poids excessive des pages web et à l’augmentation du temps de chargement. Ces deux facteurs, entre autres, nuisent à l’expérience utilisateur et au bon référencement.

• Or, plus une page est lourde, plus son chargement sera long ;
• Plus le chargement est long, plus le risque de pousser les visiteurs à chercher ce qu’il cherche chez la concurrence augmente ;
• Ce phénomène (fuite) envoie un signal négatif aux moteurs de recherche sur la qualité de la page web et nuit directement à son bon référencement. Les concurrents ayant un site plus qualitatif seront mis en avant ;
• Moins il y a de visite, moins il y a de vente.

Il est temps d’agir

Pour stocker toutes ces données de nouvelles infrastructures doivent être créées. Le besoin en énergie augmente, les processeurs des appareils numériques sont plus sollicités, ce qui les fatiguent plus rapidement et les rendent prématurément obsolètes. 

Certes le stockage est moins cher et les appareils sont de plus en plus performants mais les systèmes d’exploitations, les logiciels, les sites et les applications sont eux aussi de plus en plus lourds et complexes. Balle au centre.

Interrogeons le besoin réel des utilisateurs avant d’ajouter des médias et des fonctionnalités. Plusieurs études démontrent que 45 % des fonctionnalités ne sont jamais utilisées (source : Cast Software et Standish Group). Optimisons le plus possible tout ce qui est possible de l’être pour enrayer cette surenchère et limiter le coût environnemental des sites et des applications.

Le gras numérique, c’est quoi ? Pourquoi chercher à l’éliminer ?

Le gras numérique c’est tout ce qui n’est pas essentiel, apporte peu de valeur au produit numérique (site internet, application…) et à la personne qui va l’utiliser. En essayant de le réduire, l’impact environnemental négatif du projet numérique est grandement diminué.

Tailler dans l’gras avec des alternatives plus sobres permet bien évidemment de rendre la page plus légère. Il y a d’autres effets positifs : le message gagne en clarté et est plus digeste, la plus value est plus facilement visible, l’accessibilité est améliorée et les sites sont plus faciles à maintenir dans le temps en bon état. Qu’est-ce qu’on attend pour s’y mettre ?

Comment éviter le gras numérique ?

Le gras numérique n’est pas seulement une histoire de code. Dès le tout début du projet et sur la conception graphique, il est déjà possible de réduire le budget écologique d’un projet web. Le gras numérique peut se loger à différents endroits et peut, selon sa nature, être plus ou moins difficile à déloger. Voici 5 points sur lesquels tu peux agir.

Le ciblage : savoir à qui on s’adresse

Difficulté : moyenne

S’adresser à tout le monde, c’est le meilleur moyen de toucher personne. Pour éviter cela, cherche à connaître ta clientèle idéale : qui elle est, les problèmes qu’elle rencontre, ses freins, ce qui a de la valeur à ses yeux, ce qu’elle vient chercher et ce qu’elle aimerait trouver.

Solution :

• Appuie-toi sur des données réelles : sondages, entretien face à face, les statistiques de tes publications sur les réseaux sociaux… Comprendre les besoins et les problèmes de ta clientèle idéale te donnera toutes les clefs pour l’aider ;
• Répertorie le vocabulaire de ta cible à propos de ton activité et utilise-le.

La rédaction : écrire de manière claire et structurée

Difficulté : Moyenne

Écrire n’est pas chose aisée. Le message que tu cherches à faire passer doit être limpide pour être facilement compris. Alors si dans ta tête c’est déjà le fouillis, que ça part dans tous les sens, imagine ce que ça va être pour celui ou celle qui te lit. Le manque de clarté nuit à la bonne compréhension du texte et à la navigation. Cela représente ±50% des problèmes d’un site.

Solution :

• Définis l’objectif de la page ;
• Rédige un plan structuré (titre 1, titre 2, titre 3…). Un texte bien structuré facilite la lecture en diagonale et c’est bon pour le référencement ;
• Prends du recul ;
• Rédige les contenus des parties ;
• Évite les phrases à rallonge, aux tournures complexes ou en langage expert (mots techniques, les abréviations…) ;
• Regroupe les informations éparpillées ;
• Synthétise, évite les redites et les paraphrases ;
• Relis-toi et fais-toi relire ;
• Évite les typographies trop fantaisistes qui peuvent rendre difficile la lecture.

La navigation : simple et efficace

Difficulté : Facile

Quoi de pire qu’une navigation avec des intitulés peu clairs et des sous-menus en cascade à n’en plus finir ? Effectivement, pas grand chose. Si naviguer vers une page à la recherche d’une information relève du parcours du combattant, il y a fort à parier pour que l’internaute abandonne.

Solution :

• Organise les pages comme le ferait ta clientèle idéale.
• Utilise des intitulés de navigation (ou de lien) clairs qui renseignent sur la page vers laquelle pointe le lien. Évite “en savoir plus”, “clique sur ce lien”, “ici”… ;
• Préviens quand le lien va s’ouvrir dans un nouvel onglet ;
• Évite les menus en cascade ;
• Respecte la règle des 3 clics maximum pour atteindre une information ;
• Regroupe les informations similaires dans une page dédiée ;
• Améliore le maillage interne en faisant des liens entre les pages (et les articles) ;
• Veille à ce que tous les liens fonctionnent et redirige vers une page si nécessaires ;
• Vérifie que les pages puissent être indexées par les moteurs de recherche.

Les médias : choisis avec soin et optimisés

Difficulté : Moyenne

Un site c’est grosso modo des fichiers de code (du texte) et des médias. Ce qui pèse lourd ce n’est pas le texte mais les images, les typographies, les animations jouées en boucles, les vidéos, les médias embarqués (son, vidéo, carte, liseuse de pdf…). Tout ceci alourdit et ralentit le chargement de la page. Les images représentent en moyenne entre 70 à 80% du poids d’une page web. Avec quelques bonnes pratiques, il est possible de changer la donne.

En voici quelques une :

• Évite les images ou photos purement décoratives ;
• Avant de télécharger les images :
  – redimensionne les fichiers pour que leurs dimensions correspondent au contexte réel ;
  – optimise le poids des photos : plus c’est léger, mieux c’est (1 Mo, c’est beaucoup trop) ;
• Utilise un format d’image approprié au contenu :
  – pour des éléments graphiques : .png ou .svg ;
  – pour les photos : .jpg ou mieux du .webp ;
• Utilise 2 polices d’écriture maximum ;
• Privilégie les polices variables, elles sont beaucoup plus légères ;
• Évite d’ajouter des contenus embarqués (carte, vidéos…) sur des pages à fort trafic comme la page d’accueil. Tout le code sera chargé, que l’internaute soit intéressé ou non ;
• Évite de télécharger des bibliothèques d’icônes si seulement quelques-unes t’intéressent.

La technique : sobre et optimisée

Difficulté : Difficile

Les solutions “no-code” mettent l’accent sur la facilité d’utilisation et les effets “waouh” au détriment de la qualité du code. Souvent négligées par manque de temps ou de connaissance, l’optimisation du code, des contenus et certaines pratiques peuvent alléger le poids de la page web et accélérer son affichage et réduire la quantité de gaz à effet de serre émis à chaque chargement des pages web. 

Pour qu’un site reste en bonne santé, il faut éviter de le complexifier avec des fonctionnalités qui peuvent créer des erreurs, des failles de sécurité ou générer un code inutilement lourd et complexe. Je ne vous parle pas des nombreuses mises à jour à installer…

Mes recommandations :

• Choisi un thème et un builder qui génèrent un code propre (ni Divi et ni Elementor) ;
• Désinstalle les extensions inutiles et fait le tri parmi celles désactivées ou aux fonctionnalités en double. Au-delà de 10 extensions, ça commence à faire beaucoup ;
• Évite les chatbots conversationnel, les flux de réseaux sociaux, les popups (fenêtre surgissante) ;
• Veille à ce que le code se charge uniquement quand il y a besoin (coucou l’extension contactform7 pour WordPress qui charge ses fichiers sur toutes les pages) ;
• Évite d’utiliser ses typographies hébergées sur d’autres serveurs (google, adobe…) ;
• Supprime les images qui ne sont pas utilisées ;
• Factorise et minimise le code pour le rendre plus léger ;
• Utilise des variables CSS pour faciliter sa maintenance du code.

Comment déloger le gras numérique d’un site existant ?

Pour commencer, il faut prendre du recul sur ce qui est fait et se poser les bonnes questions, du point de vue de ton business et de ta clientèle idéale. Tu peux commencer par toi-même si tu le souhaite ou faire appel à un professionnel (moi) pour audit.  Ce dernier pose un diagnostic clair et établit un plan d’action à suivre en toute autonomie (tu peux aussi déléguer cette partie à un pro).

Voici quelques questions à te poser pour commencer à dresser l’état des lieux.

Cette [fonctionnalité, animation, effet, partie, paragraphe, phrase, image etc] :

• est utile et nécessaire ?
• est claire ?
• pourrait être simplifiées ? être regroupées ?
• apporte une réelle plus-value ?
• sert ton propos ?
• sert tes objectifs marketing ou business ?
• est utile à l’utilisateur pour répondre à son besoin ?
• est optimisé·e ? (référencement organique, poids, dimensions…)

Si tu as répondu majoritairement “non”, c’est que tu peux améliorer ce qui est actuellement présent.

Illustrons ceci avec l’exemple de mon site internet

J’ai présenté sa refonte par le biais de carrousels composé de deux images : 1 pour l’avant et une autre pour la refonte. Finalement, les carrousels posaient 2 problèmes : remarquer les améliorations était difficile et les carrousels étaient codé en jQuery. Cette technologie est lourde et nécessite le chargement complet de toute une bibliothèque pour si peu.

J’ai remplacé les carrousels par deux images placées côte à côte, c’était bien plus simple et efficace. Pour réduire encore le poids, j’ai mis ces deux visuels sur la même image (41 Ko) pour n’en charger plus qu’une. Avec ces optimisations, une économie totale de 60 ko (20 Ko par image) et de 3 requêtes ont été réalisées. 

3 bénéfices principaux de la chasse au gras numérique…

1 • C’est bon pour le business

• Le site est plus léger et se charge bien plus vite. L’expérience utilisateur est améliorée ;
• Le site est plus efficace : le bon message, de la bonne manière, à la bonne personne, au bon moment ;
• Le référencement est amélioré ;
• La prise de contact et la vente sont facilitées ;
• La surface d’attaque est réduite ;
• Le risque d’incompatibilité est plus limitée ;
• Moins de plugins, c’est moins de mises à jours à appliquer ;
• Une économie de temps et financière : plus facile à maintenir en bon état et les problèmes sont plus rapides à identifier car il y a moins d’éléments à contrôler ;
• On participe à diminuer la pollution numérique liée au stockage et à l’utilisation.

2 • Bon pour l’utilisateur

• Le message est plus direct et clair : l’utilisateur trouve plus facilement ce qu’il cherche car la navigation est facilitée et les informations sont mieux structurées ;
• L’utilisateur est moins déconcentré par des animations, images, vidéos qui ralentissent le chargement et peuvent le détourner de son objectif premier ;
• Réduit la fracture numérique : le site est accessible même sur les vieux terminaux ou avec un débit réduit (3G).

3 • Bon pour la planète

• Moins de données chargées ;
• Une puissance de calcul plus modeste ;
• Lutte contre l’obsolescence prématurée des terminaux ;
• Préserve la faune, la flore, et les ressources ;
• Limite la création de nouvelles infrastructures ;
• Rendre le net moins polluant.

Avais-tu conscience de tout ça ? Dis-moi en commentaire !
Toutes ces bonnes pratiques sont celles que j’utilise pour créer des sites vitrine onepage éco-responsable.