Saltar al contenido principal
El parpadeo suele tener dos causas principales:
  • El script se carga y ejecuta después de que el navegador haya mostrado ya la página o partes de ella. Este problema de temporización está directamente relacionado con cómo se ha implementado Kameleoon en su sitio web. Si Kameleoon se carga demasiado tarde o se integra mediante un Tag Management System, no se puede evitar el parpadeo.
  • El motor que procesa las variaciones del experimento es demasiado lento y no ejecuta las modificaciones con suficiente rapidez.
El script de Kameleoon incluye un motor anti-parpadeo único que garantiza que los A/B tests se ejecuten con fluidez, permitiendo que las variaciones del test se muestren sin retrasos, lo que mejora la experiencia del usuario y aporta resultados de test más fiables.

​
Principales ventajas de la tecnología:​

Estas son algunas razones por las que la tecnología anti-parpadeo de Kameleoon es única y potente:
  • Snippet asincrónico: Kameleoon carga su script de forma asincrónica desde una CDN fiable (Cloudflare) para garantizar una primera carga de página no bloqueante y aprovecha la caché del navegador para cargas posteriores más rápidas. Kameleoon mantiene un Service Level Agreement (SLA) superior al 99,99%.
  • Tamaño reducido del script: el archivo de la aplicación, creado con TypeScript, ocupa tan solo 29 kB (comprimido con Brotli), lo que minimiza el tiempo de carga en la primera página.
  • Enfoque de preprocesamiento: el script de Kameleoon se genera únicamente a partir de los componentes necesarios para su configuración específica, en función de las funcionalidades y opciones que utilice.
  • Motor anti-parpadeo único: el motor captura eventos del DOM en tiempo real y altera la visualización de los componentes implicados en la variación de un experimento antes de que se rendericen por completo.
  • Reducción de llamadas de red: el script agrupa varios eventos de tracking en una sola llamada beacon, disminuyendo notablemente el número total de llamadas de red necesarias.
  • Carga de un único script: a diferencia de otras plataformas que requieren varios archivos, Kameleoon carga un único script consolidado. Esto reduce el número de solicitudes HTTP.
  • Carga diferida de experimentos: Kameleoon le permite seleccionar qué experimentos incluir en el archivo de la aplicación, engine.js (antes llamado kameleoon.js), en el momento de la carga inicial de la página, caso por caso, y diferir los experimentos no esenciales hasta después de la primera carga.
  • Actualización en tiempo real: para ofrecer actualizaciones más frecuentes sin verse afectados por la caché del navegador, la funcionalidad Live Update Experiments refresca, en menos de un minuto, cualquier experimento etiquetado como “LIVE-UPDATE”.

​
Cómo prevenir el parpadeo en sus experimentos​

Para eliminar el parpadeo que se produce al cargar el archivo de la aplicación, use el tag asincrónico con prevención de parpadeo. El snippet incluye una “regla CSS bloqueante” que oculta inicialmente todo el contenido de la página mientras el navegador descarga el script. Kameleoon elimina esta regla en cuanto se carga el código de la aplicación, lo que normalmente lleva menos de 50 milisegundos. Si el código de la aplicación no se carga dentro del periodo de timeout especificado (1000 milisegundos por defecto), la regla también se eliminará para evitar mostrar una página en blanco indefinidamente. Este enfoque garantiza que Kameleoon no pueda interrumpir su sitio web en ninguna situación.
El timeout se gestiona mediante la variable JavaScript kameleoonLoadingTimeout, que puede ajustar en el tag de instalación de Kameleoon. Por defecto, esta variable está establecida en 1000 milisegundos. Kameleoon recomienda mantenerla en ese valor. Esta variable indica el tiempo máximo que el tag de instalación de Kameleoon puede impedir que su sitio se muestre mientras espera a que se cargue el archivo de la aplicación Kameleoon.En caso de timeout, una vez que el código de Kameleoon termina por cargarse, la configuración elegida determina lo que ocurre a continuación. Tiene dos opciones en los ajustes avanzados de confirmación de su proyecto de Kameleoon:
  1. Desactivar Kameleoon por completo: si se produce un timeout, no se ejecutará ningún experimento ni personalización para ese visitante concreto.
  2. Ejecutar el código de Kameleoon con normalidad: en este caso, el código se ejecutará tarde, lo que podría provocar parpadeos en la página.
Tenga en cuenta que, si no se ajusta el valor predeterminado de timeout, los timeouts deberían ser relativamente raros en condiciones habituales, como con una velocidad de Internet adecuada, ocurriendo solo en aproximadamente el 2-3% de sus visitantes.
Aunque no se recomienda, también puede implementar el tag sincrónico. En el caso de la carga sincrónica, se proporcionan garantías automáticas siempre que el tag esté incluido en la sección <head> del HTML. Esta garantía existe porque el navegador no renderizará ningún contenido hasta que el archivo de la aplicación Kameleoon se haya descargado y ejecutado por completo. Sin embargo, cargar recursos de forma bloqueante no se considera una buena práctica. Incluso si se implementa el método correcto, pueden producirse efectos de parpadeo si el motor subyacente de una solución de A/B testing no está optimizado para evitarlos. Kameleoon garantiza automáticamente estas optimizaciones para cualquier cambio realizado mediante el editor gráfico. Para las variaciones que utilizan código JavaScript personalizado, hay APIs disponibles para garantizar una experiencia fluida. Use estas APIs correctamente para evitar problemas. Realice cualquier modificación de un elemento o cualquier acción que espere a que aparezca un elemento en la página usando el método de la API JavaScript, concretamente Kameleoon.API.Core.runWhenElementPresent(), en lugar de usar pollers escritos a mano u otro código personalizado.
Al implementar código JavaScript para una variación, tenga en cuenta las modificaciones que desea realizar y los elementos DOM específicos a los que se aplicarán. Una vez identificado el selector CSS adecuado para estos elementos, encapsule la llamada de modificación en una función callback que proporcionará a Kameleoon.API.Core.runWhenElementPresent(). Este enfoque tiene dos ventajas clave: primero, garantiza que el código se ejecute en el momento adecuado, solo después de que los elementos estén presentes en el DOM, evitando posibles problemas que podrían surgir si su código se ejecuta de forma prematura. Segundo, elimina el riesgo de efectos de parpadeo no deseados.

​
Impacto de la gestión del parpadeo en el rendimiento​

Si bien las soluciones de monitorización de rendimiento ofrecen información valiosa, no presentan una imagen completa, especialmente para las plataformas de experimentación. El verdadero rendimiento consiste en encontrar el equilibrio adecuado entre velocidad, precisión y una experiencia de usuario fluida. Kameleoon logra este equilibrio de forma eficaz: el snippet del experimento se ha diseñado específicamente para optimizar tanto el rendimiento como la experiencia de usuario. Kameleoon carga un único script que contiene el motor y todas las configuraciones que haya establecido en la plataforma, incluidos experimentos, objetivos y scripts personalizados. No se cargan scripts adicionales después. Desactivar temporalmente el motor anti-parpadeo podría mejorar las métricas de rendimiento en las herramientas de monitorización, pero compromete la experiencia del usuario y la precisión de los resultados al introducir parpadeos. Esta concesión es inaceptable.