Réduire le poids d’un site web en optimisant son design

Nous savons maintenant que plus le nombre d’informations à charger sur une page est élevé, plus la consommation en électricité nécessaire pour afficher le contenu de la page est importante. Et plus un site consomme d’électricité pour fonctionner, plus son impact carbone est élevé automatiquement. 

Le nerf de la guerre est donc de diminuer le poids de nos sites web, page après page. Et c’est d’autant plus important pour les sites à fort trafic puisque le nombre de pages vues y est plus grand. Et donc le besoin en électricité aussi et donc les émissions de CO2… bref vous avez compris la boucle.

Je vous parlais il y a quelques temps de l’approche minimaliste de Marie Kondo et de la façon dont nous pourrions nous en inspirer pour l’appliquer à la conception de sites web ou à l’ajout de nouvelles fonctionnalités.

Changer d’état d’esprit lors de la construction ou l’ajout d’une nouvelle fonctionnalité est essentiel mais je voulais aujourd’hui aborder le sujet des pages existantes.

Par quelles pages commencer ?

La consommation en électricité étant directement liée au poids de la page ainsi qu’à son trafic, il est assez logique de commencer le nettoyage en commençant par les pages obtenant le plus grand nombre de visites. Et à trafic plus ou moins identique, commencer par les pages les plus lourdes. 

Pour mesurer le poids d’une page web, j’utilise l’outil Pingdom qui est très simple d’utilisation (il suffit d’entrer l’url de la page et d’attendre le résultat) et qui donne également quelques pistes d’amélioration pour réduire le poids de la page.

Comment réduire le poids d’une page web en optimisant son design ?

Alléger une page web peut passer par l’optimisation du code en simplifiant le code autant que possible (moins de lignes de code = moins de temps de traitement) mais aussi par l’optimisation du design, UX et UI

Optimiser l’UX

L’optimisation d’une page par l’UX consiste à raccourcir autant que faire se peu le parcours utilisateur, l’objectif étant que le visiteur fasse le moins de clics possible pour accéder à l’information qu’il recherche.

Pour cela, il faut d’abord identifier s’il y a des pages qui nécessitent un retravail en termes d’UX. Le taux de rebond est selon moi un bon indicateur car, à l’exception de pages de contenu de type article de blog, un taux de rebond élevé peut indiquer un problème dans la page. J’en parle plus en détail ici.

Une fois les pages nécessitant un retravail UX identifiées, il s’agit de cibler les parcours qui sont les moins intuitifs. Pour cela, des outils d’enregistrement de sessions comme Hotjar peuvent nous aider à identifier les parcours trop longs ou de type “yoyo”. Là aussi, j’ai écrit un article plus détaillé ici.

L’optimisation UX peut également passer par la personnalisation des parcours utilisateur en fonction de leur statut (sont-ils nouveaux sur le site ?) et du niveau d’information dont ils ont besoin pour une expérience fluide. Je parle notamment des parcours d’onboarding et de l’approche de divulgation progressive dans cet article.

Optimiser l’UI

L’optimisation d’une page par l’UI passe quant à elle par les choix de charte graphique (couleurs, typographie…) et l’optimisation des contenus tels que les images ou les vidéos. 

Voici quelques articles que j’ai rédigé à ce sujet:

Elle passe aussi par le choix des interactions. Bien choisir les interactions peut faire une grande différence sans forcément dégrader l’expérience utilisateur.

Voici quelques exemples:

  • Remplacer les carrousels d’image par des flèches “suivant” – “précédent” 
  • Remplacer le scroll infini par une pagination ou un bouton “voir plus”
  • Eviter l’autocompletion ou allonger le nombre de caractères nécessaires pour la déclencher
  • Limiter les animations autant que possible
  • Limiter l’usage des chatbots proposant de l’aide automatiquement (le déclencher uniquement sur les pages critiques par exemple)

Cette liste n’est bien sûr pas exhaustive, n’hésitez pas à participer en commentaires pour donner vos bonnes idées 🙂 

Je vous invite également à consulter le guide d’éco-conception des Designers Ethiques en complément à cet article.

Vous pouvez contribuer à créer un web plus respectueux de la planète en partageant cet article pour éveiller les consciences :)
  •  
  •  
  •  
Publié le
Catégorisé comme Agir

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *