Mesurer le poids d’une page et de ses ressources

Comment utiliser l’outil

Collez l’adresse d’une page et cliquez sur « Analyser ». Le serveur lit la page en suivant jusqu’à cinq redirections, puis relève dans son HTML les fichiers qu’elle déclare : images (src, srcset et sources d’un élément picture), scripts, feuilles de style, préchargements, polices préchargées, icônes et affiches de vidéo. Il interroge ensuite jusqu’à 40 fichiers en parallèle, par une requête HEAD qui ne demande que les en-têtes. Il repasse en GET, sans lire le corps, quand un serveur refuse HEAD ou quand sa réponse HEAD ne donne pas la compression d’un fichier texte ou la taille d’un fichier. Cette étape dure 7 secondes au plus.

Le résultat donne le poids total annoncé, sa répartition par type et les dix fichiers les plus lourds, puis quatre listes : le texte envoyé sans compression, les images lourdes au format ancien, les fichiers statiques sans Cache-Control et les fichiers en erreur. Sous ces listes, le détail de chaque fichier contrôlé : code HTTP, type, taille, encodage et Cache-Control. Quand une page déclare plus de 40 fichiers, l’outil contrôle d’abord les feuilles de style, les scripts et les polices, puis les images qui ne sont pas en chargement différé. L’adresse analysée n’est pas conservée.

Le poids total et les repères de Lighthouse

Lighthouse, l’outil d’audit de Google intégré à Chrome, additionne la taille de toutes les requêtes d’une page en kibioctets (1 Kio vaut 1 024 octets) et range les plus lourdes en premier. Il signale les pages au-delà de 5 000 Kio et conseille de rester sous 1 600 Kio, une cible calculée sur ce qu’une connexion 3G peut télécharger en gardant un délai d’interactivité de 10 secondes au plus. La même page situe le poids médian entre 1 700 et 1 900 Kio, d’après les données du HTTP Archive.¹ Cette documentation a été mise à jour pour la dernière fois en mai 2019 : la médiane date de cette époque.

L’outil compare son total à ces deux repères, mais il ne voit qu’une partie des fichiers, comme l’explique la dernière section. Les images en chargement différé sont comptées alors que le navigateur peut ne les charger qu’au défilement, et l’outil dit combien il y en a. Le total est donc un ordre de grandeur, à confirmer avec le test de vitesse PageSpeed, qui charge la page dans un vrai navigateur.

Le texte envoyé sans compression

Le HTML, le CSS, le JavaScript, le SVG ou le JSON se compressent bien. MDN demande aux serveurs de compresser autant que possible, et déconseille de recompresser les formats déjà compressés comme le JPEG ou le ZIP, dont le fichier peut grossir. Le serveur indique la méthode employée dans l’en-tête Content-Encoding : gzip, deflate, br (Brotli) ou zstd (Zstandard), entre autres.⁶ Lighthouse range parmi les réponses non compressées celles qui n’ont pas de Content-Encoding br, gzip ou deflate. Il conseille Brotli, garde gzip en solution de repli, et ne signale ni une réponse de moins de 1,4 Kio ni un gain inférieur à 10 % de la taille d’origine.²

L’outil reprend le seuil de 1,4 Kio. Il ne peut pas calculer le gain, faute de lire le fichier : il signale tout fichier texte de plus de 1,4 Kio arrivé sans compression, ainsi que ceux dont la taille n’est pas annoncée. Il compte zstd comme une compression, puisque MDN le décrit comme tel, alors que la page de Lighthouse, plus ancienne, ne le cite pas.^{2, 6} Sa requête annonce br, gzip, deflate et zstd dans l’en-tête Accept-Encoding.

Les images au format ancien

Lighthouse relève les images BMP, JPEG et PNG d’une page, les convertit en WebP, estime leur taille en AVIF et affiche le gain possible. Il passe sous silence une image dont le gain serait inférieur à 8 Kio, et conseille de garder une version JPEG ou PNG de repli pour les navigateurs anciens.³ Pour les GIF, il recommande une vidéo MP4 ou WebM quand l’image est animée, et du PNG ou du WebP quand elle est fixe.⁴

L’outil ne convertit pas les images. Il signale les JPEG, PNG, BMP et GIF de plus de 8 Kio, puisqu’un fichier plus petit ne peut pas faire gagner 8 Kio, sauf quand l’image se trouve dans un élément picture qui propose déjà une version AVIF ou WebP. Il contrôle aussi les candidats d’un srcset et les sources d’un picture sans les ajouter au total : le navigateur n’en télécharge qu’un par image, selon l’écran. Pour examiner un fichier précis, l’outil de dimensions et métadonnées d’une image lit son type réel, sa taille en pixels et les données qu’il transporte.

Les fichiers sans Cache-Control

Lighthouse considère comme pouvant être mis en cache un fichier qui est une police, une image, un média, un script ou une feuille de style, qui répond 200, 203 ou 206 et qui n’a pas de politique no-cache explicite. Il donne l’exemple de Cache-Control: max-age=31536000, soit un an, pour les fichiers statiques qui ne changent pas, avec une empreinte dans le nom du fichier pour que chaque version ait sa propre adresse, et conseille no-cache pour un fichier qui change et dont la fraîcheur compte.⁵

Sans Cache-Control, rappelle MDN, les caches peuvent garder la réponse pour une durée qu’ils choisissent eux-mêmes : c’est la mise en cache heuristique, et MDN conseille d’écrire ses exigences dans cet en-tête.⁷ L’outil signale donc les fichiers statiques sans Cache-Control et précise quand un en-tête Expires est présent à la place. Il ne juge pas la durée choisie, Lighthouse rappelant qu’une durée plus longue n’est pas toujours meilleure.⁵ Pour lire tous les en-têtes d’un fichier, ETag et Last-Modified compris, passez par l’analyseur d’en-têtes HTTP.

Ce que l’outil voit, et ce qu’il ne voit pas

L’outil lit le HTML tel que le serveur l’envoie, sans exécuter le JavaScript. Il ne voit donc pas ce que les scripts chargent après coup : publicités, mesure d’audience, vidéos intégrées, images ajoutées par un carrousel ou par une application JavaScript. Il ne voit pas non plus les images de fond déclarées dans les feuilles de style, ni les polices qu’elles appellent sans préchargement dans le HTML. Un fichier dont l’hôte pointe vers une adresse privée ou locale, ou qui demande un autre port que 80 et 443, est refusé avant toute connexion et classé en erreur.

La taille affichée est celle que le serveur annonce dans l’en-tête Content-Length. Quand le fichier est compressé, elle décrit la forme envoyée, donc compressée : le fichier décompressé est plus gros.⁶ Un serveur qui n’envoie pas Content-Length laisse la taille inconnue, et le fichier sort du total. Enfin, la requête part du serveur de nemociment.fr : selon sa configuration, un serveur peut répondre à votre navigateur avec un autre format ou une autre compression.

Questions fréquentes