Cache de navegador o browser cache

Dentro de los distintos tipos de cache que existen en un entorno web, el cache de navegador o browser cache se suele tratar como algo diferente, pero sigue siendo un sistema de cache como puede serlo un cache de página.

El browser cache o cache de navegador, como su nombre indica, es un cache que se encuentra en el navegador del visitante que accede a una web. Su objetivo es guardar ciertos archivos en el navegador del visitante para evitar descargarlos continuamente para cada página de la web que visita o para próximas visitas.

El funcionamiento del cache de navegador o browser cache es simple, pero al mismo tiempo el hecho de activarlo tiene bastante más ventajas que inconvenientes.

Se trata de una técnica WPO tan sencilla que en muchos casos se infravalora. Yo personalmente no la tenía en cuenta a menudo porque pensaba que apenas se notaba… y se nota.

Cuando un visitante que ya había visitado nuestra web vuelve, si tiene en cache de navegador ciertos archivos ya descargados de la visita anterior, estos ya no se descargarán y ahorraremos tiempo y recursos.

El cache de navegador es una ventaja tanto para el visitante como para el webmaster, aunque existen casos donde pueden existir conflictos por un TTL vigencia de cache alto o por cualquier otra circunstancia. Al cache de navegador le podemos especificar un TTL o tiempo de expiración, una cuenta atrás independiente para cada archivo guardado en cache que servirá para no tener problemas con versiones muy antiguas de ciertos archivos.

Desde hace ya bastante tiempo, el browser cache era una de las reglas que Google PageSpeed Insights tenía en cuenta a la hora de asignar una puntuación y por eso es una de las técnicas WPO más conocidas. Precisamente es una de las más conocidas porque el script de Google Analytics siempre carga con un TTL o tiempo de expiración muy bajo y, cuando probamos la web en Google PageSpeed, nos encontramos que eso nos baja la puntuación.

PD: Tiene “huevos” que un script del propio Google sea lo que nos baja la puntuación.

Solo quiero añadir que este problema de Google Analytics podemos solucionarlo con plugins como CAOS o con el propio WP Rocket del que tanto hablo en este blog.

Independientemente de esto, y volviendo al tema del cache de navegador, vamos a enumerar algunas ventajas interesantes y directas:

Ahorramos ancho de banda al servir los elementos de las páginas.

Ahorramos potencia de proceso en el servicio web al ahorrar peticiones.

Ahorramos tiempo al tener que descargar muchos menos datos.

Evidentemente, el cache de navegador no afecta a los bots como GoogleBot, pero sí a los visitantes. Como resultado, mejora la experiencia de usuario.

Si queremos ver la eficiencia del cache de navegador podemos utilizar las herramientas de desarrollador de Google Chrome para la prueba, ya que nos deja desactivar el cache de navegador en la carga:

Se consigue una mejora bastante buena en los datos transferidos y también en los tiempos de descarga, como puedes ver.

¿Qué desventajas tiene el cache de navegador? ¿Tiene alguna?

La única desventaja real es que, en ciertos casos, puede ser necesario vaciar cache de navegador y eso tiene que hacerlo el visitante.

El vaciado de cache en el navegador del visitante es algo que, como webmasters, no podemos controlar. El usuario suele realizar esta acción cuando tiene problemas en el navegador o cuando quiere limpiar su rastro.

Los archivos guardados en cache de navegador son usados tanto en visitas recurrentes como en la navegación por la web, siempre que los archivos sean comunes.

Configurar cache de navegador

La configuración del cache de navegador depende totalmente del servidor web. Por eso, dependiendo del servidor web o proxy inverso utilizado, debemos hacer una cosa u otra.

Cache de navegador en Apache: La configuración se realiza mediante el archivo .htaccess.

Cache de navegador en Nginx: La configuración se realiza en el archivo de configuración nginx.conf de Nginx.

Cache de navegador en LiteSpeed: Al igual que en Apache, la configuración se realiza con el archivo .htaccess.

La principal diferencia entre estos casos es que al archivo .htaccess de Apache y LiteSpeed podemos acceder desde el plan de hosting de forma fácil y rápida. Cualquier usuario puede hacerlo.

En el caso de Nginx es necesario tener conocimientos de sysadmin y acceder a los archivos de configuración desde consola, por lo que es más complejo.

Como digo siempre, actualmente Apache es poco eficiente y en muchos casos se sigue utilizando únicamente por el .htaccess y por la facilidad para configurar algunas cosas en los sitios web. LiteSpeed también es compatible con el .htaccess, aunque pocos proveedores de hosting lo utilizan porque es premium. En Raiola Networks ofrecemos hosting con LiteSpeed 🙂

Especificar cache de navegador .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 year"
<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
<FilesMatch "\.(css)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(txt|xml|js)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
</IfModule>

Lo que hacemos con esto es especificar cache de navegador de 30 días para los tipos de archivos especificados (los más comunes).

Se pueden añadir los MIME types de los tipos de archivo que necesites y también puedes especificar el tiempo que necesites.

En la sintaxis del .htaccess encontramos distintos “métodos” para especificar el TTL, como has visto en el código anterior.

ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"
ExpiresDefault "access plus 1 month 15 days 2 hours"
ExpiresDefault "modification plus 5 hours 3 minutes"
ExpiresDefault A604800
ExpiresDefault M604800

Si necesitas más información, puedes encontrarla en la documentación oficial de Apache 2.4: https://httpd.apache.org/docs/2.4/mod/mod_expires.html

Cache de navegador en WordPress

La configuración del cache de navegador debe hacerse en el servidor web, como ya he dicho, por lo que no depende directamente del CMS o aplicación.

