Optimización técnica

Optimización de la caché móvil de WordPress: Configuraciones reales para LiteSpeed, WP Rocket y Fastest Cache

Panel de configuración móvil de WordPress LiteSpeed Cache

¿Por qué el almacenamiento en caché móvil es diferente?

Las versiones para móviles y ordenadores de un sitio WordPress suelen cargar la misma URL, pero muestran diseños o recursos ligeramente diferentes. Los temas adaptables, los scripts condicionales y los plugins específicos para móviles pueden modificar lo que ve el visitante y cómo se comporta la caché.

Si la caché no está configurada correctamente, un visitante móvil podría ver un diseño de escritorio o incluso contenido desactualizado. Por eso, la optimización de la caché móvil es crucial no solo para la velocidad, sino también para la consistencia y el SEO.

El almacenamiento en caché móvil mejora los tiempos de carga en redes 3G o 4G más lentas, reduce el TTFB y optimiza métricas clave como LCP y FID. Sin embargo, una configuración incorrecta puede generar páginas duplicadas, versiones de caché conflictivas y problemas de "Vary: User-Agent" que dificultan la depuración.

Comprender el encabezado Vary: User-Agent

El Vary: User-Agent La cabecera indica a los navegadores y a las CDN que almacenen diferentes versiones de caché para cada tipo de dispositivo: ordenador, móvil, tableta, etc. Esto puede resultar útil si su sitio web sirve HTML diferente a distintos dispositivos.

Pero aquí está el problema: si tu sitio es adaptable (el mismo HTML para todos los dispositivos), usar Vary: User-Agent Solo aumenta la fragmentación de la caché y la complejidad de la CDN. Cada agente de usuario único puede obtener su propia entrada en la caché, lo que da como resultado cientos o miles de variaciones innecesarias.

La regla general es simple:

  • Usar Vary: User-Agent solo si su sitio genera diferente Formato para móviles.

  • Desactívalo para temas responsivos donde CSS gestiona los cambios de diseño.

Caché LiteSpeed: Configuración móvil correcta

LiteSpeed Cache incluye una opción integrada para activar la "Vista móvil independiente". Esta función crea archivos de caché distintos para dispositivos móviles, pero no siempre es necesaria.

Pasos de configuración:

  1. Ir a Caché LiteSpeed → Caché → Móvil.

  2. Permitir Vista móvil independiente solo si utilizas un tema o complemento específico para móviles.

  3. Si tu tema es adaptable, deja esta configuración. apagado.

  4. Cuando esté habilitado, asegúrese de que su CDN (Cloudflare, BunnyCDN, QUIC.cloud) ignore el Vary: User-Agent Cabecera para evitar la duplicación de caché.

Ajuste avanzado opcional:
En el ESI (Incluye borde lateral) En esta sección, deshabilite ESI para fragmentos móviles para evitar la representación de contenido mixto entre escritorio y dispositivos móviles.

Resultado: una caché unificada por página, sin duplicados y TTFB consistente en todos los dispositivos.

WP Rocket: Configuración de caché móvil

WP Rocket ofrece dos opciones bajo Caché → Móvil:

  • “Habilitar el almacenamiento en caché para dispositivos móviles”

  • “Archivos de caché separados para dispositivos móviles”

Si tu sitio es adaptable, activa la opción correspondiente. Solo la primera opciónEsto garantiza que los visitantes móviles obtengan las páginas almacenadas en caché sin dividir el almacenamiento de caché.

Habilite ambas opciones solo si su tema genera HTML diferente para usuarios de dispositivos móviles (por ejemplo, menús móviles o archivos de encabezado separados).

Si utilizas Cloudflare u otra CDN con detección de dispositivos, deja que la CDN gestione las variaciones y mantén desactivada la caché móvil independiente.

Consejo rápido:
WP Rocket a veces agrega Vary: User-Agent Automáticamente. Puedes confirmarlo en las Herramientas para desarrolladores de Chrome → Red → EncabezadosSi lo ves cuando no deberías, desactiva la opción “Archivos de caché separados para dispositivos móviles”.

