Introducción al almacenamiento en caché HTTP
Estoy seguro de que ha notado que cuando abre un sitio web por primera vez, tarda un poco en cargar. Sin embargo, cuando lo abre nuevamente después de un tiempo, el sitio se carga mucho más rápido. Imagínese si un sitio tardara en cargarse siempre, lo lento que se sentiría la navegación. Bueno, todo esto es gracias a una ingeniosa idea llamada HTTP Caching. Echemos un vistazo a lo que es, cómo funciona y cómo se utiliza para hacer que la navegación por Internet sea una experiencia más rápida.
¿Qué es el almacenamiento en caché HTTP?
El almacenamiento en caché de HTTP es la idea de almacenar algunos datos de uso común o frecuente en un lugar de acceso rápido. Con esto, existe una gran posibilidad de que se pueda acceder a los datos más necesarios mucho más rápido porque la computadora no tiene que llegar demasiado lejos para obtenerlos.
En el caso de la navegación web, el almacenamiento en caché se considera cuando su navegador web, como Chrome, almacena una copia de un sitio web o aplicación web en el almacenamiento local. Una vez que un sitio web se almacena en caché, un navegador web no tendrá que volver a descargar todos los datos del servidor y esto hará que la navegación sea mucho más rápida.
Por ejemplo, una vez que se descarga un archivo CSS de un sitio web, un navegador no tiene que descargarlo para cada página de la sesión. Lo mismo puede decirse de muchos archivos JavaScript, imágenes (como el logotipo del sitio y los iconos de redes sociales) e incluso algunos contenidos dinámicos. El almacenamiento en caché se habilita mediante el uso de encabezados de caché.
Encabezados de caché en HTTP
HTTP Caching tiene dos encabezados de caché principales, el primero se llama "Cache-Control" y el segundo se llama "Caducar". Echemos un vistazo a ambos:
Control de caché
Puede considerar Cache-Control como un interruptor para activar el almacenamiento en caché en el navegador del usuario. Una vez que se ha agregado este encabezado, habilita el almacenamiento en caché para todos los navegadores web compatibles. Si este encabezado no está presente, ningún navegador mantendrá una memoria caché del contenido de la página web, incluso si admite el almacenamiento en caché.
El control de caché tiene dos tipos de configuraciones de privacidad, la primera es pública y la segunda es privada.
En el caso de Public, los recursos pueden ser almacenados en caché por cualquier proxy intermedio como Content Delivery Networks (CDN).
Un encabezado de control de caché con respuesta privada le indicará al navegador que el almacenamiento en caché solo se realizará para un solo usuario y no para cualquier proxy intermedio.
El valor "max-age" en el encabezado Cache-Control establece el tiempo durante el cual el contenido se almacenará en caché. Este tiempo es en segundos.
Cache-Control:public, max-age=31536000
Expira
El encabezado Expires se usa cuando Cache-Control está presente en el código. Este es un encabezado simple de caché HTTP que establece una fecha a partir de la cual cualquier recurso de caché se considera inválido. Una vez que la caché caduca y el usuario carga el sitio web, un navegador web simplemente solicitará todo el contenido de la página una vez más.
Solicitudes condicionales
Los encabezados discutidos anteriormente simplemente le dicen al navegador cuándo recuperar los datos del servidor web. Las solicitudes condicionales, por otro lado, le dicen al navegador cómo recuperarlo. Las solicitudes condicionales le dicen a un navegador cómo puede preguntarle al servidor si la copia de datos en el caché está desactualizada.
En este proceso, el navegador envía algunos datos sobre los recursos que ha almacenado en caché en su memoria y después de leer estos datos, el servidor decide si los datos están desactualizados o no.
Solicitudes basadas en tiempo
En las solicitudes basadas en el tiempo, se verifica si el recurso solicitado se cambió en el servidor o no. Si la copia en caché en el navegador es la última, entonces el servidor devolverá el código 304.
Para establecer la solicitud condicional en función del tiempo, puede usar "Última modificación" en el encabezado de la respuesta.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
Basado en contenido
En las solicitudes basadas en contenido, el hash MD5 (o cualquier otra opción viable) se verifica tanto para la copia del servidor como para la copia de la memoria caché. Esto indica si los datos son iguales o no, en caso de que los datos sean diferentes, la suma de comprobación MD5 no coincidirá y el servidor enviará una copia nueva de los recursos.
Esto se hace a través de "ETag" en el encabezado. El valor de esto es el resumen de los recursos.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Visibilidad
Casi todos los navegadores modernos incluyen algunas herramientas relacionadas con el desarrollo que le permiten verificar los recursos, el código fuente y otros aspectos de una página web. Entre ellos, puede encontrar una herramienta para ver los encabezados devueltos por cualquier aplicación.
En Google Chrome, para ver estos encabezados, puede hacer clic con el botón derecho en cualquier área vacía de una página web y hacer clic en "Inspeccionar" o presionar CTRL + MAYÚS + I para abrir DevTools. En esta herramienta, haga clic en la pestaña Red y presione CRTL + R para volver a cargar para ver todos los encabezados de la página.
Casos de uso en el almacenamiento en caché de HTTP
A continuación se presentan algunos casos de uso del almacenamiento en caché HTTP que son los siguientes:
Para activos estáticos
Para los activos estáticos de una página, como imágenes, archivos JS y cualquier archivo CSS, puede optar por almacenar en caché agresivamente el contenido. No tener que cargar estos archivos resultará en una mejora de rendimiento impresionante. Para este caso de uso, elija el Encabezado de control de caché con el valor de antigüedad máxima de más de un mes o incluso un año.
Cache-Control:public; max-age=31536000
Para contenidos dinámicos
En el caso de los contenidos dinámicos de una página, deberá pensar qué archivos debe almacenar el caché del navegador y durante cuánto tiempo. En caso de que el contenido se cambie con frecuencia, deberá asegurarse de que la duración de tiempo que elija para el almacenamiento en caché no genere ningún problema para el usuario.
Almacenamiento en caché de contenido privado
Como discutimos en la sección Control de caché, en caso de que el contenido de la página sea de naturaleza privada, puede evitar que sea almacenado en caché por servidores intermedios como CDN agregando "Control de caché: privado" en el encabezado.
Otro enfoque más seguro es no almacenar en caché ningún contenido privado.
Implementación de caché HTTP
Ahora que sabe qué es el almacenamiento en caché HTTP y cómo funciona, veamos cómo puede implementarlo en su sitio web. La implementación de HTTP Caching es un poco diferente para diferentes tipos de servidores. En nuestro caso, echemos un vistazo a la implementación del almacenamiento en caché a través del archivo .htaccess.
Para habilitar el almacenamiento en caché en el sitio, puede agregar los encabezados en el archivo .htaccess en su servidor, por ejemplo:
FilesMatch "\.(ico|pdf|flv|jpg.webp|jpeg.webp|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
Lo anterior guardará en caché todo a, pdf, flv, jpg.webp y otros formatos mencionados en la "Coincidencia de archivos" durante un año.
Conclusión
HTTP Caching es uno de los trucos más importantes que hacen que navegar por su sitio sea una experiencia más rápida para sus visitantes y ahora que puede ver cómo funciona, puede implementarlo en sus sitios y aplicaciones web para que sean más rápidos para sus usuarios y para guardar el ancho de banda de su servidor.
Artículos recomendados
Esta ha sido una guía para el almacenamiento en caché de HTTP. Aquí discutimos la implementación, solicitudes condicionales, encabezado de caché y casos de uso de HTTP. También puede consultar nuestros otros artículos sugeridos para obtener más información:
- Aprenda qué es HTML
- ¿Cómo instalar Github?
- ¿Qué es MapReduce en Hadoop?
- Guía para principiantes de comandos de nodo
- Cookies HTTP | Seguridad