Outils de développement Chrome – “Taille” vs “Contenu”

Lors de l’affichage d’informations sur les feuilles de style dans l’onglet Réseau des outils de développement de Chrome, une colonne spécifie à la fois la “taille” et le “contenu”:

Capture d'écran des outils de développement avec la colonne Taille / Contenu mise en évidence

Quelqu’un peut-il éclairer la différence entre ces deux chiffres? Sur certaines pages, les chiffres sont proches et les autres sont très différents.

“Size” est le nombre d’octets sur le fil et “content” est la taille réelle de la ressource. Un certain nombre de choses peuvent les rendre différentes, notamment:

  • Être servi depuis le cache (petit ou 0 “taille”)
  • En-têtes de réponse, y compris les cookies (plus grande “taille” que “contenu”)
  • Redirections ou demandes d’authentification
  • compression gzip (plus petite “taille” que “contenu”, généralement)

De la documentation :

La taille est la taille combinée des en-têtes de réponse (généralement quelques centaines d’octets) plus le corps de la réponse, tel qu’il est fourni par le serveur. Le contenu correspond à la taille du contenu décodé de la ressource. Si la ressource a été chargée à partir du cache du navigateur plutôt que sur le réseau, ce champ contiendra le texte (du cache).

Size est la taille de la réponse elle-même et le Content correspond à la taille de la ressource à laquelle vous accédez.

Comparer:

cache vide:

main.js GET 200 OK .. Size: 31.72KB Content: 31.42KB

en cache:

main.js GET 304 Not modified .. Size: 146B Content: 31.42KB

En termes simples, l’article de Google l’explique en tant que taille = taille de transfert et contenu = taille réelle entrer la description de l'image ici

Ceci est ma formule basée sur la lecture de divers articles sur ce sujet (et je suis ouvert à l’améliorer avec vos commentaires) Size = Compression (Content) + Response Header

Voir l’image utilisée dans cet article

Explication par Google