Skip to main content
El parpadeo suele tener dos causas principales:
  • El navegador ya ha mostrado la página o partes de ella antes de que el script se cargue y ejecute. Este problema de temporización está directamente relacionado con la forma en que implementa Kameleoon en su sitio web. Si Kameleoon se carga demasiado tarde, o si lo integra en un Tag Management System, no 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: Kameleoon genera el script ú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 cuando se carga el script de Kameleoon, lo que normalmente lleva menos de 50 milisegundos. Si el script de Kameleoon no se carga dentro del periodo de timeout especificado (750 milisegundos por defecto), Kameleoon también elimina la regla para evitar mostrar una página en blanco indefinidamente. Este enfoque garantiza que Kameleoon no pueda interrumpir su sitio web en ninguna situación.
Usted controla el timeout mediante la variable JavaScript kameleoonLoadingTimeout, que puede ajustar en el tag de instalación de Kameleoon. Por defecto, esta variable tiene el valor 750 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. Con la carga sincrónica, el navegador no renderiza ningún contenido hasta que el archivo de la aplicación Kameleoon se haya descargado y ejecutado por completo, siempre que incluya el tag en la sección <head> del HTML. Sin embargo, cargar recursos de forma bloqueante no se considera una buena práctica. Incluso si 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 ayudar a 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. Ocultar la página hasta que se cargue el archivo de la aplicación Kameleoon o expire el timeout puede provocar una página en blanco y un First Contentful Paint (FCP) más lento. PageSpeed Insights mide el FCP. Si una página en blanco o los resultados de PageSpeed suponen un problema, en la mayoría de los casos la solución más sencilla es eliminar el código anti-flicker. Utilice en su lugar la etiqueta asíncrona sin anti-flicker. Sin anti-flicker, los visitantes pueden ver la página original antes de que aparezca una variación, lo que puede reducir la precisión de sus resultados.

​
FAQ

Se trata de un bug conocido en Firefox. Hasta que el equipo de Firefox lo corrija, siga esta solución alternativa: asegúrese de que su recurso CSS enlazado vaya seguido de una etiqueta <script> (aunque sea casi vacía).Ejemplo:
Esto elimina por completo el efecto de parpadeo.