Almacenamiento en caché del navegador, explicado en lenguaje sencillo

noviembre 13, 2022 ganar dinero en línea tutorial blog 0 comentarios

Si aún no lo ha leído, le recomiendo que consulte la primera publicación de nuestra serie de optimización del rendimiento explicada ‘en lenguaje sencillo’ donde discutimos el almacenamiento en caché de páginas para WordPress.

Ahora vamos a abordar’almacenamiento en caché del navegador porque mucha gente los confunde.

Entonces, lo primero que debe saber es que el almacenamiento en caché de la página y el almacenamiento en caché del navegador son dos cosas diferentes.

El almacenamiento en caché es el proceso de «recordar» información para una recuperación rápida.
Tanto el almacenamiento en caché de la página como el almacenamiento en caché del navegador son métodos para recordar información, pero lo hacen en diferentes lugares.

El almacenamiento en caché de la página ocurre en su servidor, mientras que el almacenamiento en caché del navegador ocurre, sí, en el navegador. En concreto, en el navegador de cada visitante y en cada dispositivo con el que accede a tu sitio. Y solo para aclarar, por navegador me refiero al programa que usas para mirar páginas web, por ejemplo, Safari, Chrome, Internet Explorer, Firefox, etc.

¡Preparemos una página web!

Podemos imaginar el almacenamiento en caché del navegador en términos de preparar una comida. En este caso, la «comida» es la página web que desea ver y todos los archivos utilizados en esa página son los «ingredientes». Antes de que pueda preparar una comida, debe verificar que tenga todos los ingredientes correctos y que estén frescos. Luego combina todos esos ingredientes de una manera específica para crear la comida.

Si es la primera vez que prepara esta comida en particular, probablemente no tenga todos los ingredientes a mano en su cocina. Así que tendrás que ir a la tienda y comprarlos; esto, por supuesto, llevará algo de tiempo extra.

Ahora supongamos que quiere volver a comer esa misma comida mañana. Esta vez, debido a que ya tiene la mayoría o todos los ingredientes en su cocina, puede preparar la comida mucho más rápido.

Ok, en nuestra analogía, usa su navegador para solicitar una determinada página web, una comida específica. El navegador se pone en contacto con el servidor donde vive esa página web, solicita la receta para esa página y se le envía la lista de ingredientes. Estos ingredientes son básicamente HTML, CSS, JavaScript y archivos de imagen. Si es la primera vez que visita esta página web, su navegador no tendrá ninguno de los ingredientes a mano, por lo que tendrá que «ir de compras» y recuperarlos todos frescos del servidor.

Pero cuando vuelves a visitar esa misma página web, tu navegador no tiene que volver a ensamblar todo desde cero, puede usar los ingredientes que ya están almacenados y solo pedirle al servidor las cosas nuevas que no tiene.

Por eso, la primera vez que visitas una página web tarda más que las siguientes visitas.

Es posible que haya notado este fenómeno cuando realiza pruebas de velocidad repetidas o cuando usa la «vista repetida» en webpagetest.org. La vista de repetición siempre es más rápida porque muchos de los componentes ya se han descargado y no es necesario recuperarlos.

El objetivo del almacenamiento en caché del navegador es hacer que las vistas repetidas de una página web sean más eficientes.

Sin embargo, los ingredientes en tu cocina se vuelven rancios, ¿no es así?

Seguro que sí, al igual que los ingredientes de su página web. En términos de una página web, «obsoleto» significa que ha actualizado algo, lo que hace que la versión almacenada en caché esté desactualizada. Al igual que los alimentos, los ingredientes de la página web también deben tener una fecha de caducidad para que el navegador sepa si usarlos o si debe obtener una versión nueva al preparar la página web.

Cuando el navegador obtiene la lista de ingredientes del servidor, cada archivo tiene un «encabezado». Esta es solo información sobre ese archivo, incluido cuánto tiempo se puede considerar como nuevo.

Esto es como comprobar la fecha de caducidad o de caducidad de sus ingredientes. Ese vencimiento variará según el tipo de archivo. El objetivo es mantener los ingredientes frescos el mayor tiempo posible, para evitar esos viajes de compras que consumen mucho tiempo.

