Anyone faced a weird WP Rocket + Elementor menu/Filter cache issue? - ilustracion

WP Rocket + Elementor: el conflicto de caché explicado

El conflicto entre WP Rocket y Elementor sobre la caché del menú es uno de los más reportados en foros de WordPress en 2026: cuando ambos plugins tienen sus sistemas de caché activos al mismo tiempo, los menús dejan de responder, los filtros muestran resultados viejos y los elementos dinámicos quedan congelados en el primer valor que guardó la caché. La solución no es desactivar ninguno de los dos, sino configurarlos para que no se pisen.

En 30 segundos

  • WP Rocket y Elementor tienen dos sistemas de caché independientes que pueden colisionar, especialmente con contenido dinámico y menús móviles.
  • La función «Delay JavaScript Execution» de WP Rocket es la principal culpable de que los menús de Elementor no respondan al primer click.
  • Element Cache de Elementor rompe widgets con campos ACF, etiquetas dinámicas o datos de usuario porque sirve el HTML viejo.
  • La configuración correcta requiere ajustes en los dos lados: no alcanza con tocar solo WP Rocket o solo Elementor.
  • Con las exclusiones bien puestas, los dos conviven sin drama y la performance mejora de verdad.

Elementor es un constructor de páginas web para WordPress desarrollado por Elementor Ltd que permite a los usuarios crear y diseñar sitios web mediante una interfaz de arrastrar y soltar sin necesidad de escribir código.

El conflicto entre WP Rocket y Elementor: qué está pasando

WP Rocket es un plugin de caché de página completa para WordPress: guarda el HTML generado por PHP y lo sirve estático, sin ejecutar consultas a la base de datos ni cargar PHP en cada visita. Elementor, por su parte, tiene su propio sistema llamado Element Cache que guarda el output de cada widget por separado. Cuando los dos están activos, tenés dos capas de caché que no se hablan entre sí.

El problema base es de coordinación. WP Rocket no sabe que Elementor actualizó un widget. Elementor no sabe que WP Rocket tiene guardada una versión antigua de la página. El resultado: el usuario ve el menú que existía hace dos horas, el filtro que devuelve productos que ya no están en stock, o el header que no despliega en móvil porque el JavaScript que lo activa llegó tarde.

Esto no es un bug nuevo. Los issues #1485 y #3327 del repositorio de WP Rocket en GitHub documentan variantes de este problema desde versiones anteriores, y la comunidad sigue reportando casos en 2026 porque la combinación es muy común y la configuración por defecto de ambos plugins no es la óptima.

Problema 1: el menú que no responde (culpable: Delay JavaScript)

Ponele que armaste un header con Elementor Pro, con menú hamburguesa en móvil, megamenú en desktop, y todo funciona perfecto en local. Lo subís al servidor con WP Rocket activo, y de repente el botón de hamburguesa no abre nada. En desktop el hover de los submenús se activa con medio segundo de retraso. En móvil, directamente nada.

La causa más frecuente es la opción «Delay JavaScript Execution» (Retrasar Ejecución de JavaScript) de WP Rocket. Esta función, pensada para mejorar el LCP y el TBT de Core Web Vitals, retrasa la carga de todos los scripts de JavaScript hasta que el usuario interactúa con la página. El problema es que los scripts del menú de Elementor quedan atrapados en esa cola de espera, y cuando el usuario hace click en la hamburguesa, el listener que debería responder todavía no se cargó.

El efecto es peor en móvil porque los eventos táctiles tienen timing diferente al mouse. Un click en desktop puede «esperar» el script sin que el usuario note el delay de 200-300ms. En móvil, si el usuario toca y no pasa nada al instante, asume que la página está rota. Lo explicamos a fondo en cómo funciona Elementor en WordPress.

Problema 2: filtros y widgets con datos obsoletos

Este es el más molesto en sitios con WooCommerce o portfolios filtrados. Element Cache guarda el HTML de cada widget de Elementor. Si ese widget usa campos ACF, etiquetas dinámicas, datos del usuario logueado, o consultas custom a la base de datos, la caché devuelve el HTML viejo hasta que alguien la borra manualmente.

¿Y qué pasó cuando lo probaron en producción? Exacto, los filtros de productos seguían mostrando stock de la semana anterior porque ni WP Rocket ni Element Cache sabían que el inventario había cambiado.

