La Regla de los 14 KB: El secreto de la velocidad web
Hoy he hablado con un amigo de un tema la mar de interesante, y no es nada más ni nada menos que la regla de los 14 KB. Y ahora estarás pensando: ¿Pero qué coj… es eso?
La regla de los 14 KB es una de las cosas que más pueden ayudar a una web a ser percibida como “rápida”. Y te explico en un momento en qué consiste.
El tema está en que el servidor no sabe si tenemos 256 kbps o 10 GB simétricos de conexión, así que no se va a arriesgar a enviarnos todo el contenido de golpe, porque eso podría saturar la conexión.
Para evitar colapsar el envío, TCP (que es un estándar de comunicación en internet) utiliza un mecanismo llamado TCP Slow Start. El servidor envía unos pocos paquetes de información, espera a que el navegador confirme que los ha recibido correctamente y luego envía el doble; así sigue hasta que se detecta el límite de la conexión.
¿De dónde salen esos 14 KB?
Pues yo te lo explico. En internet la información se envía por paquetes (hasta ahí llegamos).
- El tamaño estándar de un paquete que viaja por la red es de 1500 bytes.
- Las cabeceras de ese paquete (como las etiquetas de correos) ocupan 20 bytes.
- El protocolo TCP ocupa otros 20 bytes.
Esto nos deja con 1460 bytes de datos útiles por paquete. Ahora estarás pensando: “Ya está, este menda se ha equivocado de magnitudes”. ¡Pero no! Antiguamente, los servidores empezaban enviando 1, 2 o 3 paquetes en ese primer viaje, pero un estudio de Google de 2011 “escribió en piedra” que debían ser 10 paquetes los que se enviasen de inicio.
La cuenta es clara: 10 paquetes X 1460 bytes = 14 600 bytes, que son aproximadamente 14,6 KB. De ahí salen.
¿Y esto porque es importante?
Si nuestro HTML y CSS entran dentro de esos primeros 14 KB, el navegador pintará la web instantáneamente. Si nos pasamos (por ejemplo, enviamos 15 KB), el servidor enviará los primeros 14,6 KB, se parará, esperará la confirmación y entonces enviará los 0,4 KB restantes.
Ese pequeño “segundo viaje” hace que, si estamos en un móvil, la web pueda llegar a tardar casi medio segundo extra en mostrarse.
El objetivo no es que toda la web pese 14 KB (eso es casi imposible hoy en día con imágenes y fuentes). El objetivo es que la estructura inicial HTML y el CSS estrictamente necesario para pintar la parte visible (Above the Fold) pesen menos de 14,6 KB una vez comprimidos por el servidor.
Asi que, de aqui poco, viene un tutorial de como conseguir esto en Hugo, que es el CMS con el que esta hecho este blog.