Entonces, el navegador verifica la caducidad de la lista de ingredientes y luego verifica su cocina (caché del navegador) para ver si lo que hay está obsoleto o no. Si la fecha de caducidad no ha pasado, el navegador no necesita descargar ese ingrediente, simplemente usa el que ya tiene, que es mucho más rápido.

A veces, en Pingdom/GT Metrix, etc., obtienes la recomendación:

“Los siguientes recursos almacenables en caché tienen una vida útil breve. Especifique un vencimiento de al menos una semana en el futuro para los siguientes recursos”

Lo que esto significa es que estos ingredientes tienen una vida útil corta, se vuelven obsoletos rápidamente, por lo que tendrá que comprarlos con frecuencia y eso es ineficiente.

Por lo general, es una buena idea tener una fecha de caducidad lejana para que su navegador no tenga que hacer el equivalente de ir a la tienda todo el tiempo para obtener una nueva versión de ese archivo.

¿Cuál es el papel de WP Rocket en la comida?

WP Rocket determina las fechas de caducidad óptimas de los ingredientes para que el chef (tu navegador) pueda hacer pocas compras. Hacemos eso con reglas en los archivos htaccess.

Solo puede establecer fechas de caducidad en los archivos servidos desde su sitio, desde su propia cocina, por así decirlo.
Cuando compra una comida preempaquetada en una tienda, debe confiar en sus ingredientes; es como cuando usa contenido de un tercero como Google, Facebook, etc. Está preempaquetado y no es de su cocina, por lo que puede No controlar la caducidad.

Google PageSpeed Insights y otras herramientas harán recomendaciones sobre estos archivos de terceros (vea la captura de pantalla a continuación), pero es imposible que los implemente:

Eliminar cadenas de consulta de recursos estáticos

Algunas de las herramientas comunes de prueba de velocidad tienen esto como una «recomendación».
Pero no lo recomendamos debido al almacenamiento en caché del navegador.

Están hablando de archivos que se ven así:
estilo.css?ver=1.1
La cadena de consulta es el signo de interrogación y la información que sigue (ver=1.1 en este ejemplo)

El problema es que si elimina las cadenas de consulta de recursos como archivos CSS, ya no podrá comunicarse con el navegador de cada usuario cuando se haya actualizado un archivo.

Digamos que tiene el archivo ‘style.css’ en su tema.
Actualizas ese archivo con tu nuevo estilo elegante, pero el nombre del archivo no cambia, sigue siendo style.css.
Luego vas a ver tu sitio web y ves tu estilo antiguo, no el nuevo. Borras tu caché de WP Rocket, pero aún así, ves el estilo antiguo.

Esto se debe a que su navegador ya almacenó una copia del ingrediente, style.css, que está utilizando. Borrar el caché de WP Rocket no ayuda porque el archivo está en su computadora (no en el servidor donde vive el caché de WP Rocket), en la cocina de su navegador.

Entonces, si vacía el caché de su navegador, su navegador se verá obligado a descargar style.css nuevamente, y luego verá un nuevo estilo.

Pero, ¿qué pasa con todos esos otros visitantes de su sitio? Es importante recordar que el almacenamiento en caché del navegador ocurre para cada usuario, en cada navegador/dispositivo que utilizan. No puede acceder a su computadora y hacer que borre el caché de su navegador, y la persona promedio no hace eso muy a menudo, si es que alguna vez lo hace. Por lo tanto, sin saberlo, se quedarán atrapados con el viejo y obsoleto style.css.

Ahora, si usa una cadena de consulta para versionar el nombre del archivo, puede resolver este problema.
Entonces, en lugar de style.css, tienes style.css?ver=1
Luego realiza un cambio en ese archivo y el nombre del archivo cambia a: style.css?ver=2

El navegador lo ve como un archivo diferente y obtiene la nueva versión. ¡Auge! Tu nuevo estilo elegante está disponible para que todos lo vean.

Por lo tanto, tener la cadena de consulta tiene un propósito importante, y su sitio no será más rápido si lo elimina (adelante, pruébelo usted mismo), entonces, ¿por qué molestarse?

Eso concluye el almacenamiento en caché del navegador: si tiene preguntas, ¡háganoslo saber en los comentarios!
¿Qué otro aspecto de la optimización de la velocidad le gustaría que se explicara en esta serie?