Le site arthur.bebou.netlib.re - retour accueil
git clone git://bebou.netlib.re/arthur.bebou
Log | Files | Refs |
index.sh (7576B)
1 #! page
2
3 title: Performances du site Katzele
4 author: Arthur Pons
5 publication: 2023-04-10
6 description: Quelques statistiques au sujet de katzele.netlib.re
7 sectionmd: main
8
9 # Performances du site Katzele
10
11 ## Pourquoi s'y intéresser
12
13 Google nous apprend par exemple en mars 2017[^1] que
14
15 > Le temps de chargement d’une landing page mobile est de 22 secondes en moyenne.
16 > Or, 1 visite sur 2 est abandonnée au-delà de 3 secondes de chargement sur un
17 > site mobile en 3G
18
19 Pour les sites commerciaux dont la réussite dépend du temps de rétention des
20 utilisateurices un temps de chargement faible est essentiel. On apprend alors
21 qu'un site de e-commerce d'un chiffre d'affaire de 100k€ accusant une seconde
22 de chargement supplémentaire accusera 2,5M€ de manque à gagner en un an[^2].
23
24 Puisque par ailleurs les sites ayant le plus à perdre sont souvent parmi les
25 plus compliqués, il n'est pas étonnant que nombres d'acteurs de l'industrie
26 aient développé des outils d'audit de performance. L'un d'eux, gratuit,
27 est [PageSpeed](https://pagespeed.web.deb) de Google (anciennement Lighthouse
28 je crois).
29
30 Cet outil est fréquemment utilisé pour améliorer les performances d'un site
31 existant. Dans le milieu du web un peu écolo il est parfois utilisé pour faire
32 état de bonnes performances environnementales, du moins à certains égards. Un
33 bon score voulant souvent, mais pas toujours, dire que le site est léger et/ou
34 fonctionne correctement sur du matériel peu puissant. Par exemple Timothée
35 Goguely affiche sur sa page un score PageSpeed de 100[^4] en plus des scores
36 d'accessibilité et EcoIndex. Pour un public averti il indique également le poid
37 de la page, le nombre de requêtes et la taille du
38 [DOM](https://en.wikipedia.org/wiki/Document_Object_Model). C'est probablement
39 l'outil utilisé par Gauthier Roussilhe pour obtenir les données citées dans
40 [son article au sujet de
41 l'ecoconception](https://gauthierroussilhe.com/articles/eco-conception-le-brouillard-a-venir).
42
43 Même si ce serait une erreur critique de résumer l'écoconception d'un service
44 numérique à l'obtention d'un bon score sur ces outils pour de très nombreuses
45 raisons mentionnées dans l'article de Gauthier et [cette conférence sur le
46 sujet](https://podv2.unistra.fr/video/45478-techdays-11-ecoconception-1-quest-ce-que-lecoconception-numerique-etude-de-cas-du-site-web-des-cinemas-star-arthur-pons/) on peut tout de même en apprendre des choses.
47
48 ## Les résultats
49
50 Au 10 avril 2023
51
52 ### PageSpeed
53
54 Voir [le
55 résultat](https://pagespeed.web.dev/analysis/http-katzele-netlib-re/dombxbomwf)
56 pour la page d'accueil du site. Il n'y a pas vraiment de raisons de penser que
57 le résultat serait différent pour les autres pages du site à moins d'y afficher
58 de grosses images. Si vous ne voulez pas consulter le site :
59
60 |catégorie | score /100 |
61 |:--|--:|
62 |Performance | 100 |
63 | Accessibilité | 95 |
64 | Bonnes pratiques | 92 |
65 | SEO[^3] | 100 |
66
67 Le site serait donc parfait sur la performance avec un temps de chargement de
68 0,8s. La seule opportunité d'amélioration rapportée est le chargement bloquant
69 de la feuille de style qui coûte 0,14s. On pourrait différer le chargement de
70 cette feuille pour que le contenu apparaisse d'abord mais étant donné les
71 faibles durées en jeu, peu importe.
72
73 Côté accessibilité il est mentionné[^5] que la structure de la page n'est pas
74 idéale puisque le titre `H3` "participer" suit un titre de niveau `H1`
75 pouvant ainsi gêner la lecture sémantique du document, notamment pour les
76 personnes ayant recours à un lecteur d'écran.
77
78 Pour les bonnes pratiques il est mentionné que le site devrait permettre la
79 communication avec le protocole HTTPS et ainsi chiffrer ses données.
80 Aujourd'hui ce n'est pas fait parce que personne du collectif n'y a investi du
81 temps. Les arguments en faveur sont bien connus de certains membres même s'il
82 existe des contre arguments valides et très peu audibles. Peut-être devrions
83 nous en discuter collectivement ?
84
85 Finalement le score SEO à 100 est quelque peu ironique puisque nous ne sommes
86 littéralement pas référencés par Google.
87
88 Pour coller aux pratiques des personnes citées précédemment regardons d'autres
89 métriques.
90
91 ### EcoIndex
92
93 [Le
94 résultat](https://www.ecoindex.fr/resultat/?id=625e0c79-6eac-4c54-9ec9-3a9674f5ca25)
95
96 La page d'accueil de notre site est classé 460 sur 33114. Je cite :
97
98 > Le top. On se rapproche dangereusement de la perfection.
99
100 |catégorie | Appréciation |
101 |:--|--:|
102 | Générale | A - 92/100 |
103 |Poids | Si légère - 0,023 Mo |
104 | Complexité | Simple - 86 éléments |
105 | Requêtes | Peu de requêtes - 3 requêtes |
106
107 Il est amusant de noter qu'EcoIndex mesure la taille des pages en Mo. Cela
108 trahit le fait que les pages webs pèsent presque toujours plus de 100Ko et très
109 souvent plus d'un Mo. Notre page pèse donc `0,0023 Mo`.
110
111 EcoIndex a la bonne idée d'indiquer sur chacun des scores la médiane et une
112 "cible" indicative.
113
114 Pour le poids la médiane se trouve à 2,41 Mo, la cible à 1 Mo. La médiane n'est
115 pas bien surprenante mais la cible est elle assez élevée. Les pages qui, selon
116 moi, ont de bonnes raison de peser 1 Mo sont très rares.
117
118 Pour la complexité la médiane du nombre d'éléments est autour de 693 et la
119 cible 600. Je trouve ces deux chiffres élevés. J'imagine qu'ils sont tous deux
120 le fruit de l'utilisation massive de CMS générant, même quand cela n'est pas
121 bien utile, des structures de page complexe. Cela combiné à des présentations
122 visuelles complexes pousse le nombre d'élements à la hausse.
123
124 Pour les requêtes la médiane est à 78. C'est massif. Il est difficile d'imaginer
125 78 requêtes sans avoir énormément recours à des librairies js, des feuilles de
126 style éclatées, plusieurs typos, de nombreuses images par page *et* de la
127 pub. La cible de 40 paraît plus raisonnable même si elle permet toujours de faire
128 beaucoup de choses.
129
130 EcoIndex nous informe que pour 1000 visites par mois[^7] l'empreinte de cette
131 page est de 17,4L d'eau bleue[^8] et 1,16kgCO2e.
132
133 ### Autres statistiques
134
135 Taille moyenne d'une page : ~20Ko
136
137 > Calculée avec :
138 >
139 > `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"`
140
141 Nombre moyen du DOM : ~153
142
143 > Approximé avec :
144 >
145 > `dc -e "2k $(find root -name '*.html' | xargs -n1 grep -Eo '</[^<>]*>|<[^<>]*/>' | wc -l) $(find root -name '*.html' | wc -l) / p"`
146
147 Nombre moyen de requêtes : 3
148
149 > A priori aucune page n'a aujourd'hui d'image donc on a le css, le favicon, l'html.
150
151 Pourcentage du "contenu" (le texte) sur la quantité totale de données à
152 télécharger : 82%
153
154 > Calculé avec ce script
155
156 #!/bin/sh
157
158 css=$(du -b rc/style.css | cut -f1)
159 favicon=$(du -b rc/katzele.png | cut -f1)
160
161 md=$(mktemp)
162
163 find root -name '*.html' | xargs -n1 pandoc -t markdown > $md
164 content=$(du -b $md | cut -f1)
165
166 total=$(find root -name '*.html' | xargs du -cb | tail -n1 | cut -f1)
167
168 dc -e "2k $total $css + $favicon + $content r / 100 * p"
169
170 ## Commentaires
171
172
173
174 [^1]: https://www.thinkwithgoogle.com/intl/fr-fr/strategies-marketing/mobile-et-apps/vitesse-de-chargement-des-pages-mobiles-ou-se-situe-votre-site/
175 [^2]: https://neilpatel.com/blog/loading-time/
176 [^3]: https://pagespeed.web.dev
177 [^4]: https://timothee.goguely.com/
178 [^3]: Search Engine Optimization. https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche
179 [^5]: au vu de l'état de cette page le 10 avril 2023
180 [^6]: Merci Derek
181 [^7]: laissez moi rire
182 [^8]: https://fr.wikipedia.org/wiki/Empreinte_eau