Aller au contenu

Web & performance

··5 mins·
DataScience Web

Lorsque j’ai décidé de créer mon site personnel pour partager mes projets et mes idées, je voulais quelque chose de simple, rapide et léger. Ce qui paraissait être du bon sens s’est révélé être un choix presque militant : aujourd’hui, la majorité des sites web sont tout sauf sobres.

Au fil des recherches, quelques chiffres ont permis de prendre conscience de l’ampleur du problème. Ce phénomène porte un nom : l’obésité du web. En voici un aperçu.

1. Des pages toujours plus lourdes pour du contenu toujours aussi léger
#

En 2016, Frédéric Filloux (Mondaynote) s’était penché sur un article du Guardian concernant l’exclusion des athlètes russes aux Jeux paralympiques de Rio. L’article contenait 757 mots (soit 4 667 caractères), alors que la page affichait 485 527 caractères de code HTML. Cela représentait à peine 0,96 % de texte utile (lisible par des humains).

Quatre ans plus tard, j’ai reproduit l’analyse avec le même article : 761 mots pour 775 780 caractères de HTML. Le texte ne représente désormais que 0,09 % du contenu. Une augmentation de 60 % du code pour une information inchangée.

Un test similaire mené sur un article du Monde affichait un ratio tout aussi déséquilibré : 1,6 Mo pour 888 mots. Ces chiffres ne sont pas des exceptions.

comparaison
Ă€ gauche : l’article ; Ă€ droite : le code correspondant

2. Une inflation généralisée des ressources web
#

Le phénomène s’étend bien au-delà de quelques exemples. Selon les données de httparchive, le poids moyen d’une page web a été multiplié par plus de 3 en dix ans, atteignant 2 Mo sur ordinateur et près de 1,9 Mo sur mobile (octobre 2020). Et pourtant, le volume d’information réellement lisible n’a pas fondamentalement changé.

L’essentiel de cette prise de poids s’explique par l’accumulation de ressources superflues : images non optimisées, éléments de design inutiles, contenus tiers et surtout … scripts.

Poids web 3
Évolution du poids moyen (en Ko) des sites web selon httparchive.org

3. Ce que contient vraiment une page web
#

Lors d’une conférence marquante en 2015 (The Website Obesity Crisis), Maciej Cegłowski décrivait la structure type d’un site web :

  • Une base HTML contenant le contenu visible ;
  • Une couche d’élĂ©ments secondaires : visuels, mises en forme, publicitĂ©s ;
  • Et surtout une masse de scripts, dont beaucoup sont utilisĂ©s pour la surveillance des comportements.

En analysant la répartition du poids d’un article du Guardian avec l’outil Pingdom, on constate que plus de la moitié du poids de la page est due à des scripts. Ce n’est plus de l’optimisation, mais de l’encombrement.

Pyramide
« Pyramide web telle qu’on l’observe dans la nature » — Maciej CegĹ‚owski

À titre d’illustration, l’article du Guardian mentionné plus tôt déclenche près de 150 requêtes HTTP, dont 78 rien que pour des images, et 63 pour des scripts.

Qu’en est-il de l’article du Guardian ?

L’outil Pingdom permet d’observer la performance et la constitution d’un site web. Voici les rĂ©sultats dĂ©taillĂ©s de la rĂ©partition du poids de l’article :

Extrait du Guardian
Statistiques de répartition du poids pour la page web du Guardian selon Pingdom

Plus de la moitié du poids de la page web est constitué par des scripts !

4. L’invasion silencieuse des trackers
#

Ces scripts sont loin d’être anodins. Une grande partie d’entre eux sont des trackers, intégrés pour suivre les comportements, récupérer des métadonnées, ou activer des services tiers comme les boutons de réseaux sociaux.

Ces outils sont capables de collecter des données sans aucune interaction visible. À partir de ces informations, des profils de consommateurs sont établis, permettant de diffuser de la publicité ciblée. Depuis 2020, les chaînes de télévision françaises peuvent d’ailleurs en faire usage (source : Le Monde).

Ce marché est en plein essor : selon Statista, la publicité numérique représentait 34 % des dépenses médias en France en 2017, soit deux fois plus qu’en 2010. Un investissement qui s’explique par une promesse simple : plus on connaît les internautes, plus la publicité est performante.

Publicité ciblée
Depuis l’Ă©tĂ© 2020, les chaĂ®nes de tĂ©lĂ©vision françaises peuvent diffuser des publicitĂ©s ciblĂ©es en fonction des donnĂ©es personnelles des tĂ©lĂ©spectateurs (selon LeMonde)

5. Le rĂ´le du type de site : statique ou dynamique ?
#

Autre facteur déterminant : la nature même des sites. Il en existe deux grands types :

  • Les sites statiques, constituĂ©s de fichiers HTML et CSS transmis tels quels au navigateur. Ce sont des pages simples, rapides et efficaces.
  • Les sites dynamiques, qui s’appuient sur une base de donnĂ©es et gĂ©nèrent le contenu Ă  la volĂ©e via un langage cĂ´tĂ© serveur (comme PHP).

Statique vs. dynamique
Différence entre une page web statique et dynamique (selon imedia)

Les sites dynamiques permettent davantage d’interactions (commentaires, comptes utilisateurs, formulaires), mais au prix d’une plus grande complexité. Chaque requête implique un traitement supplémentaire, ce qui alourdit la charge des serveurs et augmente la surface d’exposition aux attaques. Les besoins en énergie, en infrastructure et en maintenance s’en trouvent également accrus.

À titre d’illustration, l’article du Guardian mentionné plus tôt déclenche près de 150 requêtes HTTP, dont 78 rien que pour des images, et 63 pour des scripts.

6. Faire simple reste souvent le meilleur choix
#

Dans la majorité des cas, un site dynamique n’est pas indispensable. Pour un blog, un portfolio ou un site vitrine, les besoins sont simples. Dans ces cas-là, les générateurs de sites statiques comme Hugo ou Jekyll s’avèrent particulièrement pertinents.

C’est d’ailleurs le choix que j’ai fait pour ce site. Cela me permet de garder la main sur le contenu, de limiter l’impact technique, et d’offrir une expérience rapide et fluide.

Pour aller plus loin
#

Quelques ressources qui m’ont inspiré et que je recommande vivement :

Thibault Clément - Intechnia
Auteur
Thibault Clément - Intechnia
Data scientist