Al usar una solución de A/B testing del lado del cliente, el efecto flickering o parpadeo se da cuando la versión original de una página web se muestra antes que la versión alternativa durante un breve periodo de tiempo en el proceso de testeo debido a que el navegador necesita un tiempo para procesar las modificaciones. No existe una solución milagrosa para resolver el problema, y aquellas soluciones que prometen ser rápidas, a menudo tienen una eficacia limitada. Sin embargo, hay determinadas cosas que puedes hacer para acelerar la aplicación de tus modificaciones y enmascarar el efecto flickering.
¿Qué es el efecto flickering exactamente ?
Aunque puede que nunca hayas oído hablar del flickering, sin lugar a dudas te has encontrado con ese fenómeno sin saberlo. Una página de test se carga, y unos milisegundos después, las modificaciones aparecen en pantalla. En un segundo has visto dos versiones de la página web, la antigua y la nueva. El resultado es una experiencia de usuario pobre, por no decir que los usuarios saben que están siendo sometidos a un test.
El flickering se produce en la parte del cliente cuando las soluciones de A/B testing aplican una capa de JavaScript mientras que la página se está cargando para asegurarse de que se muestran los elementos modificados. En la mayoría de los casos no notarás nada, pero si el sitio web tarda mucho en cargar o utiliza muchos recursos de servidores externos, puede que las modificaciones tarden más tiempo en mostrarse, dando lugar a al efecto flickering.
¿Existe un remedio milagroso para el flickering?
Algunos proveedores prometen utilizar técnicas innovadoras que evitan el flickering. Ten en cuenta que dichas técnicas son muy comunes, están disponibles para todo el mundo y presentan ciertas limitaciones técnicas. Al analizar la documentación que ofrecen los líderes del mercado, se puede apreciar que dichos métodos milagrosos sólo se utilizan como último recurso, cuando el resto de las opciones no han surtido efecto. Esto se debe a que el flickering puede ser diferente para cada página web y depende en gran medida del rendimiento inicial del sitio. ¿Cómo funciona el método? Para empezar, el contenido a mostrar se enmascara usando las propiedades del CSS tales como visibility:hidden o display:none para la etiqueta <body>. Esto enmascara el contenido de la página tan pronto como sea posible (debido a que el tag del proveedor se sitúa en el <head> del sitio web) antes de mostrarse de nuevo cuando las modificaciones han tenido tiempo para cargarse. Este método elimina efectivamente el efecto flickering o parpadeo, pero lo sustituye por una página blanca, esto es, en lugar de mostrar la versión original durante ese parpadeo, lo que se muestra es una página en blanco.
El riesgo a tomar al usar dicho método es que, si la página tiene problemas para cargar o problemas de implementación, los usuarios puede que se queden con una página en blanco durante unos segundos o incluso que se queden con la página en blanco permanentemente sin poder hacer nada al respecto. Otra desventaja de esta solución es que da la impresión de que el sitio web es lento. Por eso es importante asegurarse de que la carga de la página sólo se retrase unos pocos milisegundos como máximo, lo justo para que se apliquen las modificaciones. Y, por supuesto, para obtener resultados válidos tendrás que aplicar este retraso a un grupo de control para analizar correctamente el comportamiento de los usuarios en base a la velocidad de carga del sitio web.
Si tus modificaciones tardan tiempo en aplicarse, no quieres que una página en blanco sea todo lo que vean tus usuarios. Por eso en AB Tasty no recomendamos el método anterior para la mayoría de nuestros usuarios y no lo sugerimos por defecto. Sin embargo, es fácil implementarlo con unas cuantas líneas de JavaScript.
¿Cómo podemos limitar el flickering?
Si no queremos utilizar el método anterior, existen distintas opciones. La siguiente lista enumera las mejores prácticas a realizar para limitar el flickering y puede que incluso eliminarlo:
- Optimiza la velocidad de carga de tu sitio web por todos los medios posibles: caché del sitio, compresión, optimización de imágenes, CDNs,
- Sitúa el tag de la solución de AB testing tan alto como sea posible en el código fuente, dentro de la etiqueta <head> y antes de las llamadas a recursos externos intensivos como fuentes web, librerías JavaScript, etc.
- Usa la versión síncrona del script de AB Tasty, ya que la versión asíncrona incrementa las probabilidades de que aparezca el flickering.
- No utilices un tag manager para llamar a tu solución de A/B testing (por ejemplo, Google Tag Manager). Puede que no sea tan fácil de implementar, pero podrás controlar la prioridad con la que se leen los distintos tags.
- No insertes una librería jQuery en el tag si tu proveedor ya utiliza una. La mayoría de las soluciones de AB testing del lado del cliente utilizan jQuery. AB Tasty, por ejemplo, hace posible que no tengas que integrar el framework de JavaScript si ya lo usas en otra parte, de forma que evitas cargar unos cuantos KB.
- Reduce el tamaño del script de tu solución de A/B testing al eliminar test inactivos. Algunas soluciones incluyen la totalidad de tus test en su script, sin importar si están suspendidos o en modo borrador. AB Tasty incluye únicamente test activos por defecto. Si, por ejemplo, tienes un gran número de personalizaciones en curso, sería apropiado implementarlas permanentemente y desactivarlas en AB Tasty.
- Presta atención a la naturaleza de las modificaciones. Añadir cientos de líneas de código para obtener tu modificación muy probablemente causará más flickering que un cambio menor en el CSS o las expresiones usadas en la web.
- Utiliza las hojas de estilo tanto como sea posible. Normalmente se puede obtener el efecto deseado utilizando las hojas de estilo. Por ejemplo, puedes simplemente implementar un código JavaScript que añada una clase CSS a un elemento, lo que permitirá modificar su aspecto, en lugar de tener que escribir líneas de código para manipular su estilo.
- Optimiza tu código modificado. Al trastear con el editor visual para intentar realizar cambios puede que añadas bastantes líneas de código JavaScript innecesarias. Analiza rápidamente el código generado en la pestaña “editar código” para optimizarlo al reordenar o eliminar las partes que no son necesarias.
- Asegúrate de que la solución de A/B testing que has elegido utilice una o varias CDNs de modo que el script que contiene tus modificaciones se cargue lo más rápido posible sin importar donde se encuentre el usuario.
- Para usuarios avanzados: Añade selectores jQuery como objetos a la caché para que no necesiten ser reorganizados varias veces en el DOM. También puedes realizar modificaciones en JavaScript en lugar de en jQuery, particularmente cuando se trata de elementos de clase o de ID.
- Usa test por redirección cuando sea posible y si son útiles después de realizar una evaluación sobre la relación existente entre la naturaleza de la modificación y el tiempo requerido para que sea implementada.
Si después de realizar todas estas optimizaciones sigues encontrándote con el efecto flickering, puede que quieras utilizar el método de enmascaramiento de contenido explicado al principio. Si no te sientes cómodo haciendo esto, contacta nuestro equipo de soporte. Por otra parte, puedes optar por realizar A/B testing del lado del servidor, el cual elimina el efecto flickering al completo debido a que el cliente (navegador) no interpreta la modificación sino que es el servidor el que envía la versión original o alternativa directamente. Esta es una de las muchas ventajas de este tipo de A/B testing. Puedes obtener más información en nuestro post sobre el A/B testing del lado del servidor.
