Caché eficiente de ficheros con Nuxt y Firebase

El problema

Si has estado revisando la performance de tu sitio web y has encontrado problemas que te indican que no estás utilizando una caché eficiente de tus ficheros, tal vez te has preguntado como puedes solucionarlo.

Cuando alguien entra a tu web se realizan muchas peticiones de ficheros desde el navegador al servidor donde está alojada. Si estas peticiones tardan mucho en responder, la página tardará más en cargar y por lo tanto en estar disponible para el usuario final, y ¡El tiempo es muy importante!

Si ciertos ficheros que no vamos a cambiar (o no tenemos previsión de hacerlo a corto plazo) están almacenados en caché, las peticiones del navegador hacia éstos serán mucho más rápidas y el tiempo de respuesta de la web mejorará considerablemente.

La solución

Una vez que tenemos nuestra aplicación de Nuxt generada correctamente y el hosting configurado en Firebase, podemos también configurar cómo se va a realizar la caché de nuestros ficheros.

Para ello debemos localizar el fichero firebase.json en el directorio raíz de nuestro proyecto y lo editamos de la siguiente forma:

{
  "hosting": {
    "headers": [ {
      "source": "**/*.@(jpg|jpeg|gif|png|webp)",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=2592000"
      } ]
    }
    ]
  }
}

De esta forma estamos diciendo que todos los ficheros con alguno de estos formatos: jpg, jpeg, gif, png, webp, estarán cacheados por un tiempo de 30 días (2.592.000 segundos).

También podemos cachear otro tipo de ficheros como css, js, html o cualquier otro formato que necesitemos, además de definir distintos bloques de caché según el tipo de fichero o incluso su nombre.

{
  "hosting": {
    "headers": [ 
      {
        "source": "**/*.@(jpg|jpeg|gif|png|webp)",
        "headers": [ {
          "key": "Cache-Control",
          "value": "max-age=5184000"
        } ]
      },
      {
        "source": "**/*.@(json)",
        "headers": [ {
          "key": "Cache-Control",
          "value": "max-age=2592000"
        } ]
      }
   ]
  }
}

Con este ejemplo definimos los ficheros de imágenes con una caché de 60 días (5.184.000 segundos) y los ficheros de tipo json con una caché de 30 días.

¿Cuánto tiempo debo cachear mis ficheros?

Siempre va a depender el uso que tu web haga de los mismos y la frecuencia con que vas a modificarlos. Por ejemplo, si tienes un logo en tu web y no tienes previsión de cambiarlo puedes definir un tiempo de caché a partir de 1 año o incluso más, pero si tienes una imagen de portada que va a cambiar cada día no va a servir de nada que definas una caché de 1 mes.

Debes estudiar cada fichero o grupos de ficheros que generes en tu web y decidir el tiempo de caché que debería tener en base a las modificaciones que pueda sufrir.