En esta sección voy a intentar simplificar al máximo su configuración en WordPress, aunque en algunos casos no sea posible.

Aunque lo ideal es hacerlo con el .htaccess o con el archivo de configuración, hay usuarios que no son capaces, por lo que vamos a simplificarlo.

El problema es que solo lo podemos simplificar en servidores Apache o LiteSpeed, ya que en servidores Nginx (solo) tenemos que modificar los archivos personalmente sí o sí. Por el contrario, en Apache y LiteSpeed un plugin de WordPress puede modificar el .htaccess para especificar el cache de navegador.

También debo añadir que, de forma “transparente”, la mayoría de plugins de cache ya implementan cache de navegador si tienen permisos de edición en el .htaccess.

WP Rocket, por ejemplo, introduce de forma transparente en el .htaccess las reglas necesarias para tener un cache de navegador efectivo. Sin embargo, LiteSpeed Cache y W3 Total Cache tienen la opción de activar el browser cache, pero incluyen opciones de configuración.

Si nuestro plugin de cache no implementa cache de navegador o por cualquier cosa necesitamos otra opción, existen algunos plugins gratuitos para hacerlo, como Speed Up – Browser Caching, que no necesita configuración (es solo instalar y ya está).

Existen muchas más opciones, pero lo que hacen estos plugins es siempre lo mismo: escribir en el .htaccess.

Cache de navegador con CloudFlare CDN

El modo de funcionar de CloudFlare es como proxy inverso y eso quiere decir que, si tenemos CloudFlare configurado en nuestra web de forma normal, el cache de navegador hay que configurarlo directamente en CloudFlare.

CloudFlare dispone de configuración para hacer esto en su panel. Simplemente debemos ir a la sección “Caching” dentro del panel de CloudFlare y buscar la sección “Browser Cache TTL”:

CloudFlare nos da varias opciones. Mi favorita es “Respect Existing Headers” para que la configuración válida sea la que le especificamos directamente desde el servidor web.

Si tienes un servidor donde no puedes configurar el browser cache, puede ser una muy buena opción configurarla desde CloudFlare si usas este CDN.

Query strings y browser cache

En este blog he hablado varias veces de los query strings y lo que nos dificultan en algunos casos los caches en un proxy inverso o de un CDN como CloudFlare.

Por si no lo has visto, esto es un query string:

Pero el tema es que los query strings también pueden evitar que funcione el cache de navegador o que en algunos casos incluso falle.

Por esta razón, CloudFlare y la mayoría de CDN llevan una opción para ignorar los query strings:

En circunstancias normales (sin proxy inverso ni CDN), no podremos ignorar los query strings, pero es recomendable desactivarlos para evitar problemas.

Desactivar los query strings en WordPress es fácil. Existen muchos plugins de tweaking como Machete, Perfmatters o WP Rocket que nos permiten hacerlo.

Si queremos desactivar los query strings de forma manual, podemos hacerlo a través de un código en el functions.php del theme activo. El código a insertar seria este:

function _remove_script_version( $src ){

$parts = explode( '?ver', $src );

return $parts[0];

}

add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );

add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Si quieres hacerlo de forma más dinámica, puedes hacerlo con el plugin Code Snippets:

Así los recursos cargarán de forma más limpia, sin la “versión” al final, y por lo tanto mejoraremos la eficiencia de algunos tipos de cache.

Forzar a no leer cache de navegador

Con el .htaccess especificando cache-control y expires deberíamos poder desactivar por completo el cache del navegador, aunque en teoría esto puede fallar.

Todo se basa en especificar las siguientes cabeceras con el .htaccess, de la misma forma que hemos especificado el cache de navegador:

Header set Cache-Control "no-cache, no-store, must-revalidate" 

Header set Pragma "no-cache" 

Header set Expires 0 

ExpiresActive Off 

Header unset Cache-Control 

Header unset Last-Modified 

Header set Pragma "no-cache" 

Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" 

Header set Expires "jue, 1 Jan 1970 00:00:00 GMT"

También existen algunos plugins para hacer esto específicamente en WordPress, aunque utilizan métodos como los query strings para hacer esto de forma muy específica en algunos archivos. Un ejemplo es Prevent Browser Caching: https://es.wordpress.org/plugins/prevent-browser-caching/

¿Cuándo podemos querer que no se lea el cache de navegador?

Pues por motivos de desarrollo o por actualización constante de contenido, aunque debemos tener en cuenta el sobreuso de recursos que eso implica para el servidor web. Si se trata de un sitio web con mucho tráfico, el hecho de desactivar el browser cache puede poner nuestro sitio en problemas si no estamos preparados.

Vaciar cache de navegador

Desde el punto de vista del usuario, podemos necesitar vaciar el cache del navegador en algunos casos.

La mayoría de usuarios de Internet no tienen los conocimientos suficientes para vaciar cache de navegador en sus dispositivos.

El problema está en que cada navegador web tiene su método para poder vaciar el cache de navegador.

Vaciar cache de navegador en Google Chrome

Google Chrome es mi navegador favorito y el de mucha gente. En este vídeo vas a ver cómo vaciar cache de navegador en Google Chrome sobre un ordenador Windows, aunque lo mismo sería extensible para cualquier Linux y para Macintosh:

Vaciar cache de navegador en Mozilla Firefox

Mozilla Firefox sigue siendo uno de los navegadores web más utilizados y su proceso para vaciar cache de navegador es diferente a otros navegadores:

Vaciar cache de navegador en Opera

Opera sigue teniendo su cuota de mercado y es otro navegador diferente con un proceso distinto para vaciar cache de navegador:

https://alvarofontela.com/cache-de-navegador-browser-cache-wpo/