Debido a la gran variedad de tecnologías web incorporadas contenidas con páginas web modernas, la supervisión del rendimiento y las pruebas de carga pueden ser una tarea difícil. En este artículo se examinarán las particularidades de la supervisión de aplicaciones web dinámicas y otros elementos que se deben tener en cuenta al elegir el tipo correcto de herramienta o solución de supervisión.

Páginas Web Dinámicas frente a Páginas Web Estáticas

Todas las variedades de tipos de páginas web se pueden dividir en dos grupos principales: estático y dinámico.

En pocas palabras, una página web estática es una página HTML generada en el lado del servidor en un formulario listo para usar. Generalmente, la generación de páginas se implementa utilizando lenguajes de script del lado del servidor como ASP, PERL, PHP, etc. Cuando un explorador realiza una solicitud a una dirección URL, el servidor devuelve un documento HTML que ya incluye texto y contenido gráfico de la página web en la respuesta.

Por otro lado, el tipo más común de páginas web o aplicaciones hoy en día son dinámicos. Para implementar elementos dinámicos, los marcos de JavaScript más recientes como React, Vue, Angular JS, Knockout y Ember se utilizan en el desarrollo web.

Las páginas web dinámicas aportan el contenido de las acciones del usuario mientras se ejecutan en una dirección URL estática. El contenido dinámico es más complejo en su estructura. Las páginas no se reciben del servidor en documentos HTML listos para usar, pero se crean para cada nueva solicitud en el equipo del cliente. Cada vez que un usuario hace clic en un botón o realiza cualquier otra acción en la página web (navegar entre pestañas, rellenar formularios web, etc.), el navegador realiza varios pasos antes de volver a escribir el contenido de la página en la ventana:

  • Analiza el documento HTML en el modelo de objetos de documento (DOM);
  • Procesa CSS;
  • Ejecuta JavaScript incrustado.

La supervisión de aplicaciones basadas en JavaScript

Mientras supervisa el rendimiento estático de la página web, las herramientas de supervisión están examinando la respuesta HTTP recibida del servidor de destino. Cada vez que un usuario interactúa con una página web estática, un explorador llama al servidor y recibe un HTML listo en la respuesta. Dado que todo el contenido que se debe mostrar a un usuario ya está generado e incluido en la respuesta en el lado del servidor, las herramientas pueden validar el contenido y las métricas de carga de página.

Sin embargo, los marcos de JavaScript modernos proporcionan algunos desafíos cuando se trata de supervisar páginas web dinámicas.

Validación de contenido y funcionalidad

Las páginas web basadas en JavaScript, conocidas como
aplicaciones de una sola página
(SPA), no realizan una nueva navegación en el explorador una vez que se han cargado. El documento HTML inicial incluye archivos JavaScript que se activan en cualquier evento del explorador y llama al servidor para los datos JSON. Estos datos se utilizarán para actualizar el HTML inicial y cambiar dinámicamente el contenido de la página en la ventana del explorador.

Al mismo tiempo, las SPA y las aplicaciones con elementos en línea IFrame pueden incluir contenido de terceros incrustado, como secciones de anuncios, análisis, widgets (Google Maps, vídeos de YouTube, etc.). Para mostrar dicho contenido, los exploradores analizan el código HTML de la página y, a continuación, ejecutan scripts de terceros. A continuación, los scripts de terceros capturan el contenido para mostrarlo en la página.

En términos de supervisión, esto hace que sea difícil decir exactamente cuándo se cargó nuevo contenido en la página (cargar una imagen, abrir un cuadro de diálogo, etc.) porque no hay ningún evento generado y visible para las herramientas de supervisión basadas en HTTP.

Determinar los tiempos de carga y el rendimiento reales de la página

