Arturo Navarro Growth Hacker

Amigos SEO, cómo es que llegamos a la pregunta: ¿qué es el caché y cómo debemos especificarlo en el navegador?Pues cuando entramos en temas de WPO, una de las primeras recomendaciones que nos dan las herramientas que analizan el speed load es especificar el cache en el navegador y por lo regular se nos muestra una lista con rutas de archivos de nuestro sitio web en nuestro servidor.

Cuando vemos este tipo de instrucciones de inmediato solemos pensar, “esto es cosa de TI y sus desarrolladores”, pero en este blog nos gusta jugarle al Prometeo y bajar ese fuego directamente a los estrategas, no teman, no quema.

Comencemos con entender qué es el cache

El concepto de caché es utilizado de dos formas en el ámbito de la informática. Hablando de una computadora el caché es la memoria de acceso rápido, en donde guarda temporalmente los datos procesados. Para entenderlo mejor, imaginen cuando eran niños y dejaban sus juguetes regados en el cuarto mientras iban a comer: los soldaditos formados, el trenecito en sus vías, las muñecas en la mesa de té, si eran niñas y les gustaba jugar con muñecas. No había necesidad de guardarlos pues enseguida regresarían a utilizarlos, estaba todo en una memoria cache de acceso rápido al mismo momento donde se quedaron. Si su mamá llegaba y recogía todo, les borraba el cache.

Si hacemos una analogía con la memoria humana, podríamos decir que es una especie de memoria a corto plazo.

Diferencia entre la memoria cache de una computadora y el cache de una web

La memoria cache de tu computadora o dispositivo sirve para que puedas acceder con mayor velocidad a tus herramientas (programas), pues almacena temporalmente datos procesados para que así, por ejemplo, puedas acceder más rápidamente a una archivo Excel que tenías guardado porque ciertos procesos están disponibles inmediatamente. Lo que hace es no tener que cargar desde el principio todo el procesamiento como si abrieras el archivo por primera vez.

El  Cache Web

Si hablamos del caché web el concepto se refiere a algo un poco distinto, pero la esencia es la misma. El caché para documentos web se refiere al almacenamiento de algunos archivos y recursos de un sitio web, como pueden ser imágenes, archivos CSS o archivos JS, en el navegador del usuario.

Se dice que se asignan elementos a cache cuando se le da la instrucción al navegador del usuario de descargar estos elementos para que sean guardados en una de las carpetas que se instalan en tu computadora cuando instalas el navegador.

A ver, ¿qué, cómo y por qué?

Es esta primera parte terminaremos de ver el Qué y declararemos el por qué, el cómo, lo revisaremos en la segunda parte de este post.

Cuando entras por primera vez a una página web, el servidor donde ésta se almacena da la instrucción a tu navegador de que descargue ciertos elementos para que el navegador pueda mostrarte la página web como se supone que debe verse.  Si ellos hablaran, dirían algo como:

-Navegador: Hola, me mandas por favor tu archivo /página.html

-Servidor- Claro, sólo descarga estos archivos CSS, estos JS y estas imágenes para que le muestres la página a tu usuario. Te los mando ligeros y pequeños para no gastar mucho mi ancho de banda. (Con una compresión gZip comprime más estos elementos)

-Navegador- Responde- Ok. Ya las he descargado y le estoy mostrando la página al usuario, gracias.

Sin embargo, cuando un navegador ha descargado en su cache estos elementos, no tiene sentido que los tenga que descargar cada vez que regresa a la misma página, a menos que se hayan actualizado (porque quizá cambiaron las imágenes o algunos estilos);  entonces, si el mismo navegador, o User-Agent (no teman al leer esta palabrita, más adelante entenderán qué es), regresa a la página en cuestión sucedería algo como lo siguiente:

-Navegador – Hola de nuevo, ¿me envías una vez más el archivo página.html por favor?

-Servidor – Permíteme, déjame revisar la fecha de actualización de página.html.

-Servidor – Ya lo verifiqué, no se ha modificado desde la última vez que lo revisaste, puedes usar la versión que tienes descargada en cache.

-Navegador – ¡Perfecto! Ya no es necesario que me la envíes, ya le estoy mostrando al usuario la versión que tengo cacheada.

proceso de cache web

Entonces, vamos a esquematizar para hacer esto más claro: cuando un navegador visita una página por primera vez realiza una petición al servidor de todos los elementos que necesita descargar para mostrar la página al usuario (el HTML, las imágenes, el logo, los archivos de estilos CSS y los JS). Lo que hace el servidor que almacena la página es mandar la instrucción de que descargue en su memoria cache web elementos que no sean tan dinámicos (que no cambien frecuentemente) como las imágenes, los estilos y los JS, así la próxima vez que reciba una visita de ese mismo navegador ya no tenga la necesidad de descargar todo de nuevo, quizá ahora sólo deba descargar el HTML.

Ya vamos descubriendo el por qué necesitamos hacer cacheable una web

Con lo que hemos leído hasta ahora, podemos entender que el objetivo “original” de hacer elementos cacheables es el disminuir el consumo de ancho de banda de los visitantes ( sus datos), sin embargo, a su vez es esencial para reducir el tiempo de carga de una página, y este aspecto es de vital importancia para SEO como lo mencionamos en la Guía Definitiva de Web Optimization. Síguenos en la segunda parte para que repasemos cómo es que se hace este proceso, es más técnico y te encontrarás con un poco de código, pero perderás el miedo a entender este proceso de una vez por todas.

Te invito votar por el contenido y a seguirme en Twitter.

[yasr_visitor_votes]