Poids de la page : comment on calcule le chiffre affiché en bas de nos pages
Transféré, décompressé, mis en cache : trois chiffres différents pour un même site. Voici ce que mesure vraiment le compteur de poids affiché sur nos pages, et comment le vérifier vous-même.
En bas à droite de cette page, une petite pastille affiche son poids. C’est une forme d’affichage des calories : nous vendons des sites sobres, il nous semble normal de laisser n’importe qui vérifier ce que pèse le nôtre, page par page, sans installer quoi que ce soit.
Reste une question que l’on nous pose régulièrement, et que nous nous sommes reposée en corrigeant ce compteur : le poids d’une page, c’est le poids de quoi, exactement ? Parce qu’il existe au moins trois réponses valables, et qu’elles ne donnent pas du tout le même chiffre.
Trois chiffres pour une même page
Prenons la page d’accueil d’Ouzom, mesurée en septembre 2026 sur notre préproduction (d’où l’adresse staging.ouzom.fr dans les captures), depuis un écran d’ordinateur portable. La taille de l’écran compte : nos images s’adaptent à la largeur disponible, et un grand écran reçoit une bannière plus lourde.
| Ce que l’on mesure | Sur notre accueil |
|---|---|
| Poids transféré — les octets qui passent réellement sur le réseau | 160 Ko |
| Poids des ressources — les mêmes fichiers, une fois décompressés | 243 Ko |
| Poids à la deuxième visite — ce qu’il reste à télécharger quand le cache est plein | 17 Ko |
Trois chiffres honnêtes, trois questions différentes.
Le poids transféré (« transferred » dans Chrome) répond à : combien d’octets votre connexion a-t-elle dû avaler ? C’est celui qui compte pour le temps de chargement, pour le forfait mobile de votre visiteur et pour l’énergie dépensée par le réseau. Il inclut les en-têtes HTTP et il tient compte de la compression appliquée par le serveur.
Le poids des ressources (« resources ») répond à : que doit ensuite traiter le navigateur ? Notre page d’accueil envoie 17 Ko de HTML compressé, mais le navigateur travaille sur 70 Ko une fois le fichier déplié. C’est ce chiffre-là qui pèse sur la mémoire et le processeur du téléphone, et il est systématiquement le plus élevé des trois.
L’écart entre les deux, c’est exactement le travail de la compression. Sur nos fichiers de style, 37 Ko deviennent 9 Ko sur le réseau. Sur les images et les polices, en revanche, les deux chiffres sont identiques : un WebP ou un WOFF2 est déjà compressé, il n’y a plus rien à gagner à ce niveau-là. La seule façon de les alléger, c’est d’en envoyer moins, ou de plus petits.
Cache désactivé : la ligne de résumé distingue les 160 Ko passés sur le réseau des 243 Ko de fichiers décompressés.
Le piège du cache
Voilà pour la théorie. En pratique, notre compteur a affiché un jour 78 Ko sur une page dont nous savions pertinemment qu’elle pesait davantage.
L’explication tient au navigateur, qui fait très bien son travail : il garde les fichiers déjà téléchargés. À votre deuxième visite, les images, les polices et les feuilles de style ne repassent pas par le réseau. Leur poids transféré est alors, littéralement, de zéro octet.
C’est ce que Chrome affiche sans détour dans la colonne « Size » : (disk cache) ou (memory cache) au lieu d’une taille.
Même page, deuxième visite : tout sort du cache, sauf le document HTML et la mesure d’audience. Le poids transféré tombe de 160 à 17 Ko.
Notre compteur additionnait ces poids transférés tels quels. Il ne mentait pas : il répondait à la question « qu’est-ce qui vient de passer sur le réseau, là, maintenant ? ». Mais ce n’est pas la question que se pose quelqu’un qui lit « poids de la page ». Personne ne cherche à connaître le poids d’une page pour soi, après trois visites. Ce qui intéresse, c’est ce qu’elle coûte à un visiteur qui arrive dessus pour la première fois.
Nous avons donc changé la règle : quand une ressource sort du cache, on compte ce qu’elle aurait pesé sur le réseau. Le chiffre affiché est désormais celui d’un premier chargement, et il ne bouge plus d’une visite à l’autre.
Sous le capot : le code du compteur
Le navigateur expose lui-même ces mesures, via l’API PerformanceResourceTiming. Pour chaque fichier chargé, trois propriétés nous intéressent :
transferSize: les octets passés sur le réseau, en-têtes comprises. Vaut 0 pour une ressource servie depuis le cache.encodedBodySize: la taille du corps de la réponse tel qu’il a été envoyé, compressé donc. Elle reste connue même quand la ressource sort du cache.decodedBodySize: la même chose une fois décompressée. C’est le « resources » de Chrome.
Le document HTML, lui, n’apparaît pas dans la liste des ressources : il faut aller le chercher dans l’entrée de navigation, qui expose les mêmes propriétés. C’était notre deuxième erreur — nous mesurions jusqu’ici le HTML en sérialisant le DOM, ce qui donne sa taille décompressée, et après modification par les scripts. Soit 70 Ko additionnés à des ressources comptées, elles, en compressé.
Le calcul tient aujourd’hui en une quinzaine de lignes :
// Poids réseau d'une entrée : transferSize au premier chargement,
// encodedBodySize quand la ressource est sortie du cache.
function bytesOf(entry) {
return Math.max(entry.transferSize, entry.encodedBodySize);
}
function computeWeight() {
const [navigation] = performance.getEntriesByType('navigation');
let total = bytesOf(navigation); // le document HTML
for (const entry of performance.getEntriesByType('resource')) {
total += bytesOf(entry); // tout le reste
}
return total;
}Le calcul est relancé au chargement complet de la page, puis au défilement, parce que les images en loading="lazy" n’arrivent qu’au moment où l’on descend : le compteur monte donc légèrement quand vous parcourez une page longue. C’est voulu, et c’est fidèle à ce que le réseau a réellement transporté.
Un dernier cas résiste : celui d’un fichier que le navigateur revalide auprès du serveur, qui lui répond « rien n’a changé » par un code 304. Là, ni transferSize ni encodedBodySize ne disent quoi que ce soit de la taille du fichier, et il n’existe aucun moyen de la retrouver. Nos fichiers sont servis avec une durée de cache longue, ce qui écarte le problème en production, mais c’est une bonne raison de ne jamais prendre ce genre de compteur pour un instrument de mesure absolu.
Enfin, nous comptons en kilo-octets de 1 000 octets, comme Chrome : la pastille et l’onglet Réseau affichent ainsi le même chiffre.
Ce que le chiffre ne dit pas
Un indicateur affiché sur un site d’écoconception se doit d’annoncer ses angles morts. Il y en a trois.
Les ressources tierces peuvent être invisibles. Un fichier chargé depuis un autre domaine ne révèle ses tailles que si son serveur envoie l’en-tête Timing-Allow-Origin. À défaut, le navigateur renvoie 0 partout, par souci de confidentialité. Deux scripts externes échappent ainsi à notre compteur. Ils pèsent quelques kilo-octets, mais ils y échappent, et c’est une raison de plus d’en héberger le moins possible.
Le poids n’est pas l’impact. Une page légère servie par un hébergeur au mix électrique déplorable, avec un serveur qui recalcule tout à chaque requête, n’est pas exemplaire pour autant. Le poids transféré est un indicateur d’entrée : facile à mesurer, facile à vérifier, corrélé à beaucoup de choses. Ce n’est pas un bilan carbone.
Ce n’est pas non plus une mesure de performance. 160 Ko répartis en 14 requêtes bien ordonnées se chargent plus vite que 160 Ko en 60 requêtes qui se bloquent les unes les autres. Le poids dit combien, pas comment.
Le vérifier vous-même, en une minute
Aucun outil à installer, tout est dans Chrome :
- Ouvrez les outils de développement (
F12), onglet Network, « Réseau » en français. - Cochez Disable cache. C’est l’étape que tout le monde oublie, et c’est elle qui change tout.
- Rechargez la page.
- Lisez la ligne de résumé, en bas :
14 requests | 160 kB transferred | 243 kB resources.
Pour voir les deux poids de chaque fichier, ouvrez l’engrenage à droite de la barre du panneau Network et cochez Big request rows. Les lignes doublent de hauteur et la colonne « Size » affiche le poids transféré en haut, le poids décompressé en dessous.
Avec « Big request rows », chaque ligne affiche ses deux poids : 16,6 kB transférés pour 69,6 kB de HTML. Sur les polices, les deux chiffres se confondent.
Décochez ensuite « Disable cache » et rechargez : vous verrez le total s’effondrer, et vous saurez exactement pourquoi.
Vous pouvez aussi coller ceci dans la console, sur n’importe quel site, pour obtenir le même total que notre pastille :
[
performance.getEntriesByType('navigation')[0],
...performance.getEntriesByType('resource'),
].reduce((total, e) => total + Math.max(e.transferSize, e.encodedBodySize), 0) / 1000;Et si le chiffre obtenu sur votre propre site vous surprend, c’est en général le bon moment pour en parler avec nous.
L’illustration en tête d’article est générée par intelligence artificielle. Les captures d’écran, elles, sont bien réelles.
← Tous les articles