Por lo general, las respuestas HTTP se utilizan como resultado correcto de la solicitud a una página web de destino. Pero esto no significa que todos los archivos JavaScript fueron analizados y ejecutados por el navegador y el contenido se hizo y se hizo visible para los usuarios. Una vez cargado el HTML inicial, el navegador comienza a ejecutar todo el JavaScript incrustado. En términos de SPAs e IFrames, el árbol DOM se puede representar mucho antes o más adelante, a continuación, se completa la carga de página. En otras palabras, la diferencia entre el momento en que un usuario real puede interactuar con una página y el tiempo de carga del evento “completo” podría ser de hasta varios segundos.

Además, una vez cargada la página basada en JavaScript, todos los cambios posteriores en la página no desencadenan nuevas solicitudes de explorador al servidor. Como resultado, la supervisión basada en HTTP no proporcionará ninguna métrica de cambios en la página después de la carga inicial de la página. Para recibir tiempos de carga reales, necesitamos monitorear los eventos de JavaScript en la ventana real del navegador.

Soluciones de pila completa como clave para una supervisión integral

Como se muestra anteriormente, los rasgos lógicos modernos de la aplicación web ponen limitaciones en la supervisión y las pruebas con herramientas que funcionan en el nivel de protocolo y NO utilizan un explorador.

Para imitar la experiencia de usuario real, se requiere un navegador real para realizar la supervisión en el entorno de tiempo de ejecución de JavaScript completo. Las soluciones de pila completa, como la plataforma de supervisión Dotcom-Monitor y la solución de pruebas de carga LoadView, utilizan navegadores reales para ayudar a superar todos los desafíos descritos y garantizar resultados realistas.

Monitoreo de páginas web dinámicas con Dotcom-Monitor y EveryStep Web Recorder

Para asegurarse de que un usuario recibe el contenido adecuado en una página cargada que se ejecuta en el motor JavaScript, Dotcom-Monitor proporciona una palabra clave de aserción y la funcionalidad de validación de imagen en la ventana del explorador real. Estos son los sencillos pasos que debe ejecutar:

  1. Acciones de usuario de script en la página web de destino mediante EveryStep Web Recorder.
  2. Configure la validación de contenido para cada paso.

Por ejemplo, configuremos la supervisión de la página Historial de informes de correo electrónico de Dotcom-Monitor como ejemplo de una página web basada en JavaScript.

En primer lugar, necesitamos abrir EveryStep Web Recorder y proporcionar la URL de destino.

Una vez iniciada la grabación, para asegurarnos de que los menús desplegables de la página funcionan correctamente y se cargó el contenido especificado, necesitamos comprobar los elementos desplegables y configurar una palabra clave de aserción por cada lista desplegable. En el caso de un error de validación de contenido, se generará una alerta para el dispositivo de supervisión.

Cómo detectar problemas de rendimiento en las ZCA

La lógica SPA se basa en gran medida en la tecnología JavaScript. Por lo tanto, para asegurarse de que se cumplen los requisitos de SLA de la aplicación, es necesario supervisar las métricas de rendimiento de los eventos de JavaScript generados en la página.

Dotcom-Monitor permite a los usuarios configurar informes sobre el momento de la ejecución de solicitudes JavaScript o el momento de procesar y ejecutar una acción de usuario específica en la página de destino. Para recibir datos sobre las métricas de JavaScript en los informes de dispositivos, utilice las funciones en línea de Network Watcher y Time Watcher en ES Recorder.

Además, para aplicaciones web creadas con tecnología AJAX, puede detectar métricas de solicitudes AJAX en el gráfico de cascadadel dispositivo.

Resumen

En resumen, al configurar la supervisión de páginas web y aplicaciones dinámicas, se recomienda utilizar una solución de supervisión que utilice navegadores reales para detectar todos los eventos de JavaScript en la ventana del explorador, lo que le proporciona los resultados de supervisión más precisos.

Para supervisar el rendimiento dinámico del contenido y la funcionalidad en los SPA, se debe realizar la validación de contenido (validación de imágenes y palabras clave) en entornos de explorador reales y la supervisión de métricas de rendimiento de JavaScript.