Otro caso frecuente: cuando Elementor regenera sus archivos CSS (por ejemplo, después de cambiar un color global), WP Rocket puede no estar al tanto de ese cambio si la opción de limpieza automática no está bien configurada. El resultado es que la página sirve el HTML viejo de WP Rocket que apunta a la versión anterior del CSS de Elementor, que ya fue reemplazada. El diseño queda roto hasta que limpiás la caché manualmente.

Problema 3: la caché se borra demasiado seguido

El tercer problema es el opuesto: en vez de servir datos viejos, WP Rocket borra la caché con demasiada frecuencia porque ciertos hooks de Elementor la disparan en cada actualización de widget.

Si tenés el sitio configurado para que WP Rocket limpie la caché cada vez que se guarda un post, y Elementor está guardando cambios de widgets en segundo plano, podés terminar con la caché de WP Rocket vaciándose constantemente y perdiendo todo el beneficio de performance. Este escenario está documentado en el issue #1485 de GitHub y afecta principalmente a sitios con Elementor Pro donde el editor está abierto mientras el sitio tiene tráfico real.

Configuración recomendada en WP Rocket

Según la documentación oficial de WP Rocket para usar con Elementor, hay ajustes específicos que hay que revisar antes de culpar a ninguno de los dos plugins.

Delay JavaScript: excluir los scripts de Elementor

Si vas a usar «Delay JavaScript Execution», no la actives de forma global sin exclusiones. Tenés que agregar manualmente los scripts de Elementor a la lista de exclusiones:

  • /wp-content/plugins/elementor/assets/js/frontend.min.js
  • /wp-content/plugins/elementor-pro/assets/js/frontend.min.js
  • elementor/frontend (como patrón de URL)

WP Rocket tiene una función llamada One-Click Exclusions que ya incluye a Elementor entre sus exclusiones predefinidas. Verificá que esté marcada. Complementá con impacto del caché en tu SEO.

Combinar CSS: no lo hagas

La opción de combinar archivos CSS de WP Rocket genera problemas con Elementor porque Elementor usa su propia lógica para generar CSS inline y externo por widget. Si WP Rocket intenta combinar esos archivos, el resultado es impredecible. Con HTTP/2 la combinación de CSS ya no tiene el beneficio de performance que tenía antes (HTTP/2 maneja múltiples archivos en paralelo sin overhead), así que desactivá esa opción sin culpa.

Minificación de JavaScript: con cuidado

La minificación de JS puede romper scripts de Elementor si hay caracteres especiales o concatenaciones que el minificador no maneja bien. Si después de activarla algo se rompe, desactivala y probá sin ella. La ganancia de minificar JS es marginal comparada con el riesgo de romper funcionalidad.

Configuración recomendada en Elementor

Element Cache: cuándo activarlo y cuándo no

Element Cache es seguro únicamente para widgets 100% estáticos: texto, imagen, iconos, secciones sin condiciones. Si el widget usa:

  • Campos ACF (Advanced Custom Fields)
  • Etiquetas dinámicas de Elementor Pro
  • Datos del usuario logueado (nombre, carrito, favoritos)
  • Consultas dinámicas (posts recientes, WooCommerce products)
  • Cualquier shortcode que genere output variable

Desactivá Element Cache. No vale la pena el riesgo de mostrar datos incorrectos para ganar unos milisegundos de TTFB.

CSS Print Method: usá «External File»

En Elementor > Ajustes > Avanzado, la opción «CSS Print Method» tiene dos valores: Internal Embedding (CSS inline en el HTML) y External File (CSS en archivos .css separados). Para trabajar bien con WP Rocket, usá External File. Así WP Rocket puede cachear y versionar los archivos CSS de Elementor correctamente, y cuando Elementor los regenera, la URL cambia y los navegadores descargan la versión nueva en vez de servir la cacheada.

Regenerar CSS después de cada cambio importante

Después de cambiar fonts globales, colores, o cualquier configuración de Kit de Elementor, andá a Elementor > Herramientas > Regenerar Archivos CSS. Hacé eso antes de limpiar la caché de WP Rocket. El orden importa: primero regenerás el CSS de Elementor, después limpiás la caché de WP Rocket para que sirva el HTML que apunta a los archivos CSS nuevos. Más contexto en alternativas a Elementor más optimizadas.

Paso a paso: cómo resolver el problema de tu menú específico

