¡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 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 si 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é todo lo que necesitas saber sobre el flickering.
¡Al lío!
¿Qué es el efecto flickering?
El flickering más conocido como 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:
- Qué 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.
¿Por qué se produce este parpadeo en los test?
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 cada 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 su puesto 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.
¿Cómo limitar y reducir el flickering?
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 limitar y reducir 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 AB lo más alto posible entre las etiquetas <head></head>. Para ello, juega con las prioridades. Asegúrate de cargar este script por encima del 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 AB. 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 (Cómo 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.
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 AB y como 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 ha 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!
