El caché del navegador en caché, explicado en inglés simple

Si aún no lo ha leído, le recomiendo que consulte la primera publicación en nuestra serie de optimización de rendimiento explicada “en inglés simple”, donde discutimos el almacenamiento de la página de WordPress. Ahora nos acercaremos al “almacenamiento en caché del navegador”, porque muchas personas confunden a los dos. Entonces, lo primero que debe saber es que el almacenamiento de la página de la página y la memoria del navegador son dos cosas diferentes. La memorización de caché es el proceso de “memorizar” información para una recuperación rápida. Tanto la memoria de la página de la página como el navegador son métodos para memorizar la información, pero lo hacen en diferentes lugares.
La memoria de la página de la página tiene lugar en su servidor, mientras que el almacenamiento del navegador ocurre, sí, en el navegador. Específicamente, en el navegador de cada visitante y en cada dispositivo con el que accede a su sitio. Y solo para aclarar, a través del navegador me refiero al programa que utiliza para ver las páginas web, por ejemplo, Safari, Chrome, Internet Explorer, Firefox, etc. ¡Vamos a cocinar una página web! Podemos imaginar memorizar el navegador en el caché en la preparación de una comida. En este caso, la “tabla” es la página web que desea ver, y todos los archivos utilizados en esa página son los “ingredientes”. Antes de que pueda hacer una comida, debe verificar si tiene todos los ingredientes correctos y está fresco. Luego combine todos estos ingredientes de una manera específica para crear la tabla.
Si esta es la primera vez que haces esta comida, probablemente no tengas todos los ingredientes a mano en la cocina. Por lo tanto, tendrá que ir a la tienda y comprarla, por supuesto, esto llevará un tiempo extra. Ahora suponga que quiere volver a tomar la misma comida mañana. Esta vez, debido a que ya tiene la mayoría o todos los ingredientes en la cocina, puede preparar la comida mucho más rápido. Ok, entonces en nuestra analogía, use el navegador para solicitar una determinada página web, una cierta comida. El navegador contacta con el servidor en el que se encuentra la página web, solicita la receta para esa página y recibe la lista de ingredientes. Estos ingredientes son prácticamente archivos HTML, CSS, JavaScript e Image. Si esta es la primera vez que accede a esta página web, su navegador no tendrá ninguno de los ingredientes a mano, por lo que debe “ir de compras” y recuperarlos todos recién llegados del servidor. Pero cuando visita la misma página web, Su navegador no tiene que volver a montar todo desde cero, puede usar los ingredientes que ya ha almacenado y preguntarle al servidor solo las cosas nuevas que no tiene. Por lo tanto, la primera vez que accede a una página web lleva más tiempo que las próximas visitas. Es posible que haya notado este fenómeno al hacer pruebas de velocidad repetidas o usar “visualización repetida” en webpageTest.org. La visualización repetida siempre es más rápida, porque muchos de los componentes ya se han descargado y no deben tomarse frescos.
El propósito de memorizar el navegador en caché es hacer vistas repetidas de una página web más eficiente. Sin embargo, los ingredientes en su cocina se vuelven desactualizados, ¿no? Ciertamente lo hago, así como los ingredientes de su página web. En cuanto a una página web, “obsoleto” significa que ha actualizado algo, lo que hace que la versión se almacene en caché. Al igual que los alimentos, los ingredientes de la página web también deben tener una fecha de vencimiento para que el navegador sepa si usarlos o si obtiene una versión nueva al cocinar la página web. Cuando el navegador recibe la lista de ingredientes en el servidor, cada archivo tiene un “encabezado”. Estas son solo algunas información sobre ese archivo, incluido cuánto tiempo se puede considerar fresco. Esto es como si verifique la fecha de “venta” o “vencimiento” de sus ingredientes. Este vencimiento variará según el tipo de archivo. El propósito es mantener los ingredientes frescos el mayor tiempo posible, para evitar esos costosos viajes de compras. Entonces, el navegador verifica el vencimiento de la lista de ingredientes y luego verifica su cocina (caché del navegador) para ver si lo que está allí está desactualizado o no. Si la fecha de vencimiento no ha pasado, el navegador no debe descargar ese ingrediente, sino que solo usa el que ya tiene, que es mucho más rápido.
A veces, en Pingdom/GT Manux, etc., recibe la recomendación: “Los siguientes recursos de almacenamiento en caché tienen una corta vida de frescura. Especifique un vencimiento de al menos una semana en el futuro para los siguientes recursos ”. Entonces, en general, es una buena idea tener una fecha de vencimiento distante para que su navegador no tenga que hacer el equivalente de correr en la tienda todo el tiempo para una nueva versión de ese archivo. Que es el papel de WP Rocket ¿en la mesa? WP Rocket determina los datos de vencimiento óptimos para los ingredientes para que el chef (su navegador) pueda hacer algunos viajes de compras. Hacemos esto con reglas de archivos htaccess. Puede establecer datos de vencimiento solo para los archivos servidos desde su sitio, desde su propia cocina, si lo desea. Cuando compra una prima de mesa en una tienda, debe confiar en sus ingredientes, al igual que cuando usa contenido de un tercero, como Google, Facebook, etc. Está prepacado y no es de la cocina, por lo que no puede controlar el vencimiento.
Google PageSpeed ​​Insights y otras herramientas harán recomendaciones sobre estos archivos de terceros (ver captura de pantalla a continuación), pero es imposible implementarlos:

