caché de página VS caché del navegador

Publicado por JC

La caché se usa para almacenar datos de nuestra aplicación, con el objetivo de atenderlos con más rapidez cuando se necesiten. Normalmente guardamos datos ya procesados o copiamos datos de otro lugar para evitar accesos más lentos a los mismos.

En esta entrada voy a hablar de dos tipos de cachés muy importantes para la optimización de páginas web: caché de página y caché del navegador.

Caché de página

La caché de página se usa para guardar el contenido de una página ya procesada.

Muchas páginas se crean con un lenguaje que entiende el servidor, pero no el navegador. Si no usamos caché de página, cada vez que la solicitemos se tiene que procesar de nuevo, es decir, el intérprete del lenguaje tiene que convertirla en un lenguaje que entienda en navegador que la solicita.

Si tenemos la página procesada ya guardada en la caché nos ahorramos todo ese procesamiento, con lo que conseguimos mejores tiempos de carga.

Por lo general la página procesada permanecerá en caché el tiempo que indiquemos; una vez pasado ese tiempo se volverá a generar otra copia. Igualmente se generará otra copia cada vez que hagamos algún cambio en la página.

Este tipo de caché también puedes encontrarlo con las denominación de «page cache» o «caché dinámica», aunque no me gusta este último nombre porque puede dar lugar a confusiones.

En resumen, con esta caché convertimos las páginas de nuestra web en recursos estáticos.

¿Cuándo debemos usarla?

En principio parece todo maravilloso, ya que podemos reducir considerablemente el tiempo de carga de la página, pero muchas veces no es aconsejable.

La pregunta ahora sería saber cuándo usarla y cuándo no.

Debes usarla para cachear páginas cuyo contenido sea estático, es decir, que es siempre el mismo. 

No se aconseja usarla cuando el contenido de la página sea dinámico, ya que el navegador seguiría mostrando la copia guardada. Ejemplos de páginas con contenido dinámico pueden ser páginas con foros o páginas de comercio electrónico.

WordPress usa PHP para generar contenido dinámico, es un CMS moderno y dinámico, por lo que en teoría no sería aconsejable usarla. En la práctica podemos beneficiarnos de ella si el contenido de las páginas generadas va a ser estático.

Como ves la caché de página puede ser muy buena o puede ser una pesadilla, así que  ten cuidado antes de usarla.

Caché del navegador

El caché del navegador se usa para guardar el contenido estático. Si antes hablábamos de contenido dinámico (como son las páginas del sitio o aplicación web), aquí nos referimos a contenido que no se procesa, como archivos de texto, imágenes, de estilos o scripts.

Por eso, a este tipo de caché se le llama también en algunos sitios «caché estática», y por supuesto «browser cache». Los archivos estáticos de la aplicación por su parte pueden recibir el nombre de «assets».

El objetivo es que no tengamos que acceder al servidor para obtener estos archivos estáticos, sino que los tengamos almacenados ya en el navegador. Es decir, una vez descargamos los archivos del servidor, estos quedan guardados en el navegador para sucesivas peticiones.

En este sentido, es importante especificar en el servidor cuánto tiempo queremos que estén esos recursos en el navegador. De hecho la mayoría de las herramientas de optimización lo recomiendan.

¿Qué significa esto? Imaginemos que tenemos un recurso estático en el servidor, por ejemplo foo.css, y hemos establecido por ejemplo una semana. Cada vez que hagamos una petición se tomará la copia que tenemos de foo.css en el navegador. Hasta ahí bien, pero si editamos el archivo en el servidor seguiremos teniendo la versión anterior en el navegador hasta que no pase esa semana. Esto puede generarnos muchos dolores de cabeza y comportamientos indeseados en nuestra web si no tenemos en cuenta.

Lo mismo pasa con el caché de página tal y comenté anteriormente. En el servidor establecemos durante cuánto tiempo queremos tener guardar una copia de la página procesada antes de generar otra, y mientras tanto éste nos enviará la misma copia.

Para terminar con este apartado, es muy importante que además habilitemos la compresión gzip, que es compatible con todos los navegadores, y hará que disminuya el tamaño de los recursos antes de que estos sean descargados al navegador.

Consideraciones finales

Como hemos visto, gracias al uso de estas cachés podemos aumentar considerablamente el tiempo de carga de una página Web.

En el caso de WordPress tenemos disponibles en el directorio muchos plugins de caché, siendo mi favorito w3 total cache por lo configurable que es, aunque si estás empezando te recomiendo otro con una interfaz más sencilla.

También tenemos plugins específicos. Por ejemplo, si nuestro hosting usa el servidor web LiteSpeed (es el caso de Raiola Networks) podemos instalar LS Cache. O si por ejemplo tenemos nuestro hosting con SiteGround una opción recomendable puede ser SG Optimizer.

Por otro lado, podemos comprobar si nuestra página web está optimizada con herramientas como Pingdom (o cualquiera donde se nos indique el tiempo de carga y podamos ver cada petición HTTP que realizamos al servidor donde solicitamos los datos y la respuesta recibida).

En la respuesta de cada petición HTTP al servidor podemos ver entre otros el header content-encoding que indica la compresión del recurso solicitado; el header cache-control que indica cuánto tiempo se almacena ese recurso; o el header de cache dinámico o de página, que te dice si ese recurso está cacheado o no.

Recuerda que si necesitas que te ayude con la optimización de tu página web puedes contactar conmigo. Estaré encantado de ayudarte. Y por supuesto puedes compartir este artículo si te ha parecido interesante o piensa que puede ayudar a otros.

¿Tienes tu web optimizada?