Comment obtenir un bon score EcoIndex ou comment l’améliorer ?

L'EcoIndex est un outil de mesure de l'impact environnemental des sites web, qui évalue des critères de consommation de ressources et d'émissions de CO2. Il a été créé par l'association Green IT. Chez Internet 2000, nous sommes devenus experts de ce score, qui est le plus reconnu en terme d'éco-conception en France, et qui sert notamment de base à la Déclaration Environnementale de Site.

Avant tout, il faut garder à l’esprit que : 

1. L’amélioration de son score EcoIndex doit s’accompagner d’un tri dans les fonctionnalités et le contenu, en appliquant les principes de sobriété éditoriale.
2. Le score EcoIndex sert à comparer ce qui est comparable : un blog avec d’autres blogs, un site de ecommerce avec d’autres.

Dans notre article précédent, nous avons vu comment EcoIndex calcule ses scores, avec quelle formule :

1. La taille du DOM compte pour 3 points.
2. Le nombre de requêtes compte pour 2 points.
3. Le poids de la page compte pour 1 point.

Prenons donc le score point par point, en commençant par le paramètre qui a le plus d’importance dans le résultat du score : le nombre d'éléments dans le DOM.

1. Comment réduire le nombre d’éléments dans le DOM ?

Ce critère est celui qui pèse le plus dans le score EcoIndex, puisqu'il compte pour 3 points.

Le nombre d'élément dans le DOM, c'est la complexité de la structure de la page. Plus il y a d'éléments dans le code de la page - bloc texte, bloc image, élément graphique, div, etc. - plus le DOM est important, plus la page demande d'"effort" à la machine pour s'afficher.

Quelles sont les actions à mettre en place pour réduire le nombre d’éléments dans le DOM  ?

1. Limitez la longueur de la page : plus une page est longue, plus il y aura d'éléments dans le DOM. Aussi simple que logique. Pour les pages avec de grandes quantités de contenu, comme des listes d'articles ou des images, essayez de le diviser en plusieurs pages, avec par exemple une pagination. 
2. Adoptez un design épuré : chaque élément, icône, flèche, décoration, est un élément de plus dans le DOM. Et les internautes préfèrent les designs épurés, ça tombe bien !
3. Simplifiez la structure HTML en éliminant les balises inutiles. Cherchez les endroits où il y en a trop, comme des <div> ou <span> superflus, supprimez-les ou fusionnez-les.
4. Utilisez des techniques de CSS modernes : au lieu d'utiliser plusieurs éléments imbriqués pour le style, utilisez les Flexbox ou Grids pour créer des mises en page complexes, avec moins d'éléments dans le DOM.
5. Faites le tri dans les fonctionnalités, widgets et composants tiers : médias sociaux, commentaires, maps, diaporamas ajoutent de nombreux éléments DOM. Faites le tri comme Mary Kondo ! Et pour ce qui doit absolument être conservé, choisissez des alternatives plus légères ou ne les chargez que lorsqu’elles sont demandées par l’utilisateur, au clic par exemple.
6. Optimisez les tableaux : si vous utilisez des tableaux pour présenter des données, assurez-vous qu'ils ne contiennent pas de balises superflues, ce qui arrive souvent. Les tableaux complexes peuvent souvent être simplifiés ou remplacés par des structures CSS plus modernes.
7. Fusionnez les éléments similaires : si la page contient de nombreux éléments similaires, ils peuvent être regroupés, fusionnés. Exemple : les boutons peuvent généralement être fusionnés en une seule structure, avec des classes.
8. Évitez les iframes : chaque iframe est comme une page web miniature avec son propre DOM !
9. Auditez le DOM : utilisez les outils de développement web intégrés aux navigateurs avec l'outil "inspecter" pour examiner la structure DOM de votre page et identifiez les éléments inutiles.
10. Dans le cadre d'une refonte, choisissez le bon CMS : les CMS type Wix, Squarespace, Framer, Wordpress génèrent beaucoup d'éléments dans le DOM. Préférez une structure en headless avec un builder comme Webflow, Silex, Nextjs, 11ty, en gardant en tête que la "propreté" du code va dépendre du développeur.

"Attention à la développeuse ou au développeur qui code votre page : elle/il n'a pas forcément conscience de l'impact qu'ont ses choix sur l'éco-conception. Il arrive souvent qu'on ajoute un conteneur pour créer un élément sans trop se poser de question, pour simplifier un peu le CSS/ Mais quand l'élément est dans une liste, on génère facilement des centaines de conteneurs inutilement." 
Alex Hoyau, CTO d'Internet 2000

2. Comment réduire le nombre de requêtes HTTP ?

Ce critère compte pour 2 points dans le score EcoIndex.

Il mesure le nombre d'appels faits par l'ordinateur ou le smartphone, pour récupérer les différents éléments de la page : images, scripts, feuilles de style, etc.

Quelles sont les actions à mettre en place pour réduire le nombre de requêtes HTTP  ?

