Especificar caché de navegador

Especificar caché de navegador
¿Que son? ¿Para que sirven? ¿Como funciona? ¿Porque es importante?

Especificar caché de navegador ¿Que es?

Especificar caché de navegador es la exigencia de cualquier métrica como el PageSpeed de Google o Metrix que nos está requiriendo que especifiquemos el Head Expires(Fecha de caducidad) de uno o más fichero, así como la habilitación propia en el servidor.

Cada servidor de contenidos web, como apache, nginx, tiene su propia forma de habilitar sus interpretaciones.
En el caso de apache se habilita a través de su extensión mod_expires.
Se activa desde el terminal con “sudo a2enmod expires”

¿Que son los Head Expires?

Los ‘Head Expires’ permiten a nuestro navegador tener una clara referencia de la vida máxima de un fichero remoto, como lo es analytics.js.
Con esta marca pueden saber si pueden seguir usando su fichero cacheado, o de lo contrario, solicitar un nuevo archivo actualizado del servidor remoto.
Porque algunos ficheros remotos pueden actualizarse, bien por bugs, o por sucesión de versiones.

Esta función permite a los navegadores:

  • Reducir la carga del servidor (menos número de cargas externas)
  • Disminuir el tiempo de carga de la página (por ende del primer punto)
  • Un fichero cacheado se puede optimizar y modificar, el remoto no.
  • Beneficio directo para las conexiones con coste (tarifas 3G y 4G)

Cada visitante que entra en un sitio web, su navegador se comunica con el servidor de la web, y descarga todos los archivos necesarios, scripts, estilos, imágenes, etc.
A proporción del crecimiento de contenidos, hay muchos más ficheros de este tipo.
Entonces la intención del Head expires o Expires Headers, no es solo reducir la carga de descargas del servidor. (Beneficio para el servidor)
También lo es evitar las descargas repetitivas de los mismos. (Beneficio para el navegante)

¿Como funciona el Head Expires?

Es muy simple.
Esta regla indicada por el servidor, le dice a nuestro navegador, por cuanto tiempo debe almacenar el archivo, o cuando debe descargar otro nuevo ejemplar.
Esta regla es válida incluso para posteriores visitas.
Si el usuario no borra la caché del navegador, en sus posteriores visitas cada uno de los archivos remotos necesitados se evaluará si necesita o no descargarse de nuevo.
Si no hay necesidad de una nueva descarga, habrá un doble beneficio, para el servidor, y para el navegante.

No habrá beneficio en la primera carga, porque la primera carga será implicita. No hay ejemplar descargado, se require la descarga.
Pero a partir de la 2ª petición, el contenido del fichero será entregado por el propio navegador.

La regla que indica estas fechas de expiración, suelen indicarse por extensión de fichero.
Hay una más o menos estimación generalizada de rangos de fecha para los ficheros jpg, para los javascript, etc..

¿Que diferencia hay entre el caché y el Head Expires?

El caché es el sistema y método en sí,  en como se recuerda el contenido de un fichero remoto.
El Head Expires es una marca adicional, que nos dice por cuanto tiempo podemos aprovechar esa memoria, y cuando debemos renovar ese contenido.
Sin esta marca, correríamos el riesgo de tener un contenido estático obsoleto y distinto del más reciente, por siempre.

¿Por qué es importante?

Este sistema de cacheo y caducidades es importante a nivel global, para reducir un tráfico ilógico y reiterante.
No sólo se repite el uso de ficheros externos como scripts y imágenes al repetir 2 visitas en una misma página.
Ficheros como las hojas de estilos (css), o los javascripts (js), contienen datos compartidos para todas o casi todas las páginas de una web.
El caso más popular es el “Theme” de los cms. Ellos reunen todos los datos de diseños que son aplicables a todas las páginas, donde definen cabecera, logotipo, columnas, tipos de fuentes, colores, pie de página.
El caché del navegador permite recordar este fichero y realizar sólamente 2 cargas en la visita de 150 páginas de la misma web.
Y el Header Expire permite que esto sea así hasta un tiempo limitado, y tras pasado el periodo marcadado renueva los mismos.

Cómo activar y agregar Header Expires

Primero nos cercioramos que nuestro servidor y su servidor de contenidos contiene esa propiedad.
Apache y Nginx son candidatos perfectos.
Se activa sus extensiones.
En apache se hace así:

$ sudo a2enmod expires
$ sudo service apache2 restart

Se localiza el archivo .htaccess de la web en cuestión, y se inserta algo así:

 <IfModule mod_expires.c>
 # Enable expirations
 ExpiresActive On 
 # Default directive
 ExpiresDefault "access plus 1 month"
 # Images
 ExpiresByType image/gif "access plus 2 month"
 ExpiresByType image/png "access plus 2 month"
 ExpiresByType image/jpg "access plus 2 month"
 # CSS
 ExpiresByType text/css "access plus 2 month"
 </IfModule>

El conjunto de reglas en el mod_expires puede ser muy variable.
En este ejemplo indico que todos los ficheros caducarán pasados 1 mes. Pero caducarán en 2 meses los gif, png, jpg, y los estilos (css)

Comprobar los ficheros cacheados y su tiempo de vida

Una imágen vale más que mil palabras.
Especificar caché de navegador. Comprobar la vida de un fichero

F12 en tu navegador, vemos la pestaña “Red” o “Network”.
Clicamos en cualquier fichero, y en el detalle del mismo estamos viendo.

  • Status Code: Código de retorno del fichero, 200 Indica OK (Códigos de estado)
  • expires: Último día válido para usar el caché de este fichero
  • cache-control: Tiempo máximo de vida del fichero especificado en segundos.
  • last-modificed: Como su nombre indica, la última vez modificado
  • content-lenght: Tamaño del fichero
  • content-type: Tipo de fichero (que tomamos como referencia para decir cosas sobre él en .htaccess)
  • date: La fecha actual en que hemos cargado el fichero
  • etag: Es una etiqueta interna cuyos algoritmos usan para interpretar todo este conjunto de fechas.
  • server: Obvio, el servidor de contenidos que nos lo está entregando.

Conclusión sobre especificar caché de navegador

Con estos conocimientos adquiridos ahora, si nos volvemos a preguntar, que es especificar caché de navegador, podemos decir.
Es la exigencia de cualquier métrica como el PageSpeed de Google o Metrix que nos está requiriendo que especifiquemos el Head Expires.
Dichas exigencias son por las siguientes razones:

  1. Porque ellos entienden que descargar los mismos ficheros en todas las consultas, no es optimo ni lógico.
  2. Porque saben perfectamente que un caché sin una fecha de caducidad, no es bueno ni seguro.

Y el siguiente reto

Especificar caché de navegador en ficheros externos (Solución al warning de Google PageSpeed Insight)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *