¿Ralentiza mi sitio web el script anti-parpadeo?
Respuesta rápida
Un script anti-parpadeo sí añade una latencia mínima, normalmente de 50 a 150 ms, porque oculta brevemente el cuerpo de la página mientras se aplica la variante del test A/B, evitando que aparezca un destello de la versión original. Esto suele ser aceptable, pero los scripts anti-parpadeo mal implementados y sin un tiempo máximo de espera pueden bloquear el renderizado indefinidamente y perjudicar gravemente las puntuaciones de Largest Contentful Paint.
Conclusiones clave
- Los scripts anti-parpadeo deben incluir un tiempo máximo de espera (normalmente de 1 a 3 segundos) para que la página se muestre aunque la variante no llegue a cargarse.
- Las herramientas de tests A/B bien optimizadas, como Mida, minimizan el impacto del anti-parpadeo gracias a una carga asíncrona rápida y a un script ligero de menos de 20KB.
- Mide tus puntuaciones de LCP y FCP con el script de tests A/B activo y sin él para cuantificar el coste real de rendimiento en tu sitio concreto.
La velocidad y el rendimiento de tu sitio web siempre deben ser prioritarios, ya que pueden afectar directamente a las tasas de conversión y al posicionamiento SEO de tu web.
Cuando se trata de tests A/B, una pregunta que surge a menudo es si añadir un script anti-parpadeo ralentizará un sitio web.
En este artículo explicaré qué es un script anti-parpadeo, cómo funciona, cuál es su impacto en la velocidad del sitio y algunas buenas prácticas para usarlo.
¿Qué es un script anti-parpadeo?
Un script anti-parpadeo, a veces llamado script de tests A/B, es un código que elimina el "parpadeo" visual o destello que puede producirse cuando ejecutas un test A/B en tu sitio web.
Esto es lo que ocurre cuando configuras un test A/B sin un script anti-parpadeo:
- Un usuario visita tu sitio web.
- La herramienta de tests A/B carga la página original (versión A).
- Cuando el script de tests A/B termina de cargarse, sustituye la versión A por la versión B.
- Este cambio es visible para el usuario y provoca un parpadeo visual molesto entre las versiones de la página.
Este es un ejemplo de cómo se ve un "parpadeo":
El script anti-parpadeo elimina este destello retrasando la visualización de la página al usuario hasta que se haya cargado la versión correcta.
En la práctica, funciona así:
- Un usuario visita tu sitio web.
- El script anti-parpadeo muestra una página en blanco mientras el test A/B determina qué versión (A o B) mostrar.
- Una vez que el test asigna la versión, todo el contenido de la página se carga sin interrupciones y sin parpadeo entre versiones.
¿Y si la herramienta de tests A/B tardara 10 segundos en cargar?
Normalmente, un script anti-parpadeo tiene un ajuste de tiempo máximo de espera que puedes configurar: si el script de tests A/B, por la razón que sea, no está en la página o no se ha cargado en XX segundos (no más de 2 segundos), liberará la página quitando la pantalla en blanco.
Esto se traduce en una experiencia de usuario más fluida.
¡ESPERA!
Entonces, ¿estás retrasando a propósito la página con una pantalla en blanco HASTA que el test A/B determine qué versión usar? ¿No afecta eso a la velocidad de la página?
¿Cómo afecta el script anti-parpadeo a la velocidad de la página?
El impacto del script anti-parpadeo depende principalmente de la rapidez con la que tu script de tests A/B pueda ejecutarse para determinar la versión de la página.
Hay varios factores de velocidad a tener en cuenta:
- El tiempo de página en blanco: es el tiempo que se muestra la página en blanco mientras el test A/B determina la versión. Cuanto más corto sea este periodo, menor será el impacto en la velocidad.
- Velocidad en cascada (waterfall): la mayoría de las herramientas de tests A/B se cargan de forma asíncrona para no bloquear la carga de otros elementos de la página. Sin embargo, el script anti-parpadeo retrasará la visualización de la página completa hasta que el test A/B termine de ejecutarse.
- Geografía: la ubicación del servidor de la herramienta de tests A/B puede causar latencia según la geografía del usuario. Cuanta más distancia, más lento es el tiempo de ejecución.
- Carga del servidor: una carga elevada en los servidores de tests A/B también ralentizará el tiempo de ejecución del script.
En resumen, un script de tests A/B de ejecución rápida minimizará el tiempo de página en blanco y el impacto en la velocidad del script anti-parpadeo. Los scripts más lentos pueden retrasar el momento en que se muestra la página completa y perjudicar métricas de velocidad del sitio como el Time to First Byte.
Como puedes ver en el ejemplo anterior, con un script de test A/B rápido y con un script anti-flickering integrado, la página aparece en 0,63 s. En cambio, si el script de test A/B es lento, da igual que tengas o no un script anti-flickering: lo más probable es que perjudique las conversiones de tu sitio web.
Herramienta gratuita de test A/B
Lanza tu próximo test A/B de la forma correcta
Editor visual, script de 15 KB, nativo de GA4 y gratis para siempre hasta 100.000 visitantes mensuales. Sin necesidad de desarrolladores.
Buenas prácticas para el script anti-flickering
Teniendo en cuenta la velocidad, ¿cuáles son algunas buenas prácticas para usar scripts anti-flickering?
- Úsalo solo cuando pruebes elementos Above The Fold (ATF). Actívalo solo en las páginas que cambian elementos en ATF. No necesitas un script anti-flickering si tu test está por debajo del pliegue, ya que los usuarios nunca notarán el efecto de parpadeo.
- Úsalo solo cuando el parpadeo sea muy visible o molesto. Para cambios sutiles en la página, puede que el script no sea necesario.
- Elige una herramienta de test A/B RÁPIDA. Las herramientas más rápidas minimizan el impacto y mejoran el rendimiento general de tu sitio web. Si es necesario, habla con tu proveedor.
- Reduce la latencia geográfica. Usa una CDN para distribuir geográficamente los scripts de test A/B.
En conclusión
Los scripts anti-flickering pueden ofrecer una mejor experiencia de usuario al eliminar los destellos molestos durante los tests A/B. Sin embargo, pueden retrasar la visualización del contenido de la página en función de lo rápido que la herramienta de test A/B asigne la versión.
Con una implementación bien optimizada, puedes aprovechar los scripts anti-flickering sin sacrificar la velocidad ni el rendimiento de tu sitio web.
