Todo sobre la caché del navegador Nuestro artículo XXL sobre cómo aumentar la velocidad de las páginas

Gracias a la caché del navegador, los archivos no tienen que descargarse una y otra vez cuando se accede a un sitio web, sino que se almacenan en el navegador.

 

Los usuarios se benefician del hecho de que se reduce el tiempo de espera hasta que un sitio web está completamente cargado. El menor tiempo de carga de las páginas también tiene ventajas para los operadores de los sitios web: Gracias a la mayor velocidad de la página (velocidad de carga de la página), se influye positivamente en la clasificación en los motores de búsqueda.

 

Descubra todo lo que necesita saber sobre la caché del navegador y cómo utilizarla correctamente en nuestra entrada del blog.

 

¿Qué es la caché del navegador?

La caché del navegador es la memoria caché de un navegador web en la que se almacenan copias de los recursos a los que ya se ha accedido (por ejemplo, imágenes, archivos JavaScript, vídeos).

 

Si ya se ha accedido una vez a una página de Internet y algunos de los recursos se han guardado en la caché del navegador, la página se carga más rápido en la segunda visita. La razón es que los datos no tienen que descargarse de nuevo, sino que pueden recuperarse de la caché.

 

Puede imaginar el proceso de almacenamiento en caché del navegador de la siguiente manera:

 

• Cuando se visita por primera vez una determinada página de Internet, es necesario descargar todos los elementos que contiene. Por tanto, visitar una página web siempre implica descargar datos.
• Algunos de los elementos de los sitios web cambian regularmente, otros son estáticos. Los elementos estáticos de los sitios web son aptos para la caché del navegador. Se almacenan en la caché de su navegador.
• La próxima vez que se llama a la página, el navegador accede a los recursos almacenados en su caché. Como resultado, tiene que solicitar menos datos al servidor y el servidor tiene que enviar menos datos.

 

El concepto de caché está muy extendido. También lo utilizan, por ejemplo, los servidores proxy de las grandes redes informáticas . Si hay un gran número de participantes en la red, el servidor proxy se encarga de enviar a los usuarios los recursos de la caché. Esto significa que no tiene que reenviar la petición del cliente al servidor y no es necesario atravesar Internet para recuperar los recursos.

 

Incluso la mera definición de la caché del navegador revela su gran ventaja: optimiza la velocidad de carga. Como la comunicación con el servidor es más corta y los recursos pueden recuperarse directamente de la memoria, pueden estar disponibles más rápidamente.

 

Ventaja: Velocidad

La ventaja de la caché de navegador es la optimización de la velocidad de carga. Como agencia SEO, en Specht GmbH utilizamos la caché del navegador para aumentar la velocidad de carga de las páginas. Una alta velocidad de la página es uno de los factores de clasificación más importantes para los motores de búsqueda como Google.

 

Cuanto más rápido se carguen todo su sitio web y todas las subpáginas asociadas cuando los usuarios accedan a él, más posibilidades tendrá de lograr una buena clasificación en los resultados de búsqueda. Unas posiciones altas en los resultados de búsqueda van de la mano de una mayor visibilidad, más visitas al sitio web y una consecución más rápida de sus objetivos individuales. La mejora de la velocidad de la página también tiene un efecto positivo en la experiencia del usuario (UX).

 

En el SEO on-page, deben utilizarse especialmente las siguientes opciones para mejorar el tiempo de carga:

 

• Compresión de imágenes
• Eliminación de plug-ins superfluos del CMS
• Uso de la caché del navegador

 

Google ayuda a los operadores de sitios web (webmasters), a los expertos en SEO y a las agencias de marketing online en la optimización de los motores de búsqueda. Proporciona numerosas herramientas útiles para optimizar su propio sitio web, como Google Search Console y Google Analytics. El operador del motor de búsqueda también proporciona herramientas para reducir el tiempo de carga de los sitios web con Google Pagespeed Insights una útil herramienta SEO para reducir el tiempo de carga de los sitios web.

 

Inconveniente: puntualidad

Una desventaja de las cachés de los navegadores es su actualización potencialmente limitada. Como usuario, no puede saber cuándo los webmasters actualizan subpáginas individuales o incluso sitios web enteros. Los recursos almacenados en la caché pueden quedar desfasados tras las actualizaciones.

 

Tanto los webmasters como los usuarios tienen la responsabilidad de evitar el problema de los contenidos obsoletos. Los webmasters deciden si quieren utilizar la caché y qué recursos deben almacenarse en ella y durante cuánto tiempo. En la próxima sección veremos cómo pueden definir correctamente las reglas de almacenamiento en caché.

 

