Chasse au kilo-octet
Avant d’afficher la moindre image, une page web télécharge du code et des polices de caractères. Ce poids ne se voit pas, et c’est lui qui décide d’une bonne part de l’attente sur un téléphone. Quatre fonctions à livrer, 150 kilo-octets de budget, des poids mesurés sur les fichiers réels. Faites vos quatre choix, puis lancez la course de chargement.
Combien pèse une page web avant la première image ?
De moins d’un kilo-octet à plus de 400 Ko pour les quatre mêmes fonctions, selon les briques retenues. En 3G, cet écart se traduit par plus de six secondes d’attente.
Source des chiffres, mesures relevées sur les fichiers de production de sudimedia.fr et sur les distributions officielles de Bootstrap 5.3.3 et de Chart.js 3.9.1. Mise à jour juillet 2026.
Composez votre page
Budget de 150 Ko, code et polices seulement. L’attente est calculée au débit choisi plus bas.
Pressé ? Comparez les deux extrêmes en un clic.
Le jeu demande JavaScript. Sans lui, le tableau complet des poids mesurés reste lisible dans la section méthode, plus bas.
La course de chargement
La course de chargement demande JavaScript. Les poids mesurés restent lisibles dans la méthode, plus bas.
Méthode et sources des mesures
Le budget de 150 Ko couvre le code et les polices, avant la première image. Les valeurs sont relevées en juillet 2026, et le détail des relevés est publié dans Le Mag. Le code est compté compressé, tel qu’il part du serveur, et les polices sont comptées telles quelles, puisque leur format contient déjà sa compression. Les totaux sont calculés en octets et arrondis à l’affichage, si bien qu’additionner les valeurs des cartes peut donner un dixième de kilo-octet de plus que la jauge.
- Font Awesome 6.4.0, jeu solid, 125,9 Ko. Deux feuilles de style compressées et le fichier de police fa-solid-900.woff2.
- Bootstrap Icons 1.11.3, 140,7 Ko. Une feuille de style compressée et un fichier de police plus lourd de 17 Ko que celui de Font Awesome.
- Six icônes dessinées pour ce jeu, 501 octets, dessins et références compris.
- Montserrat, 18,3 Ko par fichier en moyenne. Quatre épaisseurs sur le site, huit fichiers si l’on ajoute les italiques.
- Chart.js 3.9.1, 66,0 Ko compressés, distribution officielle.
- Graphique dessiné pour ce jeu, 335 octets.
- Bootstrap 5.3.3, 46,5 Ko. Feuille de style et script compressés, sans Popper, dont le carrousel n’a pas besoin.
- Défilement natif en CSS, zéro octet supplémentaire dans une feuille de style qui existe déjà.
Le chronomètre de la course est du temps de transfert au débit choisi, à 50 000 octets par seconde en 3G et 200 000 en 4G bridée. Il ne dit rien du temps d’affichage, auquel s’ajoutent la latence du réseau et le nombre de fichiers demandés.
Une précision qui a sa place ici. Cette page utilise Font Awesome pour ses propres icônes d’interface, parce que le site entier le charge encore, jeu complet compris. C’est un chantier ouvert et le poids en question est bien celui affiché plus haut. Autant le dire que laisser l’inspecteur du navigateur le dire à notre place.
Ce que le jeu montre, et ce qu’il ne montre pas
Le premier réflexe coûte cher. Font Awesome pour six icônes, Chart.js pour quatre barres et Bootstrap pour un carrousel, cela fait 238,3 Ko avant la moindre police, soit un budget et demi. Chacun des trois choix se défend séparément. C’est leur addition que personne ne décide vraiment.
Le second enseignement est moins attendu. Ce qui est difficile n’est pas le sur mesure, c’est le sur mesure sans discipline. Six icônes dessinées pèsent 501 octets et prennent une heure. La septième prend encore vingt minutes, et le vrai coût est là, dans le temps de fabrication puis d’entretien, pas dans les octets. C’est l’arbitrage que nous instruisons page par page dans notre façon de travailler, et il ne penche pas toujours du côté du sur mesure.
Ce que le jeu ne montre pas, enfin. Le poids n’est qu’une des composantes de la vitesse ressentie. La latence du réseau, le nombre de fichiers demandés, leur ordre d’arrivée et les décalages visuels comptent autant, et un site léger mal ordonné reste lent. C’est pour cette raison que le chronomètre de la course parle de transfert et jamais d’affichage. L’article qui accompagne ce jeu détaille les mesures brique par brique, et la méthode pour les refaire sur votre propre site.
Questions fréquentes
Pourquoi les polices ne sont-elles pas comptées comme le reste ?
Parce que le serveur compresse les fichiers de code avant de les envoyer, alors qu’une police est déjà compressée dans son format. La compresser une seconde fois l’alourdit. Sur fa-solid-900.woff2, l’opération ajoute 57 octets au lieu d’en retirer, ce qui est mesurable et vérifiable.
Le chronomètre de la course correspond-il au temps d’affichage ?
Non, et c’est important. Il mesure le temps de transfert des fichiers au débit affiché, rien de plus. Sur une vraie page, la latence du réseau, le nombre de fichiers demandés et leur ordre d’arrivée s’ajoutent à ce transfert. La course compare deux poids à conditions égales, elle ne prédit pas une vitesse.
D’où viennent les poids affichés dans le jeu ?
Des fichiers eux-mêmes, mesurés en juillet 2026. Les bibliothèques installées sur sudimedia.fr ont été relevées en production, les autres sur leur distribution officielle. Aucune valeur ne provient d’un article ni d’une page de documentation.
Faut-il renoncer à Bootstrap et à Font Awesome ?
Non. Ces bibliothèques font gagner des journées de développement, et ce temps a une valeur. La question est de savoir ce qu’elles coûtent quand on utilise six icônes sur deux mille, puis de choisir en connaissance de cause plutôt que par habitude.
Et votre page, elle pèse combien ?
Le jeu travaille sur quatre briques choisies pour la démonstration. Votre page d’accueil, elle, en empile probablement une quinzaine, et le total se mesure en quelques secondes. L’analyseur donne le poids réel, les trois indicateurs de Core Web Vitals et le détail ressource par ressource.
Vous savez déjà ce que vous cherchez ? Parlons de votre projet.