¿Pues no resulta que hay una caché que se llama bfcache, no funciona en mi WordPress y yo sin enterarme?

El botón de atrás del navegador lo usa la gente constantemente, y tu WordPress probablemente lo está entorpeciendo sin que te hayas enterado todavía. La razón tiene nombre: bfcache.

Qué es bfcache y para qué sirve

Back/Forward Cache, que todo el mundo llama bfcache, es una optimización que llevan todos los navegadores modernos desde hace años (Chrome desde 2021, Firefox y Safari desde antes).

Cuando sales de una página, el navegador no se la carga, no la borra, sino que la congela en memoria tal cual estaba, con el DOM, el JavaScript y todo lo que tenía cargado. De este modo, si haces clic para volver atrás, en vez de descargar la página desde el servidor y procesarla de nuevo la descongela y te la muestra al instante, sin red, sin JavaScript, sin nada, en milisegundos.

Es como como poner en pausa un episodio de tu serie favorita. Si cuando sales del sofá apagas la tele y cuando vuelves la enciendes desde cero, tardas lo que tarda en arrancar, pero si la dejas en pausa al segundo ya tienes la imagen.

Los datos de Chrome dicen que 1 de cada 10 navegaciones en escritorio y 1 de cada 5 en móvil son p’alante o p’atrás (forward o back dicho en fino) . Eso es mucho tráfico en el que la diferencia entre carga instantánea y carga normal es la que hay entre parecer rápido y parecer lento.

Por qué WordPress desactiva bfcache por defecto

Esto seguro que no te lo esperabas, y es que resulta que cuando hay un usuario conectado,WordPress llama automáticamente a la función nocache_headers(), que añade Cache-Control: no-store a la cabecera de la respuesta.

Esa directiva es básicamente decirle al navegador «no guardes esta página en ningún sitio». El navegador obedece, y cuando el usuario sale de la página se la carga en vez de congelarla, así que cuando pulsa atrás tiene que descargarla entera otra vez.

El razonamiento original era de privacidad, y tiene su lógica, porque si alguien conectado cierra sesión y otra persona pulsa atrás en el mismo ordenador podría ver el contenido del usuario conectado desde la caché.

Esto era un argumento razonable para webs de 2008 en los ordenadores compartidos del locutorio de la esquina (igual ni sabes de lo que te estoy hablando) o cuando solo había un ordenador en casa, y compartido por toda la familia.

Hoy, con las salvaguardas que tienen los navegadores modernos para gestionar exactamente ese caso, y que casi todos tenemos ordenador propio, el riesgo real es mucho menor, y la penalización de rendimiento la pagan todos los usuarios conectados en cada navegación.

Si tienes una tienda online con WooCommerce, por ejemplo, se agrava el problema porque también envía no-store en el carrito, el pago y las páginas de las cuentas de usuario, listas de deseos, todas. En una tienda, la bfcache inactiva es un problema de rendimiento más que notable en algunos casos.

Y por si fuera poco, algunos plugins de estadísticas y seguimiento usan el evento unload de JavaScript, que es otra causa habitual de invalidar la bfcache en Chrome y Firefox.

¿Cómo sé si no me está funcionando bfcache en mi web?

La forma más visual de saberlo es mediante es PageSpeed Insights, porque si una página no puede restaurarse desde bfcache aparece el aviso «La página evitó la restauración de la caché de avance/retroceso» con la causa exacta listada debajo. Pasa la URL de tu página de inicio y la del carrito si tienes tienda online, y mira si aparece ese aviso.

La forma más directa, no obstante, son las Chrome DevTools. Abre las herramientas de desarrollador, ve a la pestaña Application, busca el apartado Background services y ahí tienes Back/forward cache. Navega a la página que quieres comprobar, pulsa Run test, y Chrome te dice si la página entraría en bfcache o por qué no puede hacerlo.

