Caché eficiente de ficheros con Nuxt y Firebase
Publicado el 13 August 2021
Aprende a generar tus ficheros estáticos con un tiempo de caché eficiente y así mejorar el rendimiento de tu web.
Tabla de contenido
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.