Elimine las cadenas de consulta de los recursos estáticos, algunas de las herramientas de prueba de velocidad habituales tienen esto como una “recomendación”. Pero no lo recomendamos debido al almacenamiento del navegador. Hablan de archivos que se ven así: style.css? Ver = 1.1 La cadena de consulta es el signo de interrogación y la información después (ver = 1.1 en este ejemplo) el problema es que si elimina las cadenas de interrogación como archivos CSS, Ya no puede comunicarse con el navegador de cada usuario cuando se ha actualizado un archivo. Suponga que tiene el archivo “style.css” en su tema. Actualice ese archivo con el nuevo estilo, pero el nombre del archivo no cambia, es Still Style.css. Luego va a revisar su sitio web y ver su antiguo estilo, no el nuevo. Eliminas tu memoria de cohete WP de caché, pero aún ves el estilo antiguo. Esto se debe a que su navegador ya ha almacenado una copia del ingrediente, style.css, que utiliza. Eliminar la memoria del cohete WP WP no ayuda porque el archivo está en su computadora (no en el servidor donde la memoria WP Rocket Cache) está en la cocina de su navegador.
Entonces, si vacía el caché del navegador, el navegador se verá obligado a descargar style.css, y luego verá un nuevo estilo. Pero, ¿qué pasa con todos los demás visitantes de su sitio? Es importante tener en cuenta que la memorización del navegador tiene lugar para cada usuario, en cada navegador/dispositivo que utiliza. No puedes llegar a su computadora y hacer que borraran el caché de su navegador, y el hombre común no hace esto muy a menudo si alguna vez. Entonces, sin querer, permanecerán atrapados con el viejo y anticuado estilo. Ahora, si usa una cadena de consulta para la versión del nombre del archivo, puede resolver este problema. Entonces, en lugar de style.css, ¿tiene style.css? Ver = 1, luego haga un cambio del archivo y el nombre del archivo cambia en: style.css? Ver = 2 El navegador lo ve como un archivo diferente y recibe la nueva versión . ¡Andar de forma vacilante! Su nuevo estilo elegante está disponible para todos. Entonces, tener la cadena de consulta tiene un propósito importante, y su sitio no será más rápido si la elimina (continúa, prueba solo), entonces, ¿por qué molestarte? Eso termina el almacenamiento del navegador: si tiene alguna pregunta, ¡háganos saber en los comentarios! ¿Qué otro aspecto de la optimización de velocidad le gustaría explicar en esta serie? Consulte todas las tarifas de nuestra serie de optimización de rendimiento:
Cache en la página de WordPress en caché

Lazyload tus fotos en WordPress