1. Limitez la longueur de la page : comme pour le nombre d'éléments dans le DOM, plus une page est longue, plus il y aura de requêtes.
2. Utilisez une font variable ou des fonts system : une font variable n'utilise qu'une requête pour charger toutes les graisses, au lieu d'un ficher par graisse. Une font system est déjà présente sur l'appareil de l'utilisateur et ne nécessite donc aucun appel au serveur. Et hébergez vous-même la font, c'est encore mieux.
3. Évitez l'utilisation des plugins et des embed : une vidéo YouTube, comme un plugin, coûte cher en nombre de requêtes. La gestion des RGPD est un sujet à arbitrer.
4. Concaténez les fichiers : il s'agit de combiner plusieurs fichiers CSS ou JavaScript en un seul fichier pour réduire le nombre de requêtes.
5. Utilisez des sprites CSS : regroupez plusieurs images en un seul fichier image (sprite) et utilisez le CSS pour afficher uniquement la partie nécessaire de l'image.
6. Utilisez le Lazy Loading : chargez les images, vidéos et autres ressources uniquement lorsqu'elles sont nécessaires, c'est-à-dire quand elles entrent dans le viewport ou au clic. Cela réduit le nombre de requêtes initiales lors du chargement de la page.
7. Mise en cache efficace : cela peut réduire significativement le nombre de requêtes lors des visites ultérieures.
8. Regroupement des données API : si votre page nécessite des données provenant de multiples API, envisagez de les combiner en une seule requête API, si possible, pour récupérer toutes les données nécessaires en une seule fois.
9. Inlining des petites ressources : vous pouvez les intégrer les très petits fichiers, comme certaines icônes ou petits scripts, directement dans le HTML ou les CSS sous forme de data URI, ce qui élimine les requêtes HTTP correspondant.
10. Dans le cadre d'une refonte, choisissez le bon CMS : les CMS type Wix, Squarespace, Framer, Wordpress génèrent beaucoup de requêtes. Préférez une structure en headless avec un builder comme Webflow, Silex, Nextjs, 11ty, mais là encore, le résultat va dépendre du développeur.

3. Comment réduire le poids de la page ?

Le poids de la page téléchargée compte pour 1 point dans le score de l'EcoIndex.

Il s'agit du volume de données téléchargées pour afficher la page : contenu texte, images, scripts JavaScript, feuilles de style CSS, etc.

Quelles sont les actions à mettre en place pour réduire le poids de la page ?

1. Optimisez les images : c'est la première chose à faire pour réduire le poids d'une page. Comprimez les images sans sacrifier leur qualité visuelle en utilisant des formats d'image modernes comme les WebP, AVIF et SVG, qui offrent de bien meilleurs taux de compression que les formats anciens, comme JPEG ou PNG. 
   Pour plus de détail sur l'optimisation des images, lire notre article précédent.
2. Limitez la longueur de la page : comme pour le nombre d'éléments dans le DOM et le nombre de requêtes, plus une page est longue, plus elle est lourde.
3. Optimisez les vidéos : évitez le déclenchement automatique - que les utilisateurs détestent par ailleurs. Utilisez des formats modernes de compression, et arbitrez entre le format embed ou auto-hébergé selon vos capacités techniques.
4. Minifiez les ressources : réduisez la taille des fichiers CSS, JavaScript, et HTML en éliminant les espaces inutiles, les commentaires et les retours à la ligne. Utilisez des outils de minification pour automatiser ce processus.
5. Compressez des fichiers : activez la compression sur le serveur web (comme gzip ou Brotli) pour réduire la taille des fichiers transmis aux utilisateurs. Cela peut réduire significativement la taille des ressources textuelles.
6. Utilisez le Lazy Loading : implémentez le lazy loading pour les images, vidéos, et iframes. Ces éléments ne sont chargés que lorsque l'utilisateur en aura besoin - typiquement, lorsqu'ils entrent dans le viewport, réduisant ainsi le poids initial de la page.
7. Limitez l'utilisation des fonts : les polices web peuvent être volumineuses, privilégiez les fonts variables ou system. 
8. Réduisez les bibliothèques et frameworks externes : remplacez des bibliothèques volumineuses par des alternatives plus légères ou voyez si vous pouvez inclure uniquement les parties nécessaires. Préférez l'utilisation des CSS au JavaScript.
9. Faites un tri dans les widgets et plugins : vérifiez si tous les widgets ou plugins sont (vraiment) nécessaires. Ils ajoutent des scripts et des styles supplémentaires qui peuvent augmenter le poids de la page.
10. Optimisez les feuilles de style et scripts : analysez l'utilisation de CSS et de JavaScript. PurgeCSS pour le CSS et Tree Shaking pour le JavaScript peuvent aider à supprimer le code non utilisé.
11. Auditez la page avec des outils de mesure performance : Google PageSpeed Insights ou Lighthouse sont très utiles pour obtenir des analyses détaillées et des recommandations spécifiques pour réduire le poids de votre page.
12. Selon le CMS : pour les CMS de type Wix, Squarespace, Framer, Wordpress, utiliser jquery ou d'autres framework côté front. Pour une structure en headless avec un builder comme Webflow, Silex, Nextjs, 11ty, les pages peuvent être ultra-légères à condition que le développeur y soit sensibilisé ou formé.

Avec tout ça, vous devriez améliorer votre note EcoIndex de manière significative. Et pour une refonte, pensez à tout cela en amont, pour éviter de mauvaises surprises.