La implementación del almacenamiento en caché del navegador en su sitio web de WordPress mejora el rendimiento para los visitantes que visitan varias páginas o visitan su sitio web varias veces.
Permite que su computadora almacene archivos de uso común en su navegador, lo que significa que las páginas se pueden mostrar más rápido en esas visitas repetidas.
Almacenamiento en caché del navegador versus almacenamiento en caché de páginas
Es posible que ya haya oído hablar del almacenamiento en caché de páginas. Esto está relacionado con el almacenamiento en caché del navegador, pero no es lo mismo.
El almacenamiento en caché es el proceso de «recordar» información para una recuperación rápida.
Tanto el almacenamiento en caché de páginas como el almacenamiento en caché del navegador son métodos para recordar información, pero la almacenan en diferentes lugares.
El almacenamiento en caché de la página se realiza en su servidor, mientras que el almacenamiento en caché del navegador se realiza, sí, en el navegador. Específicamente, en el navegador de cada visitante y en cada dispositivo desde el que accede a su sitio.
Y solo para aclarar, por navegador me refiero al programa o aplicación que usas para mirar páginas web, por ejemplo, Safari, Chrome, Internet Explorer, Firefox, etc.
¡Cocinemos 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 poder preparar una comida, debes comprobar que tienes todos los ingredientes adecuados y que están frescos. Luego combinas todos esos ingredientes de una manera específica para crear la comida.
Si es la primera vez que preparas esta comida en particular, probablemente no tengas todos los ingredientes a mano en tu cocina. Así que tendrás que ir a la tienda y comprarlos; esto, por supuesto, llevará algo de tiempo extra.
Ahora digamos que quieres volver a comer la misma comida mañana. Esta vez, como ya tienes la mayoría o todos los ingredientes en tu cocina, podrás preparar la comida mucho más rápido.
El almacenamiento en caché del navegador hace que «preparar» una página web más rápido en visitas repetidas Haga clic para twittear
En nuestra analogía, usted utiliza su navegador para solicitar una determinada página web, una comida específica.
El navegador se pone en contacto con el servidor donde reside esa página web, solicita la receta para esa página y recibe 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 visitas esa misma página web nuevamente, tu navegador no tiene que volver a ensamblar todo desde cero, puede usar los ingredientes que ya está almacenados y solo preguntarle al servidor las cosas nuevas que no tiene.
Por eso, la primera vez que visitas una página web tardas más que las siguientes visitas.
Es posible que hayas notado este fenómeno cuando realizas pruebas de velocidad repetidas o cuando utilizas la «vista repetida» en webpagetest.org. La vista repetida siempre es más rápida porque muchos de los componentes ya se han descargado y no es necesario recuperarlos de nuevo.
El objetivo del almacenamiento en caché del navegador es hacer que las vistas repetidas de una página web sean más eficientes.
Pero los ingredientes de tu cocina se vuelven rancios, ¿no?
Seguro que sí, y también los ingredientes de su página web. En términos de una página web, «obsoleto» significa que has actualizado algo, lo que hace que la versión almacenada en caché quede obsoleta.
Al igual que la comida, los ingredientes de la página web también deben tener una fecha de caducidad para que el navegador sepa si usarlos o si 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 durante cuánto tiempo se puede considerar que está actualizado.
Esto puede ser comunicado ya sea por un cache-control encabezado configurado en segundos, o un expires encabezado utilizando un período de tiempo específico. Puedes ver ambos, tal como aparecen en el navegador, a continuación:
Esto es como verificar la fecha de “vendida” o “caducidad” de sus ingredientes. Ese vencimiento variará según el tipo de expediente. El objetivo es mantener los ingredientes frescos el mayor tiempo posible para evitar esos costosos viajes de compras.
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 utiliza el que ya tiene, que es mucho más rápido.
El almacenamiento en caché del navegador agrega fechas de caducidad a los archivos del sitio web para mayor eficiencia y frescura Haga clic para twittear
A veces, en Google PageSpeed u otras herramientas, obtienes esta recomendación:
“Ofrezca activos estáticos con una política de caché eficiente«
Lo que esto quiere decir es que estos ingredientes tenían una vida útil corta, se vuelven obsoletos rápidamente, por lo que tendrás que comprarlos con frecuencia y eso es ineficiente.
Por lo general, es una buena idea tener una fecha de vencimiento lejana para que su navegador no tenga que hacer el equivalente a ir a la tienda todo el tiempo para obtener una nueva versión de ese archivo.
Lea nuestra guía sobre cómo habilitar el almacenamiento en caché del navegador en WordPress.
¿Qué pasa si cambio un archivo y la regla de caché del navegador aún no ha caducado?
Pregunta muy válida! Existe un mecanismo para este proceso que le permite al navegador saber «oye, es posible que hayas almacenado en caché este archivo, pero necesito que lo busques nuevamente». A esto se le llama «romper» la memoria caché del navegador.
El navegador no puede comprobar el contenido del archivo para ver si es diferente del contenido del archivo que ya tiene en su caché. Pero si detecta un nombre de archivo diferente, asumirá que el archivo es nuevo y lo descargará nuevamente.
En el lado del sitio web, podemos usar cadenas de consulta para esto. Probablemente hayas visto URL de archivos como esta:
https://example.com/wp-content/themes/astra-child/style.css?ver=4.0.3
La parte al final, después del ?se llama cadena de consulta.
Al cambiar la cadena de consulta, el navegador entenderá que esto style.css El archivo ha sido modificado y, por lo tanto, descargará la nueva versión del mismo, incluso si aún no se ha cumplido el valor de la regla de caché del navegador.
De esta manera, puede asegurarse de que todos los cambios de código nuevos se envíen a todos los visitantes y no dependan de que los visitantes borren la caché de su propio navegador.
Cómo deshabilitar el almacenamiento en caché del navegador en WordPress
Temas y complementos
No debería necesitar deshabilitar el almacenamiento en caché del navegador en WordPress si los complementos que está utilizando siguen las mejores prácticas o si usted, como desarrollador, lo está haciendo.
El problema que pueden tener las personas es que hacen un cambio, digamos, en un archivo CSS, pero no lo ven reflejado en el sitio porque la versión anterior está almacenada en caché en su navegador.
Esto sólo sucederá si no ha versionado correctamente sus archivos. Eso significa agregar una cadena de consulta que cambia cuando actualiza el archivo.
Por ejemplo, cambias style.css?ver=1 a style.css?ver=2
En realidad, no importa lo que venga después de ?
La cadena de consulta puede ser cualquier cosa, siempre que sea diferente a la anterior.
Al hacer eso, estás «rompiendo el caché del navegador». Eso significa que el navegador reconocerá que se trata de un archivo nuevo y lo descargará nuevamente, permitiéndole ver los cambios. Si continúa usando exactamente el mismo nombre de archivo, el navegador no entenderá que hay contenido nuevo, por lo que no lo descargará nuevamente.
Los temas y complementos de WordPress tienen esto implementado y, en la mayoría de los casos, las cadenas de consulta son el número de versión que se actualiza cuando se actualiza el tema/complemento.
Si está creando su propio tema personalizado, asegúrese de editar el número de versión del tema en su style.css cuando haces una actualización:
Esto cambiará la cadena de consulta en los archivos y todos los cambios estarán disponibles.
Si por alguna razón no puedes hacer que esto funcione, puedes probar el complemento Cachebuster. Este es un complemento muy simple que agrega la hora de modificación del archivo como una cadena de consulta a archivos CSS y JS. Cuando se actualice el archivo, la cadena de consulta cambiará, actualizando el caché de todos los visitantes del sitio.
Archivos multimedia
Otros archivos que podrían almacenarse en caché del navegador son archivos multimedia como imágenes y archivos PDF. Esto puede ser más complicado porque no tienen ninguna cadena de consulta para versionarlos, de forma predeterminada, y no existe una forma sencilla de WordPress para agregarlos y cambiarlos automáticamente.
En la mayoría de los casos, no actualiza este tipo de archivos con frecuencia. Pero si necesita actualizar un archivo y no cambia el nombre del archivo, se encontrará con un problema.
Para ser honesto, no existe una buena manera de manejar esto en WordPress.
Algunas personas quieren desactivar completamente el almacenamiento en caché del navegador para estos tipos de archivos agregando algo como lo siguiente a su archivo htaccess:
<FilesMatch ".(gif|jpe?g|png|webp)$">
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0"
</IfModule>
</FilesMatch>
Code language: HTML, XML (xml)Sin embargo, eso es deshabilitar el almacenamiento en caché del navegador para todos esos tipos de archivos, lo cual, en mi opinión, es excesivo.
Podrías usar una regla más específica para apuntar a un archivo específico, como esta:
<IfModule mod_headers.c>
<FilesMatch "image.jpg">
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</FilesMatch>
</IfModule>
Code language: PHP (php)En la segunda línea reemplace image.jpg con el nombre del archivo que desea mantener actualizado.
Eso todavía no es ideal porque no habrá almacenamiento en caché del navegador para ese archivo.
La mejor solución sería modificar el nombre del archivo.
En ese caso, deberá asegurarse de actualizar también los enlaces que apunten a él para evitar un enlace roto. Puede utilizar el complemento Habilitar reemplazo de medios para ayudar con eso.
Si está vinculando a un PDF, puede agregar una cadena de consulta al archivo manualmente. Para hacer eso en el editor de bloques, vaya a editar visualmente y edite manualmente la URL para agregar la cadena de consulta:
Cómo borrar el caché de tu navegador en WordPress
Si ha seguido el artículo hasta ahora, ahora se dará cuenta de que esta pregunta es un poco incorrecta. Como hemos aprendido, el caché del navegador no es específico de WordPress.
El caché del navegador se encuentra en el dispositivo de cada persona, por lo que no puedes borrarlo de WordPress.
Cada persona tiene que borrar la caché de su propio navegador en su propio dispositivo. A continuación se explica cómo hacerlo en los principales navegadores.