De los bytes de Content-Length a un presupuesto de peso de página
Toda herramienta que mide una página web te responde en bytes. La cabecera de respuesta Content-Length son bytes. curl -sI imprime bytes. El informe de compilación que tumba tu tarea de integración continua imprime bytes. Y sin embargo el presupuesto que negocias con el equipo se escribe en kilobytes: 14 KB para el HTML crítico, 60 KB para el CSS, 170 KB para el paquete del framework. Esta página cierra ese hueco: pegas el recuento de bytes en bruto y lees la cifra en KB que puedes llevar al documento del presupuesto.
La aritmética no tiene misterio; la disciplina sí. Un presupuesto de rendimiento solo funciona si todo el mundo mide lo mismo, y el recuento de bytes es el único número que nadie puede discutir. Convertirlo siempre igual es lo que mantiene honesto un presupuesto entre la cadena de compilación, el panel de la CDN y el panel de red del navegador.
KB = bytes ÷ 1000. Una hoja de estilos cuyo Content-Length marca 52340 son 52340 ÷ 1000 = 52,34 KB a cuenta de tu presupuesto de CSS.Los bytes son lo que cruzó el cable
El presupuesto habla en kilobytes
La compresión cambia el número, no la unidad
Comprobar un recurso frente a tu presupuesto
Consigue el recuento de bytes
Toma el valor de la cabecera Content-Length, de la columna de tamaño del informe de tu empaquetador o de un curl -sI contra la URL desplegada. Solo dígitos: los separadores de millares y los espacios sueltos se ignoran, y la coma se lee como marca decimal.
Escríbelo en el campo de bytes
La cifra en kilobytes se actualiza mientras escribes, así que puedes recorrer una lista de recursos sin pulsar nada entre uno y otro. Los valores muy grandes o muy pequeños pasan solos a notación científica.
Copia la cifra pelada a la hoja del presupuesto
El botón de copiar de cada campo deja en el portapapeles el número sin ninguna etiqueta de unidad, que es justo lo que quiere una celda de hoja de cálculo o un archivo de configuración del presupuesto.
Cambia el sentido para fijar un umbral de CI
El camino inverso está en la misma página: escribe en el campo de kilobytes o pulsa el botón de intercambiar unidades para invertir las dos. Las herramientas de presupuesto suelen querer sus límites en bytes, así que un techo de 170 KB acaba siendo 170 000 en la configuración.
Los dos campos se pueden editar en todo momento y los menús de unidades de ambos lados tienen buscador, así que si un compañero te pasa una cifra en megabytes o una velocidad de transferencia basada en bits, puedes llegar a esa unidad desde las mismas dos casillas sin salir de la página.
Tamaños habituales de recursos web en bytes y kilobytes
Estos son tamaños transferidos representativos de una compilación de producción moderna y comprimida, del estilo de lo que verías en el panel de red de un sitio bien optimizado. Úsalos para comprobar si un recurso de tu propia compilación pesa demasiado para lo que es.
| Recurso (tal como se transfiere) | Content-Length (bytes) | Kilobytes |
|---|---|---|
| Documento HTML, brotli | 14 336 | 14,336 KB |
| Respuesta JSON de API, gzip | 3 600 | 3,6 KB |
| Paquete principal de estilos, brotli | 52 340 | 52,34 KB |
| Paquete de JavaScript del framework, brotli | 180 224 | 180,224 KB |
| Fuente variable recortada, WOFF2 | 45 000 | 45 KB |
| Imagen principal, AVIF | 86 016 | 86,016 KB |
Las fuentes y las imágenes ya vienen en formatos comprimidos, así que un codificador en el servidor no les saca casi nada: su recuento de bytes en el cable es prácticamente el que tienen en disco. Los recursos de texto son donde la elección del codificador mueve el número y donde una infracción del presupuesto suele tener arreglo.
Recorre una cascada entera de una sentada
Como el resultado se recalcula con cada pulsación, puedes bajar por la cascada de red fila a fila y sustituir el número del campo cada vez, en lugar de reiniciar la página.
Tolerante con los valores pegados de una cabecera
Los valores pegados tal cual desde una terminal o un panel suelen traer espacios o coma decimal a la europea. Ambos se manejan solos, así que no tienes que limpiar la cadena antes.
Ninguna ida y vuelta mientras auditas
Una vez cargada la página, la aritmética corre en tu navegador. Auditar cien recursos no cuesta ni una petición de red propia, algo muy útil cuando estás mirando justo el panel de red que quieres medir.
Preguntas sobre el presupuesto de peso de página
¿Por qué Content-Length no coincide con el tamaño del archivo en disco?
Porque la cabecera describe el cuerpo después de la codificación de contenido. Si el servidor aplica brotli o gzip, Content-Length es el tamaño de la carga comprimida, que en un recurso de texto es habitualmente un tercio o menos del archivo que sale de tu compilación. Cuando la respuesta se envía por partes con codificación de transferencia fragmentada, la cabecera ni siquiera aparece y tienes que leer el tamaño transferido en el navegador.
¿El presupuesto debe contar kilobytes comprimidos o sin comprimir?
Vigila los dos, por motivos distintos. El tamaño comprimido gobierna el tiempo de descarga, así que ese es el número que debe usar tu presupuesto de red. El tamaño sin comprimir gobierna el coste de análisis y ejecución, que pesa sobre todo en el JavaScript de los dispositivos modestos. Un paquete que comprime de maravilla puede seguir bloqueando el hilo principal un buen rato después de llegar.
¿Por qué las herramientas del navegador y mi registro del servidor no coinciden en la misma respuesta?
Están contando cosas distintas. Las herramientas del navegador suelen mostrar el tamaño transferido incluyendo las cabeceras de respuesta, mientras que el registro del origen anota los bytes del cuerpo que emitió. Una CDN delante del origen añade otra capa: puede recodificar con otro algoritmo o con otro nivel de calidad, de modo que los bytes que salen del borde no son los que salen de tu servidor. Decide en qué punto de medida está definido tu presupuesto y convierte siempre desde ese punto.
¿Las cabeceras de respuesta también se comen presupuesto?
Son pequeñas por respuesta, pero no salen gratis. Un juego típico de cabeceras de seguridad, caché y CORS ronda unos cientos de bytes, y las cookies que se envían en cada petición suman. En una página con cien subrecursos eso ya se nota, y en parte por eso existe la compresión de cabeceras en las versiones modernas de HTTP. Si vas a por los últimos kilobytes, podar cabeceras redundantes y cookies infladas es un ahorro real, aunque modesto.
¿Cómo se reparte un presupuesto de peso de página entre tipos de recurso?
Pon un techo por tipo en vez de una cifra global, porque un total único deja que un equipo se gaste en silencio la asignación de todos los demás. Una repartición habitual es un tope estricto para los scripts, uno menor para estilos y fuentes, y otro generoso pero de cumplimiento obligado para las imágenes, con el documento lo bastante ligero como para que la primera respuesta llegue en muy pocas idas y vueltas de red. Pasa cada techo a bytes cuando lo escribas en la herramienta de compilación y deja la versión en KB en el documento que la gente lee de verdad.
Aún no hay comentarios. ¡Sé el primero en comentar!