Arturo Navarro Growth Hacker

Ya en la pregunta anterior estamos adelantando este concepto que, entiendo, suena bastante técnico y engorroso: ¿Cómo se hace el envío de archivos a la caché del usuario y qué diablos son las cabeceras HTTP? El cache es el proceso a través del cual se envían instrucciones por medio de las cabeceras HTTP (HTTP headers) para definir la fecha de expiración de descarga de cada elemento web.

¿Qué son las cabeceras HTTP?

Las cabeceras HTTP son fragmentos de información que se envían y reciben en cada proceso de solicitud a un servidor. Estos contienen metadatos con información importante sobre el tipo de agente de usuario, autenticación de seguridad y la memoria de cache.

Ejemplo de una cabecera http

Vamos a explicarlo un poco más. Un navegador, antes de abrir una página web, debe solicitar ese archivo HTML a un servidor.

En ese proceso de solicitud el navegador envía información de autenticación, qué tipo de navegador es, dirección IP, etc. Cuando el servidor responde, lo hace igual cabeceras http indicando por ejemplo las memorias de cahcé, qué elemenos debe guardar en caché y cuales no un navegador. ¡Sucede toda una conversación entre el señor servidor y el señor navegador antes de que se despliegue cualquier archivo web en nuestra pantalla.

Todo lo anterior se hace por por medio de “HyperText Transfer Protocol”  o HTTP, es el protocolo que usa internet para comunicarse desde los inicios del internet, incluso antes de la existencia de los navegadores. No hay diferencie de protocolo entre HTTP o HTTP, solo se diferencia porque HTTPS sucede con un sistema de encriptación más exigente para la transferencia de datos sencibles.

Entonces, con este protocolo la carga de una página web se basa en las peticiones HTTP que envía un navegador a un servidor y en las respuestas que envía el servidor al navegador. Durante este proceso, para que se visualice la página web, se pueden generar decenas de peticiones HTTP y cada una de esas peticiones tiene su propia cabecera.

Esquema protocolo HTTP

Las cabeceras HTTP son parámetros que se envían en una petición o respuesta HTTP e incluyen distintos tipos de información, como el tipo de navegador que es utilizado para la petición, el juego de caracteres utilizado, el tipo de servidor y por supuesto información del cache. Si recordamos el diálogo simulado entre navegador y servidor, cada línea de la conversación podría ser una cabecera HTTP.

qué son las cabeceras http

Las cabeceras deben comunicar que algunas respuestas son cacheables. HTTP es un código o un lenguaje, y como ya mencionamos sirve para enviar respuestas del servidor al navegador sobre la página web, en este caso revisaremos cómo comunican las cabeceras qué elementos deberán ser cacheables, o sea cuáles debe descargar y guardar el navegador en su caché para conservarlo durante un rango de tiempo establecido.

HTTP especifica las siguientes cuatro cabeceras relacionadas con la caché:

Cache-Control

Expires

ETag

Last-Modified

Sin embargo, definitivamente la cabecera cache control es la más útil, pues permite establecer en varias opciones de configuración, separadas por una coma, atributos como: Public o Private, o el Max-Age que detallo en la siguiente table:

[supsystic-tables id=’1′]

La sintaxis es así:

Cache-Control: private, max-age=0, must-revalidate
 
Cache-Control: max-age=3600, must-revalidate

Las directivas de `Cache-Control` controlan quién puede almacenar la respuesta en memoria caché, en qué condiciones y durante cuánto tiempo. Bien se dice que la mejor solicitud es aquella que no necesita comunicarse con el servidor, tener un acopia en el navegador nos permitirá disminuir el costo de datos del usuario y hacer más rápida la carga de la página.

Por cierto, hay un Framework de PHP muy bueno y muy recomendado para desarrollo web, que nos permite establecer las cabeceras HTTP con una interfaz muy sencilla, orientada a objetos.

Este Framework se llama Symfony y pueden una Guía completa en este link.

Aquí un ejemplo de cómo se escriben las cabeceras con Symfony:

// ...
 
use Symfony\Component\HttpFoundation\Response;
 
$response = new Response();
 
// indica si la respuesta es pública o privada
$response->setPublic();
$response->setPrivate();
 
// establece la duración máxima de la caché privada o compartida
$response->setMaxAge(600);
$response->setSharedMaxAge(600);
 
// establece una directiva Cache-Control concreta
$response->headers->addCacheControlDirective('must-revalidate', true);

¿Respuestas públicas o privadas?

Cabe mencionar que existen las gateway cache y las proxy cache, este tema será analizado en otro post más profundo sobre el análisis de las cabeceras HTTP, pero por ahora lo importante es que ambas son caches compartidas, se les dice así porque el contenido guardado en cache se comparte con más de un usuario.

Imaginemos que por error algunas de estas estas caches almacenan información privada del usuario, se estaría sirviendo esta misma información privada a todos los usuarios. Sería terrible que la información privada de tu cuenta se estuviera sirviendo a otros usuarios cada que soliciten la página.

Por lo anterior es que se establecen dos tipos de cabeceras:

Finalmente, ¿por qué?

Cerraremos el por qué con las palabras de Google en su fundamentals para developers: “obtener un elemento de la red es lenta y cara: las respuestas de gran tamaño suponen muchos recorridos de ida y vuelta entre el cliente y el servidor, y el proceso se dilata cuando están disponibles y el navegador puede procesarlas. Además, suponen costes de datos para el visitante. Por lo tanto, la capacidad de almacenar en memoria caché y reutilizar recursos obtenidos anteriormente es un aspecto esencial para optimizar el rendimiento.”

Te invito votar por el contenido y a seguirme en Twitter.

[yasr_visitor_votes]