Comparación de la cascada de almacenamiento en caché en dispositivos móviles y de escritorio de GTmetrix

WP Fastest Cache: Gestión de visualizaciones móviles

WP Fastest Cache adopta un enfoque más manual. Encontrarás dos opciones relevantes en Configuración → Caché:

  • “Crear caché para el tema móvil”

  • “No mostrar la versión en caché para escritorio en dispositivos móviles”

LEER  Cómo reducir drásticamente el TTFB en WordPress (Ejemplos y pruebas de rendimiento en servidores reales)

Si tu tema es adaptable, activa la opción correspondiente. Solo la segunda opciónGarantiza que los usuarios de dispositivos móviles no vean la caché de escritorio sin crear archivos de caché redundantes.

Si tu sitio utiliza un tema móvil independiente (como WP Touch o AMP para WP), marca ambas opciones.

Para verificar la configuración, borre la caché e inspeccione los encabezados de respuesta. Si ve Vary: User-Agent Desactiva la duplicación móvil cuando menos lo esperes.

Prueba y verificación de la caché móvil

Tras la configuración, debes probar cómo se comporta la caché de tu dispositivo móvil.

  1. Ejecuta una prueba GTmetrix o WebPageTest usando emulación móvil.

  2. Compara el TTFB y el tamaño total para móviles frente a ordenadores de sobremesa.

  3. Si ambas versiones ofrecen un HTML y una velocidad similares, su configuración es correcta.

  4. Si la versión móvil carga un diseño de escritorio o la respuesta es más lenta, revise la configuración del plugin.

En Herramientas de desarrollo de Chrome, bajo Red → Encabezados → Respuesta, encuentra el Variar campo.

  • Debe estar vacío o mostrar solo Accept-Encoding.

  • Si se muestra User-Agent, es probable que la caché se divida innecesariamente.

Resumen de buenas prácticas

  • Usar caché móvil separada Solo si tu sitio genera HTML móvil único.

  • Mantener Vary: User-Agent mínimo para evitar la fragmentación de la CDN.

  • Siempre borre la caché después de actualizar el tema o los plugins.

  • Supervise el TTFB móvil mensualmente para realizar un seguimiento del rendimiento a largo plazo.

Para lograr mejoras completas en el rendimiento de dispositivos móviles y de escritorio, explore nuestra Servicio de optimización de WordPress para una completa optimización del almacenamiento en caché, la CDN y la base de datos.

Ejemplo de configuración real (cliente SpeedWP Pro)

Para un cliente de SpeedWP Pro que utiliza LiteSpeed Enterprise + CDN de Cloudflare:

  • “Vista móvil independiente” → Desactivada.

  • “Servir contenido obsoleto si hay error” → Habilitado.

  • Clave de caché de Cloudflare:

    Cache-Key: scheme+hostname+path

Resultado:
El TTFB promedio disminuyó de 480 ms a 210 msy las entradas duplicadas en la caché disminuyeron de 30.000 a 11.000.

LEER  Cómo aplazar JavaScript en WordPress para mejorar la velocidad de la página

Esta configuración garantizaba un rendimiento rápido y estable tanto en dispositivos móviles como en ordenadores de sobremesa, al tiempo que mantenía el almacenamiento de caché eficiente y limpio.

Una correcta configuración de la caché móvil en WordPress no se trata solo de ahorrar milisegundos, sino de consistencia y fiabilidad. Un sitio que envía la misma respuesta optimizada a cada visitante, independientemente del dispositivo, mantiene mejores posiciones en los rankings y una mayor satisfacción del usuario.

Con la configuración correcta de LiteSpeed, WP Rocket o WP Fastest Cache, puedes evitar cachés duplicados, minimizar la carga del servidor y asegurar que tu sitio WordPress funcione igual de bien en dispositivos móviles y de escritorio.