Détail du poids d’une page

Chaque fichier a deux tailles

Il y a la taille d’un fichier sur le réseau et sa taille une fois décompressé. Admettons que votre serveur compresse un script de 400 Ko à 110 Ko. Le visiteur paie 110 Ko en téléchargement et en données mobiles et son téléphone doit quand même lire les 400 Ko. Cet outil note le premier chiffre, les octets transférés et affiche le second à côté.

Les octets se transforment vite en temps d’attente. Sur le profil 4G lent que Lighthouse utilise pour ses tests, 1,6 mégabit par seconde, une page de 2 Mo met environ dix secondes à se télécharger et ce avant l’exécution du moindre script.

Ce qui est téléchargé

Une fois le HTML obtenu, l’outil demande ce qu’un navigateur demanderait au premier chargement :

• les feuilles de style et les fichiers annoncés avec rel="preload" ou modulepreload ;
• les scripts avec un src, sauf les solutions de repli nomodule et les types de script qu’un navigateur n’exécute pas ;
• les images : pour srcset et <picture>, il prend le plus grand candidat qu’un navigateur de bureau choisirait et il lit data-src sur les images à chargement différé ;
• les affiches de vidéo, le favicon et les images dans les attributs style en ligne ;
• les polices déclarées dans les règles @font-face (le fichier WOFF2 quand il y en a un, douze polices au plus) et les feuilles de style appelées avec @import.

Quelques limites gardent la vérification courte : 80 fichiers, 6 Mo par fichier, 15 Mo au total. Si une page dépasse 80 fichiers, le nombre de requêtes s’affiche avec « ≥ ».

L’échelle des notes

Pour vous donner une idée, la page mobile médiane mesurée par HTTP Archive pèse environ 2,3 Mo, ce qui vaut un D ici. Une page peut donc être parfaitement moyenne pour le web et rester lente sur un téléphone.

Que faire des constats

Images de plus de 200 Ko

Presque toujours une image servie plus grande qu’elle n’est affichée. Exportez-la à la largeur affichée, ou au double pour les écrans haute densité et laissez srcset proposer des versions plus petites aux téléphones.

Images JPEG ou PNG

Quand le serveur le permet, l’outil réencode les huit images les plus lourdes en WebP (qualité 80) et en AVIF (qualité 55) et montre la taille de chaque résultat. Ainsi, le gain est mesuré sur vos propres images. Servez le nouveau format avec une solution de repli :

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>

Images sans width ni height

Ce point ne concerne pas le poids. C’est la raison pour laquelle le texte saute pendant le chargement de la page. Ajoutez les deux attributs.

Fichiers texte envoyés sans compression

HTML, CSS, JavaScript ou SVG de plus de 1,5 Ko arrivés sans gzip ni Brotli. L’audit de compression et de cache donne les réglages du serveur.

Plus de 1 Mo de JavaScript, ou 300 Ko de polices

Retirez les bibliothèques et les extensions que personne n’utilise, chargez le reste seulement sur les pages qui en ont besoin et gardez deux ou trois graisses de police en WOFF2.

Le chiffre carbone et ce qui n’est pas compté

L’estimation suit la version 4 du modèle Sustainable Web Design. Elle compte 0,300 kWh par gigaoctet transféré, ce qui couvre les centres de données, les réseaux et les appareils des visiteurs avec leur fabrication et multiplie par une moyenne mondiale de 494 g de CO₂e par kWh. Cela donne environ 0,15 g par mégaoctet. La comparaison avec une voiture à essence utilise 170 g par kilomètre. Prenez-la comme un ordre de grandeur, utile pour comparer deux versions d’une page.