Si tu menú de Elementor no funciona con WP Rocket activo, seguí este checklist en orden:

  • Paso 1: Limpiá todas las cachés juntas: WP Rocket (Dashboard > WP Rocket > Vaciar caché), Elementor (Elementor > Herramientas > Regenerar), y la caché del navegador.
  • Paso 2: Probá en una pestaña de incógnito sin extensiones del navegador. Si el menú funciona ahí, el problema era el navegador, no el servidor.
  • Paso 3: Si sigue roto en incógnito, andá a WP Rocket > Optimización de Archivos > desactivá temporalmente «Delay JavaScript Execution». Recargá. Si el menú funciona, el problema es ese ajuste.
  • Paso 4: Con «Delay JavaScript» desactivado confirmado como causa, volvé a activarlo pero agregá las exclusiones de Elementor mencionadas arriba.
  • Paso 5: Si el menú solo falla en móvil, verificá que no haya CSS de Elementor que esconda el menú mobile antes de que cargue el JavaScript. A veces el problema es de CSS y no de JavaScript.
  • Paso 6: Si persiste, revisá la consola del navegador (F12 > Console) en móvil o con Device Mode. Los errores de JavaScript te van a decir exactamente qué script está fallando.

Un dato que muchos pasan por alto: si usás un CDN (Cloudflare, por ejemplo) además de WP Rocket, tenés una tercera capa de caché que puede servir versiones viejas aunque hayas limpiado las dos primeras. Limpiá también la caché del CDN.

Tabla de configuración: qué activar y qué no

OpciónPluginRecomendaciónMotivo
Delay JavaScript ExecutionWP RocketActivar con exclusionesSin excluir Elementor, rompe menús y sliders
Combinar CSSWP RocketDesactivarIncompatible con la lógica de CSS de Elementor
Minificar JavaScriptWP RocketProbar, desactivar si hay erroresPuede romper scripts de Elementor Pro
Element CacheElementorSolo para widgets estáticosRompe contenido dinámico (ACF, dynamic tags)
CSS Print MethodElementorExternal FilePermite que WP Rocket gestione el versionado de CSS
One-Click Exclusions para ElementorWP RocketActivarExcluye automáticamente los scripts críticos de Elementor
wp rocket elementor caché menú diagrama explicativo

Qué está confirmado / Qué no

Confirmado

  • «Delay JavaScript Execution» de WP Rocket afecta la carga de scripts de Elementor si no se configuran exclusiones. Documentado en la documentación oficial de WP Rocket.
  • Element Cache de Elementor genera datos incorrectos con widgets dinámicos (ACF, dynamic tags). Mencionado en la propia documentación de Elementor.
  • El orden correcto de limpieza es: primero regenerar CSS en Elementor, después vaciar caché en WP Rocket.
  • Combinar CSS en WP Rocket genera conflictos con Elementor. WP Rocket lo desaconseja en su propia documentación.

No confirmado / Depende del caso

  • Que la combinación WP Rocket + Elementor sea inherentemente problemática: con la configuración correcta, los dos funcionan bien juntos. El problema es la configuración por defecto, no los plugins.
  • Que desactivar Element Cache siempre sea la solución: para sitios con widgets 100% estáticos, Element Cache puede convivir con WP Rocket sin problemas.
  • Que el problema sea de WP Rocket específicamente: en muchos casos el origen es la configuración de Elementor (CSS inline, Element Cache activo para todo), no de WP Rocket.

Alternativas: ¿vale la pena cambiar de plugin de caché?

La pregunta aparece seguido en foros, y la respuesta honesta es: probablemente no. WP Rocket sigue siendo uno de los mejores plugins de caché para WordPress cuando se configura bien, y la propia documentación de Elementor lo recomienda como compatible. El problema no es el plugin sino la configuración por defecto que asume que el sitio no tiene otro sistema de caché activo.

Lo que sí tiene sentido evaluar es si necesitás las dos capas de caché al mismo tiempo. Si tu sitio es principalmente estático (portfolio, landing page, blog sin login), WP Rocket solo alcanza. Si tenés mucho contenido dinámico (tienda WooCommerce con usuarios logueados, membresías, carrito), ni WP Rocket ni Element Cache van a ser la bala de plata, y probablemente necesités una estrategia de caché más granular.

Dicho esto, si tu hosting ya tiene caché a nivel servidor (LiteSpeed Cache en servidores LiteSpeed, por ejemplo, que el hosting WordPress de Donweb soporta), podés evaluar usar esa capa en vez de WP Rocket y evitar toda la complejidad de dos sistemas de caché de aplicación corriendo al mismo tiempo.

Errores comunes al intentar resolver este problema

Error 1: Desactivar WP Rocket como solución permanente. Si el menú funciona sin WP Rocket, el problema no es WP Rocket, es la configuración. Desactivar el plugin es diagnosticar el origen, no resolver el problema. Configuralo correctamente y reactivalo.