Mientras que los webmasters deben seleccionar sólo los recursos estáticos para su almacenamiento en caché con el fin de garantizar la actualización de los datos, los usuarios tienen la responsabilidad de vaciar su caché con regularidad. Al vaciar la caché se borran todos los contenidos almacenados en ella.

 

Si se vuelve a cargar una página después de vaciar la caché, se muestran todas las actualizaciones de esta página. Además, los recursos estáticos actualizados y, por tanto, nuevos, se almacenan en la caché para que los nuevos contenidos se carguen desde ella la próxima vez. Vaciar la caché con regularidad también tiene la ventaja de que se reduce la carga del disco duro del dispositivo final y, en consecuencia, el rendimiento de éste vuelve a ser mayor.

 

 

Definir correctamente las reglas para guardar recursos en la caché del navegador

La aplicación de la memoria caché tiene dos vertientes: la teórica y la práctica. En la siguiente sección hablaremos de la parte práctica. En primer lugar, nos gustaría ampliar los conocimientos teóricos sobre el almacenamiento en caché ya proporcionados en esta entrada del blog para que entiendas aún mejor la parte práctica. Hasta ahora, ya lo tienes claro:

 

• El almacenamiento en caché de los recursos de su sitio web en el navegador del usuario tiene mucho sentido, ya que ayuda a aumentar la velocidad de carga de su sitio web y de todas las subpáginas.
• Para garantizar que los recursos almacenados en la caché del navegador están actualizados, los webmasters deben definir correctamente las reglas de almacenamiento en caché.
• Los usuarios también tienen una responsabilidad: se recomienda vaciar la caché con regularidad para mantener los datos actualizados.

 

A la hora de definir las normas de almacenamiento en caché como webmaster, lo mejor es diferenciar entre tres periodos de tiempo: a largo plazo, a medio plazo y a corto plazo. Cada recurso se asigna a uno de estos periodos. De este modo, el recurso en cuestión se eliminará automáticamente de la caché si se pone en peligro su actualidad.

 

Recomendaciones: Cuándo qué recursos deben cargarse desde la caché.

Para garantizar que los recursos de la caché del navegador están actualizados, como webmaster sólo debe almacenar en caché recursos estáticos a largo plazo (por ejemplo, durante un mes o un año). Ejemplos de recursos estáticos son los archivos JavaScript y los archivos CSS. A continuación se ofrece un resumen de los recursos que pueden almacenarse en caché:

 

• CSS, HTML y JavaScript
• Archivos de imagen como JPG, JPEG, PNG y GIF
• Archivos de objetos como vídeos y PDF

 

Tomemos como ejemplo las imágenes: El logotipo de una empresa o la infografía de un artículo informativo no cambian en absoluto o sólo al cabo de varios años. Por tanto, las imágenes como los logotipos pueden almacenarse en la caché del navegador durante mucho tiempo sin problemas, ya que se mantienen actualizadas durante mucho tiempo, por ejemplo más de un año.

 

El hecho de que recursos como CSS, HTML y JavaScript también puedan guardarse en la caché del navegador permite, por ejemplo, guardar el diseño de una página . En particular, guardar los archivos CSS tiene un efecto positivo en el rendimiento de los sitios web. Los archivos CSS pueden guardarse durante un mes.

 

El resto de archivos que cambian con regularidad -quizá incluso varias veces en un mismo día- deben almacenarse en la caché del navegador durante unas horas como máximo. Los archivos HTML son un ejemplo de periodos de almacenamiento en caché a corto plazo. Se utilizan, entre otras cosas, para dar formato a los textos. Como los textos cambian a menudo, todos los archivos asociados deberían recargarse cada vez, si es posible.

 

Cabecera: La información se almacena aquí

En la estructura de la página existe el llamado cabecera. En ellos se definen las reglas que rigen, por ejemplo, el intercambio de información entre el navegador y el servidor o el rastreo por parte de los algoritmos de Google. Como las reglas para el almacenamiento en caché también se almacenan en las cabeceras, desempeñan un papel central en el almacenamiento en caché de los navegadores.

 

Los comandos se utilizan en la cabecera de almacenamiento en caché para especificar qué recurso o archivo puede almacenarse en caché. Si no se establece la información correspondiente, no se produce ningún almacenamiento en caché. Se distinguen dos cabeceras de caché: la cabecera Cache-Control y la cabecera Expires.

 