Si el motivo que aparece es cache-control: no-store, lo más habitual con WordPress, estás exactamente en el caso que describe este artículo. Si el motivo es otro al menos tienes información concreta de qué plugin o configuración lo está causando.

¿Se puede activar bfcache en WordPress?

Pues claro, sino para qué estamos aquí, no te habría soltado este rollo si no tuviese solución. ¡Qué poco me conoces si pensaste eso!

¿Querías arroz? pues dos tazas…

Activar bfcache en WordPress con un plugin

En WordPress.org hay un plugin gratuito llamado Instant Back/Forward que elimina la directiva no-store de las cabeceras cuando la manda WordPress y añade una cookie de sesión para proteger el caso del usuario que cierra sesión en un ordenador compartido.

Es instalar, activar y listo, sin ajustes que tocar. Para ver el efecto tienes que cerrar sesión y volver a entrar con la casilla «Recuérdame» marcada.

Activar bfcache en WordPress con un código

Si prefieres no añadir otro plugin tienes este código hace lo mismo de forma controlada:

/**
 * Quitar no-store de las cabeceras Cache-Control para permitir bfcache
 * Solo quita no-store,mantiene intacta no-cache y el resto de directivas
 */
function ayudawp_enable_bfcache( $headers ) {
    if ( isset( $headers['Cache-Control'] ) ) {
        $headers['Cache-Control'] = preg_replace(
            '/,?\s*no-store/i',
            '',
            $headers['Cache-Control']
        );
    }
    return $headers;
}
add_filter( 'wp_headers', 'ayudawp_enable_bfcache' );

Lo que hace es eliminar el no-store de las cabeceras que WordPress va a enviar, sin tocar el resto de directivas.

Si tienes no-cache, no-store, must-revalidate, te queda no-cache, must-revalidate, que sigue siendo restrictivo en cuanto a caché de red pero ya no bloquea la bfcache del navegador.

Ojo con las webs donde los usuarios manejan datos sensibles en ordenadores compartidos, ahí sí conviene pensarlo dos veces. Para la mayoría de blogs, tiendas normales y webs de servicios, el riesgo es mínimo y la ganancia de rendimiento es real.

Si tienes WooCommerce, pruébalo antes de darlo por bueno

El carrito y la página de finalizar compra tienen estado real y ahí es de una importancia vital. Si alguien añade algo al carrito, sale y vuelve con bfcache, el estado de la página que ve puede no coincidir con el estado real del servidor si ha pasado tiempo o si hay cambios de inventario.

El plugin Instant Back/Forward gestiona correctamente el caso de sesión, pero antes de activarlo en una tienda hazle una prueba rápida. Añade algo al carrito, navega a otra página, pulsa atrás y verifica que funciona todo como debe, el carrito está como debe.

En la mayoría de instalaciones estándar de WooCommerce funciona sin problemas, pero si tienes plugins de inventario en tiempo real o precios dinámicos, toca revisarlo todo.

¿Lo has aplicado y sigue sin funcionar bfcache?

Quitar el no-store de WordPress puede no ser suficiente si algún plugin sigue invalidando bfcache por su cuenta. Los candidatos más habituales son estos:

• Plugins de analítica que usan el evento unload o beforeunload de JavaScript para enviar datos al cerrar la página (píxel de Meta, versiones antiguas de Google Analytics, algunos plugins de mapas de calor y similares).
• Plugins de chat en vivo que mantienen conexiones WebSocket abiertas.
• Plugins que usan window.opener.

El propio panel de Application te da el motivo exacto, así que no tienes que adivinar nada, Chrome te señala directamente al culpable.

La bfcache se ocupa de las páginas que ya has visitado, las Speculation Rules se ocupan de las que todavía no has visto. Son dos cosas distintas, pero que van muy bien juntas, harás bien en conocerlas ambas.

Si en tu caso el motivo del bloqueo es otro diferente al no-store me lo cuentas en los comentarios y le echamos un ojo.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!