10 mars 2017

Actuellement, il n’existe pas d’outils simple en ligne performant et gratuit pour juger le niveau de maturité d’éco-conception d’une page web.

Le seul outil de mesure gratuit que je connaisse orienté green-it est l’ecoIndex : http://www.ecoindex.fr. L’approche est intéressante mais ne prends pas en compte la complexité fonctionnelle de la page. Par exemple, la page d’un site marchand qui affiche des photos optimisées et des vidéos légères est mal notée car trop lourde. C’est les limites de ce genre d’outils. Je pense que seul l’humain peut définir si les solutions fonctionnelle et technique sont pertinentes au niveau économie de ressources.

L’approche la plus pertinente consiste à vérifier si les bonnes pratiques d’éco-conception sont en place et mesurer la consommation. C’est forcement plus long qu’un robot et surtout cela demande une expertise en matière d’éco-conception. C’est l’approche proposée par le green code label. Le référentiel de ce label décrit les bonnes pratiques qui sont jugée. Le  livre “eco-conception web les bonnes pratiques” de Frédéric Bordage liste et explique également 115 bonnes pratiques.

Très souvent, les bonnes pratiques d’eco-conception sont liées à la performance (attention il y a des exceptions). Il existe plusieurs outils de mesure de performance qui peuvent aider dans une approche green-it :

GTmetrixhttps://gtmetrix.com/ cet outil regroupe pageSpeed de Google et Yslow de Yahoo. Il permet de faire un historique des mesures et ainsi faire des comparatifs dans le temps. Il permet également de comparer deux sites – idéal pour une refonte. En plus du résultat brut sous forme de note, tous les points sont expliqués et des solutions sont proposées. GTmetrix vérifie la mise en place des bonnes pratiques.

WebPageTest : http://www.webpagetest.org/ est un outil de mesure de performance. Il complète bien GTmetrix cependant son interface est moins sexy.

F12 de chrome ou Firefox : l’onglet audits permet de réaliser un mini audit de la page et propose des solutions. Cet audit met en évidence les règles CSS inutilisées. Pour vérifier la taille des images, l’outil F12 de Firefox est plus intuitif. Ces outils sont simple pour vérifier le chargement des pages et des assets. Il permet de vérifier le status Http de tous les éléments (200, 304, 404)

Screaming Frog SEO Spider : C’est un outils bien connu des référenceurs. Dans notre cas, il va nous permettre de scroller tout le site rapidement pour avoir les poids des assets css, js,  images, pdf… et détecter les erreurs 404.

W3Chttps://validator.w3.org/ un site qui ne respecte pas les standards provoque des traitements d’erreur. Ce traitement nécessite forcement des ressources.

Eco-index : http://www.ecoindex.fr/ est un outils très simple qui mesure la performance environnementale d’un site. C’est en ligne, c’est gratuit et c’est en français. Super ! sauf que la mesure est très limitée (le poids de la page, le nombre de requete et le nombre d’élements du DOM). C’est un bon début…

Greenspector : c’est une solution en ligne mais payante. La mesure est effectué sur des vrais ordinateurs ou devices. C’est hyper complet, la prise en main n’est pas simple mais on obtient de vrais mesures. L’application est capable de détecter des dirty patterns pour améliorer le code.

EcoMeter : Cet outil est encore jeune mais l’approche est intéressante. Il y a un référentiel collaboratif mais je ne l’ai pas trouvé. Même chose pour le gitlab. Je ne trouve pas de moyen pour communiquer avec l’équipe projet.