La cabecera Cache-Control contiene información sobre qué recurso o archivo puede almacenarse en caché. Las siguientes instrucciones son comunes:

 

• no-cache: El navegador puede almacenar en caché, pero debe preguntar al servidor si el recurso respectivo es la última versión.
• público: El recurso puede guardarse en la caché.
• privado: El recurso puede ser guardado en la caché, pero sólo por el navegador y no por los servidores proxy existentes.
• no-store: No se permite almacenar temporalmente el recurso.

 

Mientras que la cabecera Cache-Control indica qué recursos y archivos pueden almacenarse y dónde, la cabecera Expires se utiliza para definir periodos de tiempo para el almacenamiento en caché. Las recomendaciones de la sección anterior de esta entrada de blog pueden aplicarse en esta cabecera de almacenamiento en caché: Al nombrar específicamente un periodo de tiempo en la cabecera Expires, el navegador sabe a partir de qué momento debe solicitar al servidor una nueva copia del recurso o archivo correspondiente y almacenarlo en caché.

 

 

Aplicación: ¡Cómo utilizar correctamente la caché del navegador!

Hay dos maneras de implementar el almacenamiento en caché. La forma simple es utilizar plug-ins en el CMS, la forma complicada con mayor control sobre el almacenamiento en caché es cambiar el archivo htaccess.

 

Configurar el almacenamiento en caché mediante el archivo htaccess

El archivo htaccess se encuentra en el directorio raíz del sitio web con el nombre ".htaccess". Abra el archivo htaccess y active primero la caché del navegador a través del módulo "mod_headers" utilizando el siguiente comando como administrador:

 

cabeceras a2enmod
/etc/init.d/apache2 restart

 

A continuación, tiene la opción de especificar los tipos de archivos que se almacenarán en caché. Por un lado, puede resumir todos los tipos de ficheros como en este ejemplo:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|ico|jpeg|jpg|png|css|js)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
</IfModule>

 

En segundo lugar, al definir los tipos de archivo para el almacenamiento en caché, puede establecer diferentes valores predeterminados para los distintos tipos de archivo simplemente iniciando una nueva línea de coincidencia de archivos:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|jpg|jpeg|png)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
<FilesMatch „\.(css|js)$“>
Header set Cache-Control „max-age=2592000, public“
</FilesMatch>
</IfModule>

 

La especificación "max-age" indica cuántos segundos (por ejemplo, 604.800 segundos = una semana) debe almacenarse un archivo en la caché. Las abreviaturas gif, jpg, jpeg y png son formatos para imágenes, mientras que css y js corresponden a archivos CSS y JavaScript, respectivamente.

 

El navegador siempre prefiere la información del módulo "mod_headers" que acabamos de mencionar. La información del módulo alternativo "mod_expires" sólo se tiene en cuenta si no hay especificaciones en "mod_headers" sobre cuánto tiempo deben almacenarse en caché los archivos antes de volver a solicitarlos al servidor. Como webmaster, se beneficiará de una mejor visión de conjunto con el módulo Expires.

 

Si especificar los periodos de almacenamiento en caché en "mod_headers" le lleva demasiado tiempo, inicie el módulo Expires utilizando el siguiente comando:

 

a2enmod expira
/etc/init.d/apache2 restart

 

A partir de ahora, puede rellenar la cabecera Expires con toda la información importante para los periodos de caché, por ejemplo, configurando las siguientes instrucciones:

 

<IfModule mod_expires.c>

CaducaActivo el

ExpiresByType image/jpg "acceso 1 año"

ExpiresByType image/jpeg "acceso 1 año"

ExpiresByType text/css "acceso 1 mes"

ExpiresByType application/javascript "acceso 1 mes"

ExpiresByType application/x-javascript "acceso 1 mes"

ExpiresByType application/x-shockwave-flash "acceso 1 mes"

ExpiresByType image/x-icon "acceso 1 año"

ExpiresByType text/html "acceso más 300 segundos"

</IfModule>

 

La última línea mencionada "ExpiresByType text/html" proporciona información sobre cuánto tiempo debe almacenarse en la caché la página completa, es decir, todo su contenido.

 

Dado que, en particular, los textos de las páginas HTML cambian con regularidad, se han establecido periodos de almacenamiento en caché de 180 a 600 segundos para las páginas HTML, siempre que estas páginas se visiten con frecuencia y/o los operadores del sitio web actualicen con frecuencia el contenido de las mismas.

 

Configurar la caché con ayuda de plug-ins

