Bonnes Pratiques pour l'Interface Utilisateur (UI)
Le travail de conception réalisé en amont sur l'interface aura un impact bien supérieur à l’optimisation minutieuse des lignes de code.
Axe 1 : Adopter un design sobre et épuré
Le constat : Le poids des pages web a été multiplié par 115 entre 1995 et 2015. Les images représentent en moyenne 45% du poids total d’une page.
L'objectif : Afficher seulement les éléments qui apportent réellement de la valeur à l’utilisateur.
Comment faire ?
- Supprimer les éléments purement décoratifs.
- Limiter le nombre d’éléments (polices, couleurs, etc.). Par exemple, se limiter à deux types de polices de caractères.
- Éviter d’utiliser des animations complexes (javascript et CSS) et des carrousels.
- Privilégier du texte, voire un schéma, plutôt qu'une vidéo.
Axe 2 : Optimiser les contenus
Le constat : L’optimisation des images permet un gain de performance de 15% à 20%.
L'objectif : Optimiser au maximum les éléments, tout en assurant le confort visuel des utilisateurs.
Comment faire ?
- Minimiser la taille des éléments : Réduire les dimensions des images et compresser leur définition.
- Utiliser des formats optimisés :
- Pour les images, les formats AVIF et WebP offrent de bien meilleures performances que JPG ou PNG.
- Pour les polices, le format WOFF2 est bien plus efficace que les formats plus anciens.
- Proposer plusieurs tailles d'images en fonction des dimensions de l’écran du terminal.
Illustration
Axe 3 : Adopter des pratiques favorisant la sobriété
Le constat : Les flux vidéo représentaient 80% des flux de données mondiaux en 2018.
L'objectif : Minimiser la consommation d’énergie et de ressources induites lors de la navigation.
Comment faire ?
- Utiliser un mécanisme de chargement différé (lazy loading) pour les contenus qui apparaissent hors de l'écran.
- Désactiver la lecture automatique et la lecture en boucle des contenus vidéo.
- Arrêter la lecture des vidéos lorsqu'elles sortent du cadre de visualisation.
- Optimiser les formulaires : Indiquer les formats de saisie attendus et limiter le poids et les formats des fichiers que l'utilisateur peut transmettre.
Étude de cas : l'opération de décarbonation de l'ADEME
L'optimisation de 10 sites web a permis d'obtenir les résultats suivants :
- 54% de bande passante économisée.
- 925 kg d’équivalent CO2 évités pour 10 000 visites.
- 30% de gain en vitesse de chargement.
Ce travail a été réalisé en 2 à 5 jours par site et portait à 80% sur la présentation du contenu. En savoir plus.