¡Muy buenas querido lector! Ya estoy una semana más por aquí para hablarte sobre CRO y, en esta ocasión, voy a hablarte sobre el famoso efecto flickering (también conocido como flicker) que se produce a la hora de realizar test A/B en tu página web.
¿Sabes de lo que te estoy hablando?
Si la respuesta es no, no te preocupes ya que es probable que sí lo sepas si haces test A/B en tu página web con cualquiera de las herramientas de CRO que existen en el mercado.
Por lo tanto, si eres un amante del CRO acompáñame en este post en el que te mostraré qué es el flickering, por qué se produce y cómo evitar el flickering en tus experimentos.
¡Al lío!
¿Qué es el flickering o efecto flicker?
El flickering, también llamado efecto flicker o parpadeo, se produce cuando la versión original de la página web se muestra unos milisegundos antes que la versión B a testear.
Pasados unos milisegundos y, tras este breve parpadeo, finalmente se le muestra al usuario la página correcta a testear.
Este pequeño flickering o parpadeo puede provocar un efecto negativo en tu usuario entre otras cosas como:
- Que el usuario abandone la página.
- Que el usuario se sienta confundido y no haga nada en tu página web, sesgando así el experimento.
- Que la mala experiencia del usuario influya de forma negativa en el test, alterando así los resultados del testeo.
Por este motivo, combatir el efecto flickering y minimizar sus efectos será crucial para conseguir unos resultados 100% fidedignos en tus test A/B.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
¿Por qué se produce este parpadeo (flickering test) en los test A/B?
El flickering se debe a la propia esencia de los test A/B.
Ten en cuenta que para llevar a cabo estos tests se utiliza una capa de JavaScript con la que mostrar al usuario una versión de la URL u otra en función de una serie de directrices.
Este JavaScript permite cambiar la visualización de la URL de cara al cliente (usuario). Sin embargo, hasta que se carga toda la página y el JavaScript con las modificaciones pertinentes del experimento pueden pasar unos milisegundos, provocando este famoso efecto parpadeo que tan negativo es para la experiencia de usuario.
De todos modos, que este efecto sea más o menos visible para el usuario dependerá de muchos factores, como que la página web tarde en cargar, que se utilicen muchos recursos y scripts externos, etc.
¿Se puede solucionar el efecto flickering?
Por supuesto que se puede solucionar este efecto, o al menos reducirlo drásticamente, para que así su impacto sobre el testeo sea mínimo.
De todos modos, desde ya te digo que desconfíes de proveedores que ofrezcan soluciones mágicas para solucionar este efecto, ya que todos esos remedios suelen tener algún tipo de contraprestación técnica que hace que no merezcan la pena.
Además, nunca existirá una solución estandarizada a este efecto puesto que cada página web es distinta, y que el efecto flickering sea más o menos relevante dependerá de la optimización y rendimiento de la propia página web.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Cómo evitar el flickering: limita y reduce el efecto flicker
Personalmente nunca recomendaré enmascarar este efecto con CSS, tal y como recomiendan algunos expertos en la materia, ya que esta solución no será más que un parche.
Por todo ello, si lo que de verdad quieres es evitar el flickering en tu página web de forma seria y profesional, te recomiendo seguir estos consejos:
- Optimiza tanto como sea posible toda tu página web mediante plugins de rendimiento y caché.
- Sitúa tu script de testing A/B lo más alto posible entre las etiquetas <head></head>. Para ello, juega con las prioridades. Asegúrate de cargar este script por encima de las fuentes de tu página web y otros recursos externos.
- Utiliza siempre una versión asíncrona de JavaScript. Si utilizas una opción síncrona tendrás más posibilidades de que el flickering aparezca en tu página web.
- Evita utilizar Tag Manager para implementar tu script de testing, ya que mediante este método no podrás controlar las prioridades de tus scripts de forma eficiente. Será mejor que lo hagas a mano.
- Reduce el número de test inactivos en tu plataforma de test A/B. De esta forma reducirás el tamaño de tu script.
- Reduce el número de cambios por test al mínimo. Ten en cuenta que cuantas más modificaciones lleve un test, más código tendrá que cargar y más probabilidades tendrás de que el usuario sienta el efecto flickering.
- Prioriza el CSS por encima del JS. Es decir, en tus test, en vez de cambiar el HTML de la URL para ciertos test (como un cambio de color de botón, por ejemplo) intenta realizar dichos cambios vía CSS en vez de mediante código HTML que al final tirará de código JS para mostrar el experimento al usuario.
- Revisa el código de tu test en busca de posibles mejoras. Ya sabes, si puedes ahorrarte una línea de código, mejor que mejor.
- Asegúrate de utilizar un CDN en tus experimentos con el fin de que este se entregue lo más rápido posible.
- Si después de todo esto el efecto flickering sigue dándote lata, prueba a utilizar test de redirección. Estos tests serán igual de efectivos y reducirán este efecto.
Si después de realizar todos estos cambios el flickering no desaparece o no se reduce drásticamente, siempre podrás optar por ocultar la versión original de la página web mediante CSS, como te he comentado anteriormente.
Sin embargo, con los trucos que has leído anteriormente debería ser más que suficiente para evitar este efecto en tus testeos.
Preguntas frecuentes sobre el flickering
¿Qué es el flickering?
¿Qué es el flicker en CRO?
¿Cómo evitar el flickering?
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Conclusiones sobre el flickering
Como has podido ver a lo largo del post, el efecto flickering es normal que se produzca debido a la propia naturaleza de los test A/B y a cómo estos se generan vía JavaScript.
Sin embargo, podrás limitar los efectos del flickering simplemente optimizando un poco el código de tu página web y del propio test con los consejos que has visto anteriormente.
Por todo ello, no dejes que este efecto sesgue tus experimentos y ponte desde ya a optimizar tu código para conseguir unos resultados 100% fidedignos en tus experimentos.
Ahora te toca a ti querido lector: ¿conocías este efecto? ¿Lo has notado alguna vez al visitar una página web?
Cuéntamelo en los comentarios.
¡Nos leemos en dos semanas!
