Usa la cache para darle caché a tu Web

Actualizado en Noviembre 2012. Categoría: Blog

Usa el icono para acceder a las secciones del artículo.

Mejorando el rendimiento usando la caché

Aunque el principal uso de la caché es acelerar el tiempo de acceso, como consecuencia sirve para reducir la transferencia de ficheros.

En esta entrada de Funomy, tratamos la caché desde las posibilidades que ofrece para la Optimización Web o (WPO). El contenido sobre el que se suele establecer el uso de la caché para Web es el contenido que generalmente cambia menos en el tiempo, como pueden ser las hojas de estilo, las imágenes, ficheros de código js, documentos pdfs, etc.

Cuando un contenido esta configurado para usar la caché los tiempos de carga de las páginas Web variarán de la primera petición a las peticiones sucesivas a lo largo del tiempo.

Veamos un sencillo ejemplo, realizamos una primera carga de la dirección principal de Funomy, http://www.funomy.com (previamente hemos eliminado la cache del navegador). El resultado es:

Funomy_Cache

Podemos ver que se han realizado un total de 19 peticiones, se han transferido 145,23 KB y el tiempo de carga ha sido de 1,68s (tiempo de onload 1,48s y la carga del DOM en 1,21s)

Repetimos esta prueba un total de 10 veces obteniendo los siguientes valores medios:

19 Peticiones, 142,983 KB de transferencia y un tiempo de carga de 1,393 segundos.

Si realizamos este proceso haciendo uso de la caché los valores medios obtenidos son los siguientes:

19 Peticiones, 11,264 KB de transferencia y un tiempo de carga de 1,108 segundos

¿Cuanto hemos ahorrado con el uso de la caché?

En cuanto a la transferencia hemos evitado que se transfieran de media 131,71 KB lo que representa un 92,12 % menos de KB transferidos.

En cuanto al tiempo medio el ahorro ha sido de 0,284 segundos lo que representa un 20,45% menos de tiempo en el que están esperando nuestros consumidores.

Con esta sencilla prueba hemos podido comprobar la importancia del uso de la caché:

  • Ahorro del 92,12 % de transferencia.
  • Ahorro del 20,45 % de tiempo de espera.

La web de www.funomy.com contiene pocos elementos, hacen falta únicamente 19 peticiones para cargar el contenido. Esto hace que la mejora con el uso de la caché aunque significativo no nos de una visión completa de las ventajas del uso de la caché. Para poder extrapolar estos resultados a otros sitios Web tenemos que pensar en el número de elementos que contienen, el número de peticiones que se realizan para descargarlos y el tamaño de los ficheros que se descargan.

Cuando el número de ficheros a obtener es alto y su tamaño también, la incidencia que tendrá el uso de la caché será muy importante, no sólo por la reducción de la cantidad de ficheros a obtener si no también por la reducción de los tiempos de bloqueo del navegador.

El ahorro que se obtiene depende de una serie de factores como son:

  • La cantidad y tamaño de ficheros que no se actualizan frecuentemente, como pueden ser pdfs, css, imágenes, etc. Imaginemos la cantidad de tiempo y ancho de banda que se ahorra sin descargar los ficheros almacenados en caché una y otra vez.
  • El tiempo de bloqueo, según la distribución de los contenidos en nuestra Web, se producen tiempos de espera hasta que un contenido termine de descargarse. Lo cual quiere decir que si tenemos menos elementos a descargar, también se reducirá el tiempo de bloqueo y con ello el tiempo total.
  • El uso de elementos de terceros también condicionará el ahorro, ya que no se podrán establecer parámetros de caché para ellos.

Aún nos queda mucho por contar sobre la caché, disfrútalo próximamente en el blog de Funomy.