Performances du site Katzele

Auteurice : Arthur Pons

Temps de lecture : ~5 minutes

Pourquoi s’y intéresser

Google nous apprend par exemple en mars 2017¹ que

Le temps de chargement d’une landing page mobile est de 22 secondes en moyenne. Or, 1 visite sur 2 est abandonnée au-delà de 3 secondes de chargement sur un site mobile en 3G

Pour les sites commerciaux dont la réussite dépend du temps de rétention des utilisateurices un temps de chargement faible est essentiel. On apprend alors qu’un site de e-commerce d’un chiffre d’affaire de 100k€ accusant une seconde de chargement supplémentaire accusera 2,5M€ de manque à gagner en un an².

Puisque par ailleurs les sites ayant le plus à perdre sont souvent parmi les plus compliqués, il n’est pas étonnant que nombres d’acteurs de l’industrie aient développé des outils d’audit de performance. L’un d’eux, gratuit, est PageSpeed de Google (anciennement Lighthouse je crois).

Cet outil est fréquemment utilisé pour améliorer les performances d’un site existant. Dans le milieu du web un peu écolo il est parfois utilisé pour faire état de bonnes performances environnementales, du moins à certains égards. Un bon score voulant souvent, mais pas toujours, dire que le site est léger et/ou fonctionne correctement sur du matériel peu puissant. Par exemple Timothée Goguely affiche sur sa page un score PageSpeed de 100³ en plus des scores d’accessibilité et EcoIndex. Pour un public averti il indique également le poid de la page, le nombre de requêtes et la taille du DOM. C’est probablement l’outil utilisé par Gauthier Roussilhe pour obtenir les données citées dans son article au sujet de l’ecoconception.

Même si ce serait une erreur critique de résumer l’écoconception d’un service numérique à l’obtention d’un bon score sur ces outils pour de très nombreuses raisons mentionnées dans l’article de Gauthier et cette conférence sur le sujet on peut tout de même en apprendre des choses.

Les résultats

Au 10 avril 2023

PageSpeed

Voir le résultat pour la page d’accueil du site. Il n’y a pas vraiment de raisons de penser que le résultat serait différent pour les autres pages du site à moins d’y afficher de grosses images. Si vous ne voulez pas consulter le site :

Le site serait donc parfait sur la performance avec un temps de chargement de 0,8s. La seule opportunité d’amélioration rapportée est le chargement bloquant de la feuille de style qui coûte 0,14s. On pourrait différer le chargement de cette feuille pour que le contenu apparaisse d’abord mais étant donné les faibles durées en jeu, peu importe.

Côté accessibilité il est mentionné⁵ que la structure de la page n’est pas idéale puisque le titre H3 “participer” suit un titre de niveau H1 pouvant ainsi gêner la lecture sémantique du document, notamment pour les personnes ayant recours à un lecteur d’écran.

Pour les bonnes pratiques il est mentionné que le site devrait permettre la communication avec le protocole HTTPS et ainsi chiffrer ses données. Aujourd’hui ce n’est pas fait parce que personne du collectif n’y a investi du temps. Les arguments en faveur sont bien connus de certains membres même s’il existe des contre arguments valides et très peu audibles. Peut-être devrions nous en discuter collectivement ?

Finalement le score SEO à 100 est quelque peu ironique puisque nous ne sommes littéralement pas référencés par Google.

Pour coller aux pratiques des personnes citées précédemment regardons d’autres métriques.

EcoIndex

Le résultat

La page d’accueil de notre site est classé 460 sur 33114. Je cite :

Le top. On se rapproche dangereusement de la perfection.

Il est amusant de noter qu’EcoIndex mesure la taille des pages en Mo. Cela trahit le fait que les pages webs pèsent presque toujours plus de 100Ko et très souvent plus d’un Mo. Notre page pèse donc 0,0023 Mo.

EcoIndex a la bonne idée d’indiquer sur chacun des scores la médiane et une “cible” indicative.

Pour le poids la médiane se trouve à 2,41 Mo, la cible à 1 Mo. La médiane n’est pas bien surprenante mais la cible est elle assez élevée. Les pages qui, selon moi, ont de bonnes raison de peser 1 Mo sont très rares.

Pour la complexité la médiane du nombre d’éléments est autour de 693 et la cible 600. Je trouve ces deux chiffres élevés. J’imagine qu’ils sont tous deux le fruit de l’utilisation massive de CMS générant, même quand cela n’est pas bien utile, des structures de page complexe. Cela combiné à des présentations visuelles complexes pousse le nombre d’élements à la hausse.

Pour les requêtes la médiane est à 78. C’est massif. Il est difficile d’imaginer 78 requêtes sans avoir énormément recours à des librairies js, des feuilles de style éclatées, plusieurs typos, de nombreuses images par page et de la pub. La cible de 40 paraît plus raisonnable même si elle permet toujours de faire beaucoup de choses.

EcoIndex nous informe que pour 1000 visites par mois⁶ l’empreinte de cette page est de 17,4L d’eau bleue⁷ et 1,16kgCO2e.

Autres statistiques

Taille moyenne d’une page : ~20Ko

Calculée avec :

dc -e "2k $(find root -name '*.html' | xargs -n1 du -b | cut -f1 | tr \\n '+' | sed 's/+$/\n/' | bc) $(find root -name '*.html' | wc -l) / p"

Nombre moyen du DOM : ~153

Approximé avec :

dc -e "2k $(find root -name '*.html' | xargs -n1 grep -Eo '</[^<>]*>|<[^<>]*/>' | wc -l) $(find root -name '*.html' | wc -l) / p"

Nombre moyen de requêtes : 3

A priori aucune page n’a aujourd’hui d’image donc on a le css, le favicon, l’html.

Pourcentage du “contenu” (le texte) sur la quantité totale de données à télécharger : 82%

Calculé avec ce script

#!/bin/sh

css=$(du -b rc/style.css | cut -f1)
favicon=$(du -b rc/katzele.png | cut -f1)

md=$(mktemp)

find root -name '*.html' | xargs -n1 pandoc -t markdown > $md
content=$(du -b $md | cut -f1)

total=$(find root -name '*.html' | xargs du -cb | tail -n1 | cut -f1)

dc -e "2k $total $css + $favicon + $content r / 100 * p"

Commentaires