Mejores prácticas para aplicar web caché
El tiempo de carga de la página se ha convertido en un indicador crucial de la experiencia del usuario que incluso es considerado por Google como un elemento vital de la web para su algoritmo de clasificación. Es por eso que la web caché es fundamental para incrementar el performance de la web.
El almacenamiento en caché es sin duda uno de los elementos más importantes para la optimización de la carga de la página. Sin embargo, un uso inadecuado del mismo puede acarrear otros problemas.
Este artículo le ayudará a entender por qué es esencial configurar el almacenamiento en caché para los sitios web y le hará conocer las trampas más comunes. Al principio, vamos a explorar los beneficios en detalle.
1 - Mejora del tiempo de carga de la página y de la capacidad de respuesta
Con el almacenamiento en caché, la recuperación de datos es más rápida, ya que limita la necesidad de realizar viajes de ida y vuelta por toda la red. Si almacenamos el contenido en caché en el navegador, la recuperación es instantánea.
Sin embargo, el usuario puede experimentar un retraso en la carga inicial de la página hasta que se rellene la caché.
Lazy Loading para el almacenamiento en caché
En la práctica, hay muchas estrategias de almacenamiento en caché que se pueden utilizar. De entre ellas, la estrategia de lazy loading proporciona una mejora en el tiempo de carga de la página, y carga los datos en la caché sólo cuando es necesario.
Almacenamiento en caché de datos dinámicos
El almacenamiento en caché de contenido estático es más seguro que el almacenamiento en caché de contenido dinámico, donde el navegador se encarga de las complejidades. Sin embargo, no sirve para el contenido dinámico ya que los navegadores no son predecibles para la validación de la caché.
Sin embargo, si necesitas implementar el almacenamiento en caché de contenido dinámico, recomendaría usar una Content Delivery Network (CDN), que es más bien un punto intermedio.
Con un CDN (como cloudflare, por ejemplo), el contenido se almacena en caché más cerca del usuario en la ruta de la red, reduciendo la latencia. Además, se puede realizar la invalidación de la caché en la CDN, dando las instrucciones pertinentes. Es un claro diferenciador, que lo hace adecuado para el almacenamiento en caché de contenidos dinámicos, en contraste con los navegadores.
2 - Mejora de la disponibilidad de los datos
El almacenamiento en caché ayuda a mejorar la disponibilidad del sitio web a diferentes niveles. Cuando almacenamos el contenido en caché a nivel del navegador, se evitan problemas de navegación en condiciones de red deficientes.
Además, podemos utilizar service workers para mejorar la experiencia de trabajo offline.
Además, el uso de CDNs ayudará a gestionar los problemas de disponibilidad cuando el servidor de origen se desconecte.
3 - Una mejor oportunidad de escalar
Gestionar muchas peticiones a través de un único servidor requiere una infraestructura potente (mejor memoria, almacenamiento, potencia de procesamiento, etc.). Mantener un servidor de este tipo con alta disponibilidad puede ser muy costoso.
Dado que el almacenamiento en caché del frontend disminuye el número de solicitudes enviadas al servidor, se evita la necesidad de una máquina muy potente.
Por ejemplo, si tiene muchas imágenes de alta resolución en su sitio web, la búsqueda de esos archivos siempre provocará un gran tráfico en el servidor. Sin embargo, si se almacenan en la caché, se puede eliminar un mayor porcentaje de tráfico. Por lo tanto, una máquina con una infraestructura menos potente también será adecuada.
Con el almacenamiento en caché del front-end implementado, incluso las PYMES tienen más posibilidades de escalar y aceptar un tráfico elevado, lo que les da más posibilidades de competir con los grandes del mercado.
Hasta ahora, hemos visto cómo el almacenamiento en caché puede mejorar tu aplicación. Sin embargo, ¿es el almacenamiento en caché siempre adecuado? ¿Hay casos en los que el contenido en caché puede crear problemas? - Averigüémoslo.
4 - Configurar incorrectamente las cabeceras de caducidad
Las cabeceras de caducidad (Time To Live - TTL) del contenido determinan la frecuencia con la que se actualizará el contenido. Unas cabeceras de caducidad correctamente configuradas invalidarán la caché a tiempo, permitiendo a los usuarios ver las últimas actualizaciones de la aplicación. Esto evita que los datos sean obsoletos.
Sin embargo, si ha configurado una cabecera de caducidad lejana en el futuro para contenidos que cambian con frecuencia, los usuarios verán datos obsoletos en el sitio. Las cabeceras de caducidad lejanas sólo son adecuadas para contenidos estáticos que no cambian con frecuencia. Por lo tanto, establecer las cabeceras de caducidad correctas es muy importante para mantener su aplicación actualizada.
Hay que tener en cuenta dos hechos principales como mejor práctica para establecer el TTL para el contenido en caché.
- Tipo de recurso - Si el tipo de recurso es estático, se pueden asignar TTLs más largos, como se ha mencionado anteriormente. Sin embargo, si el tipo de recurso es dinámico, los TTL más cortos ayudarán a mantener los datos frescos.
- Uso del recurso - El TTL debe establecerse también en función de la frecuencia de uso del contenido. Por ejemplo, en un sitio de comercio electrónico con precios volátiles para los productos, el TTL debe establecerse para que expire al final del día para mantener los precios actualizados y mostrar la información correcta al usuario.
Y recuerde que tiene un control mínimo sobre la caché del navegador una vez que el TTL está configurado. Por lo tanto, es posible que también tenga que considerar la frecuencia de publicación y asegurarse de que las páginas pueden utilizar la versión correcta de los activos (CSS, JS, Imágenes).
5 - Almacenamiento en caché sólo de la página de inicio
La mayoría de las veces, los desarrolladores sólo se centran en mejorar el tiempo de carga de la página para la página de inicio del sitio web. Sin embargo, cuando un usuario visita su sitio, pasará por unas cuantas páginas antes de comprar su servicio.
Por lo tanto, aunque su página de inicio cargue muy rápido, si otras páginas tienen un rendimiento inferior, hay muchas posibilidades de que el usuario no siga adelante con la compra.
Si esto ocurre, gastar tanto esfuerzo en optimizar la página de inicio no le dará los resultados esperados. Por lo tanto, es importante implementar estrategias de almacenamiento en caché a todo el sitio o al menos a todas las páginas importantes que ayudarán a que un usuario se convierta en cliente.
6 - No comunicar las actualizaciones al usuario
Cuando se actualiza el contenido, es necesario cargar una nueva copia para los usuarios. Si no se puede aplicar una actualización de contenidos de forma automática (utilizando estrategias de invalidación de caché), debemos informar a los usuarios para que realicen una actualización.
No comunicar esto puede dar lugar a que se muestren datos obsoletos a un usuario. Por lo tanto, es importante enviar una notificación o mostrar un banner pidiendo al usuario que actualice el sitio para recuperar las últimas actualizaciones cuando se publique una nueva versión de la aplicación.
7 - No comprobar la configuración de la caché
La primera estrategia de almacenamiento en caché implementada en su sitio web puede no ser la mejor cuando éste crece y atrae más tráfico. A medida que actualizamos el sitio web con nuevos contenidos y características, es importante volver a revisar la configuración de la caché.
Por ejemplo, si su sitio web comenzó con contenido estático inicialmente, la caducidad de las cabeceras de control de la caché se establecería en fechas lejanas. Sin embargo, con las nuevas implementaciones, si hay contenido que se cambia más a menudo, las configuraciones de la caché también deberían modificarse con TTLs más bajos para recuperar elementos frescos con frecuencia.
8 - Estrategia de invalidación de la caché
La invalidación de la caché es importante para indicar al navegador que hay una nueva versión del activo disponible. Si no se implementan estrategias de invalidación de caché, los usuarios de su aplicación siempre verán datos obsoletos.
La invalidación de la caché ayudará a romper la caché y forzar al navegador a descargar una nueva copia del activo.
Es una buena práctica para las aplicaciones web de una sola página evitar que la página índice se almacene en caché en el navegador para evitar servir la versión más antigua después de un lanzamiento, lo que también podría afectar a la estabilidad sirviendo una mezcla de versiones de activos.
Además, el impacto en el rendimiento es bajo, ya que el HTML suele cargarse una vez por sesión de usuario.
Veamos algunas estrategias de validación de la caché.
- Utilizar cadenas de consulta - Un archivo diferente o nuevo puede indicarse mediante una cadena de consulta diferente (v=3.4.1) en la URL. La mayoría de los navegadores lo reconocerán y descargarán una copia nueva. Los CDNs incluso lo soportan. Pero algunos navegadores pueden no soportarlo.
- Cambiar el nombre del archivo - Cuando se necesita descargar una nueva copia, se puede cambiar el nombre del archivo para que el navegador lo reconozca como un nuevo cambio.
- Usar la fecha de actualización del archivo - La invalidación de la caché puede ser implementada en base a la última fecha de actualización del archivo.
Reflexiones finales
Hasta ahora, como hemos visto, el almacenamiento en caché proporciona muchas ventajas añadidas a nuestras aplicaciones.
Sin embargo, determinar la mejor estrategia de almacenamiento en caché para tu aplicación depende del contexto de la misma. Por ejemplo, supongamos que tu sitio web está lleno de datos dinámicos que necesitan ser cacheados. En ese caso, es mejor almacenarlo en caché a nivel de la CDN, donde se pueden considerar parámetros dinámicos para actualizar y servir el contenido almacenado en caché.
Por otro lado, debes conocer bien las estrategias correctas de almacenamiento en caché para evitar cualquier escollo que puedas encontrar a lo largo del proceso de desarrollo. Además, tener una estrategia de caché incorrecta es peor que no tener caché en absoluto.
Por lo tanto, tenga cuidado con esos casos de esquina y establezca las mejores prácticas en torno al almacenamiento en caché.