Le numérique, comme toute activité humaine, génère une pollution considérable (lire mon article sur la pollution numérique). En tant qu’entrepreneur ou dirigeant d’entreprise ou même salarié, le fait de communiquer sur le web contribue à cette pollution : email, visioconférence, site internet… Tu veux en savoir plus sur le sujet ? Cet article est fait pour toi.
Le gras (numérique) c’est la vie !
Ce qui est vrai en cuisine, ne l’est pas pour le web. Le principal ennemi d’une page web (et de mon chat) c’est son poids. Le gras numérique représente ce qui est superflu et pèse lourd dans la balance.
- Plus une page est lourde, plus son chargement sera long. Une page internet est considéré lourde par les moteurs de recherche dès 4 Mo.
- Plus le chargement est long, plus les visiteurs sont tentés de fuir avant d’avoir vu son contenu. Personne n’a envie d’attendre. Au-delà de 5 secondes, 38% des usagers ont quitté le site (= taux de rebond), soit 1 usager sur 3 (source : Google).
- Cette fuite envoie un signal négatif sur la qualité de la page web à Google et nuit directement à son bon référencement.
- Moins il y a de visite, moins il y a de vente. Logique !
Toujours plus complet, toujours plus gras !
Les améliorations techniques aidant (ADSL, fibre, code) les pages web se sont enrichies d’images, de contenus embarqués (vidéo, carte, etc.), d’animations… Tout ceci a contribué à la prise de poids excessive et à l’augmentation du temps de chargement des pages web. Deux facteurs qui nuisent à l’expérience utilisateur et à leur bon référencement.
Il est temps d’agir
Au-delà de l’aspect performance, toutes ces données nécessitent la création d’infrastructures pour être stockées, plus d’énergie, de puissance de calcul qui fatiguent plus rapidement les appareils numériques.
Certes le stockage en ligne coûte de moins en 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 complexe. 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.
Pourquoi s’attaquer au gras numérique ?
Nous l’avons vu plus haut, le gras numérique c’est tout ce qui est non-essentiel et apporte peu de valeur aux interfaces et à l’utilisateur. Tailler dans l’gras permet d’apporter la même valeur avec des alternatives plus sobres. Autres bénéfices, les interfaces sont plus légères et sont plus faciles à maintenir en bon état. Le message est plus digestes et l’accessibilité est améliorée. Cerise sur le gâteau l’impact environnemental négatif du projet numérique est grandement diminuée.
Éviter le gras numérique dès la conception
Le gras numérique n’est pas seulement une histoire de code. Dès la conception graphique, il est possible de réduire le budget écologique d’un projet web. Le gras numérique peut se loger à différents endroits d’un site, d’une application… Il peut, selon sa nature, être plus ou moins difficile à déloger.
Savoir à qui on s’adresse
Difficulté : moyenne
Pour cela, il est important de connaître la clientèle que l’on cherche à atteindre et les informations qu’elle vient chercher.
Solution : Appuies-toi sur des entretiens avec ta clientèle idéale. Comprendre ses besoins et les problèmes qu’elle rencontre te donnera toutes les clefs pour l’aider.
Optimiser sa rédaction
Difficulté : Facile
- Fixe-toi un objectif par page pour te concentrer sur l’essentiel.
- Structure les textes avec des titres (h1, h2, h3…) c’est bon pour le référencement et ça facilite la lecture en diagonale.
- Découpe les blocs de texte en plusieurs plus digestes.
- Utilise un langage clair et compréhensible : évite les phrases à rallonge et complexes, les mots techniques, les abréviations…
Optimiser la navigation
Difficulté : Facile
- Organise tes pages comme le ferait ta clientèle idéale
- Utilise des intitulés de navigation clairs
- Évite les menus en cascade
- Veille à ce que les liens fonctionnent
- Respecte la règle des 3 clics maximum pour atteindre une information. Plus le parcours est direct, plus l’information est facile à trouver.
- Vérifie que tu n’as pas de pages référencées par les moteurs de recherches mais qui n’existent plus
Optimise le poids du site
Difficulté : Moyenne
- Désinstalle les extensions désactivées et inutilisées.
- Fait le tri, au delà de 10 extensions, ça commence à faire beaucoup.
- Des extensions activées avec des fonctionnalités similaires peut crée des conflits et alourdir inutilement ton site.
- Supprimes les images qui ne sont pas utilisées et fait les redirections nécessaires.
Optimiser le poids de la page
Difficulté : Moyenne
- Avant de les télécharger des images sur ton site
– redimensionne-les pour correspondre à leur taille d’affichage
– optimise le poids des fichiers - Utilise un format d’image approprié au contenu :
– pour des éléments graphiques : .svg ou .png
– pour les photos : .jpg ou mieux du .webp - Utilise 2 polices d’écriture maximum.
- Privilégié les polices variables qui plus flexibles et sont beaucoup moins lourdes.
- Évite d’incorporer des cartes, des vidéos sur des pages à fort traffic. Il y a fort à parier qu’une toute petite partie des visiteurs seulement soient intéressés.
- Évite de télécharger des bibliothèques d’icônes si seulement quelques-unes t’intéressent.
Optimise le code
Difficulté : Difficile
- Choisi un thème et un builder qui génère un code propre (bye-bye Divi et Elementor)
- Veilles à ce que les fichiers des extensions se charge uniquement si besoin sur la page (coucou contactform7 ses fichiers se chargent sur toutes les pages).
- Sert le code uniquement là où il est utile et non sur toutes les pages.
- Refactorise le code et utilise des variables pour rendre le code plus léger et facile à maintenir
- Intègre uniquement les parties utile du framework
Comment déloger le gras numérique d’un site existant ?
Pour commencer, il faut prendre du recul sur ce qui est fait. Rien de mieux qu’un audit pour poser un diagnostic et établir un plan d’action concret.
Si tu veux déjà commencer par toi-même, la première chose à faire, c’est de te poser les bonnes questions. Du point de vue business et du point de vue utilisateur du site.
Tu peux t’interroger si cet élément, image, texte :
- est nécessaire ?
- pourrait être simplifié ?
- apporte une réelle plus-value ?
- sert ton propos ?
- sert tes objectifs ?
- est-ce que la structure de titre est correcte ?
- est utile à l’utilisateur pour atteindre son objectif ?
- est-ce que des informations pourraient être regroupées ?
- est-ce que la rédaction est assez claire ?
- est-ce que cette image n’est pas trop lourde (moins de 100 ko) ?
- est-ce que cette image n’est pas trop grande par rapport au conteneur ?
- est-ce que cette image est bien nommée ?
- Est-ce que cette animation d’apparition est vraiment nécessaire ?
| Business | Client idéal | |
|---|---|---|
| Cible | Est-ce que ce message cible une clientèle précise ? | |
| Rédaction | Est-ce apporte une réelle plus-value ? Sert ton propos et tes objectifs ? Est-ce que des informations pourraient être regroupées ? | Est-ce pertinent et utile à l’utilisateur pour atteindre son objectif ? |
| Navigation | ||
| Image | ||
| Technique |
Si tu as répondu majoritairement “non”, c’est que tu peux supprimer, améliorer ou proposer une alternative.
Illustrons ceci avec l’exemple de ce site internet. Pour la présentation de sa refonte, j’ai utilisé des carrousels avec deux images pour présenter l’avant et après de la page d’accueil. Les carrousels alourdissaient le code de la page, et ce n’était pas optimal pour visualiser les ajustements faits. Je les ai remplacé par deux images côte à côte, c’était bien plus simple et efficace. Pour réduire encore le poids, j’ai mis ces deux visuel sur la même image (41 Ko) pour n’en charger plus qu’une. L’économie a été de 20 ko et d’une requêtes au serveur par carousel. Il y en avait 3, soit au total 60 ko et 3 requêtes économisées.
Pour résumer, réduire le gras numérique c’est…
1 • Bon pour le business
- Améliore l’expérience utilisateur globale : le site est plus rapide, plus accessible, plus clair et plus agréable.
- Gagne en efficience : le bon message, de la bonne manière, à la bonne personne, au bon moment
- L’accessibilité est souvent bien meilleure
- Le site est plus léger et se chargera bien plus vite. L’expérience utilisateur est améliorée
- Avec tous ces indicateurs au vert, le référencement du site est amélioré.
- La prise de contact et la vente sont facilitées.
- Une économie financière et en temps.
- C’est plus facile à maintenir dans le temps.
- Les problèmes sont plus rapides à identifier, il y a moins de choses à contrôler.
- La surface d’attaque est réduite et moins de risque d’incompatibilité
- Moins de plugins, c’est moins de mises à jours à appliquer
- On participe
2 • Bon pour l’utilisateur
- Le message est plus direct et clair : l’utilisateur comprend facilement.
- L’utilisateur trouve plus facilement ce qu’il cherche, la navigation est facilitée, les informations sont mieux structurées.
- L’utilisateur est moins déconcentré par des latences de chargements, des vidéos, des images, des animations…
- 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 réduite qui augmente la durée de vie des terminaux et des serveurs.
- 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.
- Ça fait partie des bonnes pratiques d’éco-conception de site internet pour rendre le net moins polluant
4 • J’en oublie certainement beaucoup d’autres
Promis je viendrai compléter
Avais-tu conscience de tout ça ?
Dis-moi en commentaire !