Pour guider votre réflexion
50 conseils de Pro !
On aurait pu les appeler les « 50 conseils d’éco-conception web pour les nuls », mais comme l’information est plutôt accessible, ce sera « 50 conseils de Pro » 😉
Webdesign, développement, hébergement, gestion de contenus, voici de vrais conseils pour améliorer votre performance web.
Favoriser une électricité issue d’énergie renouvelable pour le serveur.
L’électricité issue d’EnR est renouvelée en continue par la planète : Énergie solaire, éolienne, biomasse… Les énergies renouvelables jouent un rôle clé dans la transition énergétique sans causer la disparition de la matière première.
Optimiser l’espace occupé par le site internet sur le serveur.
Afin de limiter la taille totale qu’occupe l’ensemble de la structure d’un site sur un serveur, il est nécessaire d’optimiser et de dimensionner les ressources strictement nécessaires et de supprimer ce qui ne l’est pas. Plus la structure d’un site est conséquente, plus elle a un impact sur l’hébergement.
Optimiser les fichiers de logs sur le serveur.
Les fichiers de logs des applications d’un serveur web (Apache, Nginx, MySQL, PHP, … etc) peuvent être vite volumineux en fonction des connexions/visites sur le site internet. Il faut désactiver les logs non indispensables et optimiser les écritures sur les événements respectifs des applications.
Choisir un serveur de “proximité” aux usagers.
La proximité du serveur web est essentielle car elle influence la vitesse de chargement. Plus le serveur Web est proche du public cible, plus les données seront transférées rapidement.
Héberger le site internet sur un serveur “vert”.
Le choix d’un hébergeur « vert » est important pour limiter l’impact de votre site internet. Un hébergeur avec des serveurs optimisés, qui fonctionne sur des énergies durables et qui limitent son impact environnemental répond aux exigences de l’éco-conception web.
Nettoyer et optimiser la base de données de WordPress.
Nettoyer et optimiser régulièrement votre base de données va réduire sa taille sur le serveur. En conséquence, les performances du site internet sous WordPress vont être améliorées et les chargements seront moins coûteux en énergie.
Préconiser les meilleurs types de données en toute circonstance.
Le développement peut avoir un impact sur l’éco-conception web relatif à sa manière de traiter des données selon leur type. Il faut dimensionner celles-ci en fonction de leur emploi concret pour éviter des consommations excessives côté serveur et côté navigateur.
Retirer les metadonnées des images.
Les métadonnées EXIF peuvent être nombreuses, jusqu’à 350 données différentes pour une même image. Elles rajoutent du poids non-indispensable dans le cas d’un affichage sur internet et leurs suppressions allègent le poids de celle-ci.
Charger les médias seulement à l’interaction de l’utilisateur.
Le déclenchement automatique des médias (vidéo, audio, … etc) fait télécharger des données en quantité importante au chargement de la page et sans l’accord explicite des utilisateurs. C’est nuire aux performances et à l’expérience utilisateur de votre site internet.
Le site propose une page Plan de site.
Offrir la possibilité à vos utilisateurs de se rediriger facilement grâce à une page « Plan de site » permet d’optimiser leur parcours et de limiter l’impact de leurs visites respectives. C’est un outil qui peut fluidifier le parcours d’un utilisateur.
Le site propose un fichier sitemap.xml.
Proposer un fichier sitemap.xml qui présente la liste des URLs et des contenus à indexer aux moteurs de recherche permet de diminuer l’impact énergétique lié à la consultation du site.
Proposer une version Dark mode de votre site internet.
Une interface plus sombre est moins gourmande en énergie : un pixel noir consomme environ 60% d’énergie en moins qu’un pixel blanc. il permet d’économiser entre 30% et 60% de batterie ce qui est plus respectueux pour notre environnement.
Les tableaux de données ne sont pas remplacés par des images.
Remplacer un tableau de données par une image n’est pas optimisé. Le poids de celle-ci sera forcément plus conséquent que le tableau. De plus, cette pratique détériore le référencement naturel ainsi que l’accessibilité du contenu.
Mettre en place des animations optimisées.
Il faut raisonner, quantifier et évaluer l’utilisation des animations Javascript et CSS pour l’éco-conception web. Garder le strict nécessaire et optimiser celles-ci pour limiter leur impact.
Eviter les animations non-nécessaires.
Les animations Javascript sur le document HTML peuvent être lourdes et coûteuses selon leur nature et leur intérêt. Elles peuvent ternir les performances de votre site internet. Il est nécessaire de limiter celles-ci et de réaliser seulement des animations strictement nécessaires. Privilégier les animations CSS également.
Le site propose des styles CSS pour l’impression.
Afin de limiter l’impact que l’impression d’une page internet puisse avoir, il faut proposer des feuilles de style @print afin de rendre plus sobre et plus optimisé leur affichage en enlevant par ailleurs le haut de page, le pied de page et tout autre élément non-nécessaire à l’affichage sur impression.
Précharger les ressources quand c’est nécessaire.
Il est possible d’optimiser le chargement de vos pages en téléchargeant des ressources nécessaires en amont de tout le reste avec les attributs ‘prefetch’, ‘preconnect’ et ‘preload’. Cela permet de diminuer la charge des ressources à télécharger au même moment et d’établir des priorités.
Utiliser la technologie HTTP/2.
Le protocole web HTTP/2 compresse les en-tête HTTP et accélère la vitesse de chargement des pages. Il permet d’améliorer les performances d’affichage de votre site internet.
Proposer un moteur de recherche interne.
Un moteur de recherche interne est une solution pour fluidifier le parcours sur votre site internet et donc respecter l’expérience utilisateur. Il permet une réorientation facile et un accès rapide à l’information souhaitée.
Optimiser les audios avant leur import.
Un serveur web n’est pas optimisé pour encoder des médias « audios ». Il faut vous assurer que ceux-ci soient optimisés, compressés avant leur import et leur consultation sur le site internet.
Optimiser les vidéos avant leur import.
Un serveur web n’est pas optimisé pour encoder des médias « vidéos ». Il faut vous assurer que ceux-ci soient optimisés, compressés avant leur import et leur consultation sur le site internet.
Lazyload / Chargement paresseux des images.
Le Lazyloading est une solution pour ne pas télécharger l’ensemble des images de la page au premier chargement. Seules les images visibles au chargement ou à l’écran au défilement de l’utilisateur le seront. Cela améliore les performances du site internet.
Optimiser l’affichage des images.
Il est nécessaire de prendre en considération la taille d’affichage d’une image selon sa taille intrinsèque. Une taille d’image plus grande que sa taille d’affichage alourdit son poids et donc les ressources d’une page.
Compresser les images avant leur import.
Les images représentent en moyenne 60% du poids d’une page. Il est nécessaire d’optimiser celles-ci selon le format souhaité et de le faire avant leur import, soit sur votre machine, soit sur un serveur distant, afin de libérer cette charge du serveur de production.
Utiliser la compression GZIP sur le serveur.
Activer la compression GZIP sur le serveur de production permet de diminuer le poids des ressources à télécharger et améliore les performances de votre site internet.
Mettre en cache les requêtes sollicitées.
Un site internet qui fonctionne avec une base de données fait appel à celle-ci à chaque chargement de page. Toutes les requêtes sont donc sollicitées à chaque fois. Mettre en cache les requêtes souvent sollicitées permet de diminuer les charges serveurs et de gagner en performance.
Mettre en cache navigateur les ressources.
La mise en cache du navigateur vous permet d’accélérer votre site en stockant des fichiers localement dans le navigateur de l’utilisateur. De cette manière, la quantité de données que l’utilisateur doit charger, ainsi que le nombre de requêtes HTTP sont réduites et les performances sont améliorées.
Minifier la sortie HTML.
Les fichiers HTML peuvent aussi être minifiés. La minification retire les commentaires, les espaces inutiles, les retours à la ligne et le contenu similaire. Cela réduit le poids du document HTML et améliore les performances du site internet.
Combiner les ressources CSS.
Combiner tous les fichiers CSS en un seul fichier réduit le nombre de requêtes HTTP sur votre site internet et améliore ses performances.
Combiner les ressources Javascript.
Combiner tous les fichiers Javascript en un seul fichier réduit le nombre de requêtes HTTP sur votre site internet et améliore ses performances.
Minifier les feuilles de styles CSS.
La minification des feuilles de styles CSS permet de diminuer leurs tailles sans détériorer le rendu final du site internet. Cela diminue la quantité de données à télécharger et contribue à de meilleures performances du site internet.
Minifier les fichiers Javascript.
La minification des fichiers Javascript permet de diminuer la quantité de données à télécharger et contribue à de meilleures performances du site internet.
Limiter les requêtes HTTP des ressources nécessaires.
Le nombre de requêtes HTTP influence la rapidité et la consommation de vos pages et la charge serveur. Plus les requêtes sont limitées, plus les performances seront améliorées.
Optimiser les performances d’affichage (Core Web Vitals de Google).
Les performances sont une étape vers l’éco-conception web et l’optimisation des ressources nécessaires à l’affichage d’une page web est importante dans ce cas de figure. Les Core Web Vitals de Google sont des indicateurs intéressants pour trouver des mesures d’amélioration.
Limiter l’emploi des extensions.
Que ce soit dans une structure de gestion de contenu ou par l’intermédiaire des outils disponibles via les navigateurs web, il faut limiter et mesurer l’emploi d’extensions selon les usages et les ressources engagées.
Optimiser la structure WordPress à son installation.
Installer WordPress nécessite d’optimiser les paramétrages par défaut de la structure : taille memoire limite, revisions d’article, thèmes et plugins, ….
Développer un thème sur-mesure allégé.
Si votre site internet est développé sur un CMS, il faut vous assurer qu’il tourne sur un thème sur-mesure allégé et optimisé. Les thèmes clés en main sont généralement lourds et privilégient le design au détriment du socle fonctionnel et donc des performances.
Rendre accessible l’interface et les fonctionnalités.
L’éco-conception web c’est également prendre en compte l’accessibilité web RGAA avec ses critères pour rendre disponible l’interface et les fonctionnalités du site internet.
Concevoir un design simple orienté utilisateur.
Favoriser un design simple et épuré pour limiter les contraintes techniques en développement. Il est nécessaire de prendre en considération pendant la phase de réalisation des maquettes, l’impact du design sur la réalisation technique.
Apporter une approche une mobile first.
L’approche « mobile first » permet de concevoir un site internet pour les terminaux mobiles et d’élargir le socle fonctionnel pour les terminaux plus grands dans un second temps. Cette démarche permet d’optimiser et de seulement charger les ressources nécessaires en fonction des contextes d’usage selon le terminal utilisé.
Optimiser l’expérience mobile d’un site internet.
À défaut de privilégier une approche « mobile first », il faut optimiser l’expérience de votre site internet sur les terminaux mobiles. Les usages peuvent être complément différents selon le terminal utilisé, et il faut optimiser ces expériences pour fluidifier le parcours de l’utilisateur.
Optimiser le parcours des utilisateurs.
La parcours d’un utilisateur est nécessairement important à analyser pour la qualité de votre site internet et l’organisation de l’information, mais il prend en compte également la dimension de l’éco-conception web. Plus le parcours d’un utilisateur est fluidifié, plus son impact est diminué.
Développer une application modulaire.
La conception d’un site internet optimisé et éco-conçu passe par une architecture modulaire, sur base de développement d’un core et de composants. C’est une solution pérenne et très facilement évolutive. La maintenance corrective est également optimisée.
Quantifier & raisonner les besoins et ressources nécessaires.
L’éco-conception web c’est mesurer les usages strictement nécessaires aux besoins usagers. Il faut pour cela quantifier et raisonner les ressources en fonction des analyses pré-établies.
Mettre en place une approche de sobriété numérique.
La sobriété numérique consiste à concevoir des services numériques plus sobres et à modérer ses usages numériques quotidiens. L’idée n’est pas de les rejeter, mais plutôt d’en avoir un usage raisonné et optimisé.
Proposer une conception souple aux éditeurs.
Un site internet basé sur un système de gestion de contenu CMS n’est pas qu’un contexte de consultation par des visiteurs. Il est également nécessaire de prendre en compte l’expérience des éditeurs de contenu. Plus la conception est souple, plus l’éditorialisation le sera également.
Mettre en place une amélioration continue en fonction des usages et usagers.
Le suivi et l’analyse d’un site internet après déploiement sur le serveur de production est important pour mettre en place une politique d’amélioration continue. Les usages peuvent établir un état des lieux des améliorations à apporter.
Choisir et utiliser les technologies les plus optimisées et adaptées.
L’emploi d’une technologie peut avoir une répercussion importante sur la qualité et les performances de votre site internet. Il est nécessaire de raisonner l’emploi de celles-ci en fonction de leurs nécessités et de favoriser d’autres technologies pour leurs optimisations.
Favoriser les traitements asynchrones.
À l’interaction de l’utilisateur, un traitement long et lourd peut être traité de façon asynchrone si c’est possible. Encourager l’utilisateur à lancer la tâche en arrière plan et à revenir plus tard pour obtenir le résultat.
Proposer une expérience utilisateur simplifiée.
L’expérience utilisateur UX définit, entre autres, quel comportement ont vos cibles sur votre site internet. Plus l’expérience est simplifiée, plus le parcours des utilisateurs est fluidifié. Cela réduira l’impact de leur visite.
