Compruebe cuándo se carga el snippet
Compruebe el tiempo de la etiquetaengine.js (anteriormente denominada kameleoon.js) después de recargar la página, como se muestra en la captura de pantalla a continuación. Si la métrica started at está por encima de 1 segundo, sitúe el script de Kameleoon más arriba en la etiqueta <head> y establezca fetchpriority="high". Estos cambios garantizan que el script de Kameleoon se cargue en menos de 1 segundo.
Cuando la página se carga por primera vez, el script de Kameleoon tarda más, normalmente menos de 60 milisegundos, ya que se descarga directamente del CDN. En recargas posteriores, el script se descarga desde la caché.
Comprobación de la puntuación de rendimiento mediante la extensión de Kameleoon para Chrome
Según la puntuación de rendimiento mostrada en la extensión (vea la captura de pantalla a continuación), lleve a cabo una o varias de estas acciones:- Detenga los experimentos o personalizaciones que lleven funcionando más de 2 meses y transfiera el código al código fuente de su sitio en función del resultado del experimento o personalización.
- Archive los experimentos o personalizaciones que se hayan detenido.
- Elimine los objetivos no utilizados, incluido su código si son objetivos personalizados.
- Elimine los segmentos no utilizados.
- Elimine los datos personalizados no utilizados.
- Optimice el Global Custom Script para eliminar todo el código no utilizado u obsoleto.
Seguimiento del rendimiento con PageSpeed Insights
La pestaña Performance de las herramientas para desarrolladores del navegador ayuda a analizar el rendimiento de una página web, registrando y visualizando datos clave como los tiempos de carga, el uso de memoria y el consumo de recursos. Proporciona información detallada sobre los procesos de renderizado, scripting y layout en forma de líneas de tiempo y flame charts. Esto puede ayudar a identificar cuellos de botella, scripts de carga lenta y otros factores que afectan a la velocidad. Google PageSpeed Insights analiza el contenido de una página web y proporciona información sobre el rendimiento y sugerencias de mejora. Ofrece una puntuación y sugerencias basadas en las Core Web Vitals, como el tiempo de carga, la interactividad y la estabilidad visual. Los resultados se muestran en formato de informe con métricas como “FCP”, “LCP”, “INP” y “CLS”.
First Contentful Paint
First Contentful Paint (FCP) mide el tiempo entre el inicio de la carga de la página y el momento en que el contenido de la página se muestra en pantalla.- Impacto posible: El anti-flicker podría afectar al FCP, ya que retrasa la visualización del primer elemento de la página.
- Acción: Reduzca el timeout del anti-flicker de 1000 milisegundos a 500 milisegundos o elimine el script anti-flicker si Kameleoon se carga muy pronto (started at ≃ 500 milisegundos). El siguiente fragmento de código de ejemplo muestra cómo lograrlo:
Largest Contentful Paint
Largest Contentful Paint (LCP) mide la velocidad de carga percibida. Marca el punto en la línea de tiempo de carga de la página en el que es probable que se haya cargado el contenido principal de la página.- Impacto posible: El anti-flicker podría afectar al LCP, ya que retrasa la visualización del elemento más grande de la página.
- Acción: Igual que para el FCP anterior.
Interaction to Next Paint
Interaction to Next Paint (INP) mide la capacidad de respuesta de la página. Para ofrecer una experiencia de usuario positiva, procure tener un INP inferior a 200 milisegundos.- Impacto posible: Si Kameleoon se carga pronto, no debería haber un impacto negativo. Sin embargo, las pruebas que cambian el comportamiento de una interacción pueden afectar a esta métrica.
- Acción: Puede utilizar la extensión de Kameleoon para Chrome o el código siguiente en la consola para comprobar cuáles son los experimentos / personalizaciones activos en la página correspondiente y encontrar el posible origen del impacto. El siguiente fragmento de código de ejemplo muestra cómo lograrlo:
Cumulative Layout Shift
Cumulative Layout Shift (CLS) mide el mayor cambio de posición de un elemento durante el ciclo de vida de la página. Tenga en cuenta que los cambios de layout solo se producen cuando los elementos existentes cambian su posición inicial. Si se añade un nuevo elemento al DOM, o si un elemento existente cambia de tamaño, esto no cuenta como un cambio de layout, siempre que el cambio no provoque una modificación en la posición inicial de otros elementos visibles.- Impacto posible: La etiqueta de Kameleoon no tiene impacto en este índice. Los experimentos / personalizaciones, en cambio, pueden tener un impacto negativo si provocan un cambio en la posición inicial de un elemento.
- Acción: Igual que para el INP anterior.
Speed Index (métrica de ContentSquare)
Speed Index mide el tiempo en el que se muestra la mayoría de los elementos gráficos por encima del waterline.- Impacto posible: El anti-flicker podría afectar al Speed Index, ya que puede retrasar la visualización de los elementos por encima del waterline. Además, si ejecuta experimentos/personalizaciones que realizan cambios en la parte superior de la página, el Speed Index se verá afectado negativamente (aumentará).
- Acciones: Igual que para el FCP y el INP anteriores.
Características del script de Kameleoon en un vistazo
- Snippet asíncrono: Kameleoon carga su script de forma asíncrona desde un CDN fiable (Cloudflare) para garantizar una primera carga de página no bloqueante y utiliza la caché del navegador para acelerar las cargas de página posteriores. Kameleoon mantiene un Service Level Agreement (SLA) superior al 99,99 %.
Asegúrese de tener el atributo async en el script de Kameleoon instalado en su sitio. Consulte el snippet a continuación:
- Tamaño de script reducido: El archivo de aplicación de Kameleoon, creado con TypeScript, tiene un tamaño de 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 esté utilizando.
- Motor anti-flickering único: El motor de Kameleoon captura los eventos del DOM en tiempo real y modifica la visualización de los componentes implicados en una variación del experimento antes de que se rendericen por completo.
- Llamadas de red reducidas: Kameleoon agrupa múltiples eventos de seguimiento en una única llamada beacon, lo que disminuye significativamente el número total de llamadas de red necesarias.
- Carga de un único script: A diferencia de otras plataformas que requieren múltiples archivos, Kameleoon carga un único script consolidado, lo que reduce el número de solicitudes HTTP.
- Carga aplazada de experimentos: Kameleoon le permite seleccionar qué experimentos se incluyen en el archivo de aplicación,
engine.js(anteriormente denominadokameleoon.js), en el momento de la carga inicial de la página, caso por caso, y aplazar los experimentos no esenciales después de la primera carga. - Actualización en tiempo real: Para proporcionar actualizaciones más frecuentes sin verse afectado por la caché del navegador, la función Live Update Experiments de Kameleoon actualiza cualquier experimento etiquetado como “LIVE-UPDATE” en menos de un minuto.