Error 2: Limpiar solo la caché del navegador. El navegador no tiene la culpa la mayoría de las veces. Si limpiás cookies y caché del browser pero no la caché de WP Rocket y Elementor en el servidor, seguís viendo el mismo problema. Siempre probá en incógnito después de limpiar todo en el servidor.

Error 3: Agregar exclusiones de JavaScript por nombre de archivo sin verificar la ruta completa. Si agregás «elementor.js» como exclusión pero el archivo real se llama «frontend.min.js» y está en otra ruta, la exclusión no aplica. Verificá las rutas exactas con las DevTools del navegador (pestaña Network, filtrá por JS). Para más detalles técnicos, mirá en la comunidad WordPress oficial.

Error 4: Activar Element Cache globalmente sin revisar qué widgets son dinámicos. Elementor no avisa cuáles de tus widgets van a tener problemas con Element Cache. Tenés que revisarlo vos: cualquier widget que muestre datos que cambian (inventario, datos de usuario, entradas recientes) es candidato a problema.

Esto se conecta con nuestro artículo sobre Anyone faced a weird WP Rocket + Elementor menu/Filter cache.

Preguntas Frecuentes

¿Por qué mi menú de Elementor no funciona con WP Rocket activado?

La causa más común es la opción «Delay JavaScript Execution» de WP Rocket, que retrasa la carga de los scripts del menú de Elementor. Andá a WP Rocket > Optimización de Archivos, desactivá temporalmente esa opción y verificá si el menú responde. Si funciona, la solución es agregar los scripts de Elementor a las exclusiones en vez de desactivar la función por completo.

¿Cómo hago que los filtros de Elementor se actualicen sin limpiar la caché manualmente?

Desactivá Element Cache en Elementor para los widgets que usan contenido dinámico (filtros de productos, ACF, etiquetas dinámicas). Con Element Cache desactivado para esos widgets, Elementor consulta la base de datos en cada carga y devuelve datos actualizados. WP Rocket puede seguir cacheando la página, pero el contenido dinámico necesita quedar excluido de la caché o configurarse con cache por usuario.

¿Qué debo excluir en WP Rocket para que funcione bien con Elementor?

Las exclusiones mínimas para JavaScript son los archivos frontend.min.js de Elementor y Elementor Pro. En Optimización de CSS, desactivá la opción de combinar archivos CSS. Verificá también que One-Click Exclusions tenga marcada la opción de Elementor, que en versiones recientes de WP Rocket ya aparece como exclusión predefinida.

¿Es mejor desactivar Element Cache o usar WP Rocket?

No es una elección excluyente: los dos pueden convivir si se configuran bien. Element Cache conviene desactivarlo para widgets dinámicos y dejarlo solo para secciones estáticas. WP Rocket seguís usándolo para la caché de página completa, que es donde da el mayor beneficio de performance. El error es activar los dos de forma global sin segmentar qué contenido es estático y qué es dinámico.

¿Por qué mis elementos dinámicos de Elementor quedan en caché?

Porque Element Cache guarda el output HTML del widget sin saber si ese output depende de datos que pueden cambiar. Para widgets con ACF, dynamic tags, o datos de WooCommerce, Elementor no detecta automáticamente que el widget es dinámico: hay que configurarlo manualmente. Andá a la configuración del widget en el editor de Elementor, buscá la opción de Element Cache y marcalo como «No cachear» para ese widget específico.

Conclusión

El problema entre WP Rocket y Elementor no es un defecto de diseño ni un bug sin solución: es una colisión de dos sistemas de caché que, por defecto, no saben que el otro existe. La buena noticia es que con media hora de configuración bien hecha, los dos conviven sin drama.

El resumen práctico: desactivá «Combinar CSS» en WP Rocket, configurá «Delay JavaScript» con las exclusiones de Elementor, usá «External File» como CSS Print Method en Elementor, y desactivá Element Cache para cualquier widget que toque datos dinámicos. Después de eso, regenerá el CSS de Elementor, limpiá la caché de WP Rocket, probá en incógnito, y en el 90% de los casos el menú vuelve a funcionar y los filtros muestran datos actualizados.

Si el problema persiste después de todo eso, la consola del navegador es tu mejor aliada: los errores de JavaScript en la pestaña Console te van a decir exactamente qué script está fallando y por qué.

Fuentes

Volver a

Novedades

Publicaciones relacionadas