El CMS (sistema de gestión de contenidos; sistema para crear y gestionar sitios web) más utilizado es WordPress. Existen plug-ins para WordPress que permiten ampliar la gama de funciones. Algunos plug-ins están especializados en el almacenamiento en caché. Por ejemplo, los siguientes plug-ins de WordPress permiten configurar y gestionar el almacenamiento en caché en el navegador:

 

• Cohete WP
• W3 Total Cache
• La caché más rápida de WP
• WP Super Caché
• WP Velocidad de la luz
• Optimizador SG
• Rendimiento rápido
• Colibrí
• Activador de caché
• Cometa Cache

 

Estos 10 plug-ins de WordPress ya son suficientes para configurar un almacenamiento en caché personalizado en el navegador, lo que aumenta el rendimiento de todo el sitio web y mejora significativamente la experiencia de usuario de los visitantes del sitio web al aumentar la velocidad a la que se carga el sitio web.

 

Gracias a los plug-ins de WordPress, los profanos sin conocimientos técnicos pueden regular fácilmente el almacenamiento en caché en el navegador. Además, algunos de los plug-ins de WordPress (por ejemplo, WP Rocket; Swift Performance) tienen otras ventajas. Ayudan a mejorar de forma integral el rendimiento y el tiempo de carga del sitio web.

 

Conclusión: ¡Instale el almacenamiento en caché y obtenga importantes beneficios SEO!

Como webmaster o experto en SEO, instale el almacenamiento en caché en los sitios web y consiga ventajas de gran alcance en la optimización de los motores de búsqueda. Con la ayuda de plug-ins para WordPress y otros sistemas de gestión de contenidos, el almacenamiento en caché es fácil de implementar incluso para los no expertos.

 

Si tienes conocimientos técnicos básicos, ni siquiera necesitas plug-ins y utiliza unos sencillos comandos en la cabecera de tus páginas para personalizar la caché del navegador y ofrecer a los visitantes de tu sitio web una buena experiencia de usuario.

 

PREGUNTAS FRECUENTES: Preguntas y respuestas sobre el tema "Almacenamiento en caché del navegador"

En esta última sección de nuestro blog hemos resumido algunas de las preguntas más frecuentes de los usuarios. Si tú también tienes una pregunta, como expertos en optimización para buscadores estaremos encantados de darte una respuesta adecuada. Póngase en contacto con nosotros y nos pondremos en contacto con usted.

 

¿Cómo pueden influir los visitantes del sitio web en el almacenamiento en caché?

Los usuarios de Internet pueden influir en el almacenamiento en caché de varias maneras. Por ejemplo, pueden desactivar completamente el almacenamiento en caché en la configuración del navegador. El resultado sería que no se guardaría ni un solo recurso o archivo en el navegador del usuario, independientemente de las instrucciones del webmaster.

 

Además, los visitantes del sitio web pueden establecer una edad máxima para los recursos o definir reglas de almacenamiento en caché para una página web individual que difieran de las reglas de almacenamiento en caché para el resto del sitio web. También es posible vaciar la caché en cualquier momento.

 

¿Cómo puedo borrar la caché del navegador?

Este proceso varía en función del navegador.

 

Con Google Chrome, los visitantes del sitio web borran la caché abriéndola primero con la combinación de teclas "Ctrl + Mayús + Supr". A continuación, pueden seleccionar las imágenes y otros objetos de la caché e iniciar su eliminación.

 

Los usuarios también pueden borrar la caché en Internet Explorer utilizando la misma combinación de teclas que en Google Chrome. Tras utilizar la combinación de teclas, se abre una ventana con la información "Borrar datos del navegador". Al seleccionar la opción "Datos y archivos almacenados en caché" y hacer clic en "Borrar", se vacía la caché del navegador.

 

La próxima vez que visite un sitio web visitado anteriormente, los archivos de la memoria caché ya no se utilizarán una vez que ésta se haya vaciado. En su lugar, el navegador solicita al servidor la versión actual de un sitio web.

 

¿Cuál es la diferencia entre la caché del navegador y la caché del servidor?

Mientras que la caché del navegador almacena los recursos en el disco duro del visitante del sitio web, la caché del servidor los almacena en el servidor del webmaster. Por tanto, la caché de servidor también contribuye a aumentar la velocidad de carga de las páginas.

 

Las diferencias entre la caché del navegador y la del servidor residen, por tanto, en los niveles de gestión de los datos, ya que los distintos tipos de datos se almacenan en ubicaciones diferentes.