Gráfico de cascada: visualización de datos para el análisis del rendimiento web

Su sitio web no está funcionando de manera óptima, y no entiende si es un problema con el tamaño de sus imágenes, un almacenamiento en caché deficiente o si la lentitud es causada por contenido lento de terceros o CDN. Incluso podría ser causado por otro factor por completo.

Un gráfico de cascada, una forma de visualización de datos que mapea el efecto acumulativo de los valores introducidos secuencialmente, puede ayudar. Al realizar un seguimiento del rendimiento web, un gráfico de cascada puede ayudar a determinar cuánto tiempo tarda cada acción entre el servidor web y el usuario cuando un usuario accede a un sitio web. Estos datos pueden ayudar a los administradores de sitios web a comprender cómo los elementos individuales de sus sitios están afectando el rendimiento.

Rendimiento del gráfico de cascada

Los gráficos de cascada ayudan a detectar los arrastres de rendimiento

Los gráficos de cascada generalmente se muestran como gráficos de barras cuando se realiza un seguimiento del rendimiento web. Como se muestra en el gráfico de cascada anterior, cada fila representa un objeto diferente dentro de la página, como texto, una imagen o un archivo JavaScript. Cada objeto hace su propio viaje de ida y vuelta entre el servidor y el navegador, y el tiempo que tarda en hacerlo se captura en el gráfico de cascada, representado por una barra de color diferente para cada actividad. Los tiempos se miden para la búsqueda de DNS, conexión, SSL, solicitud, primer paquete y descarga, ya que cada objeto se entrega al navegador. Cada actividad se indica en la leyenda en la parte inferior del gráfico. Algunas actividades están sucediendo en paralelo.

Aprendamos a leer un gráfico de cascada echando un vistazo a cada una de estas mediciones y cómo pueden afectar potencialmente el rendimiento del sitio web:

1) La búsqueda de DNS (naranja) asigna el tiempo que tarda el navegador en buscar el dominio del objeto que se solicita. Si los tiempos parecen largos, el almacenamiento en caché puede estar desactivado o no es eficiente. Los desarrolladores también pueden usar «keep-alives» para abordar este problema. Keep-alives le permite probar si la conexión TCP todavía se está ejecutando o si se ha roto.

2) La conexión (púrpura) mapea el tiempo que tardan el navegador y el servidor en reconocer que existe una conexión entre ellos. Limitar el número de conexiones agrupándolas puede ayudar a mejorar ligeramente el rendimiento.

3) SSL (rojo) mapea el tiempo que tardan el navegador y el servidor en «darse la mano» antes de establecer una conexión, si el componente está protegido por SSL ( cifrado de clave pública / privada). Si utiliza SSL, puede acelerar el rendimiento cifrando solo los elementos esenciales, no todos los objetos.

4) Solicitud (azul claro) es el tiempo que tarda el navegador en enviar la solicitud al servidor.

5) El primer paquete (azul verde) es el tiempo entre el momento en que se solicita el contenido de un servidor y el momento en que llega el primer bit. Las velocidades de conexión a Internet pueden ser un problema aquí; Si un usuario tiene un ancho de banda limitado, esto podría afectar al rendimiento. El código o la base de datos del lado del servidor también podrían estar causando problemas de rendimiento.

6) Descargar (azul oscuro) es el tiempo que tarda cada pieza de contenido en enviarse desde el servidor al navegador. Demasiado azul significa que hay demasiados objetos de página o que cada objeto es demasiado grande. La compresión, la minificación, los algoritmos más compactos y la eliminación de la redundancia pueden ayudar.

En el caso de los gráficos de cascada, menos siempre es mejor. Cuantas menos filas haya en el gráfico y más corta sea cada barra, mejor será el rendimiento de su sitio web. ¿Interesado en ver cómo los elementos de su sitio web están afectando el rendimiento? Puede crear un gráfico de cascada para su propio sitio web utilizando esta herramienta de prueba de velocidad del sitio web de Dotcom-Monitor.

Latest Web Performance Articles​

Las 25 mejores herramientas de supervisión de servidores

En este artículo, ofrecemos nuestras selecciones de expertos de las 25 mejores herramientas de monitoreo de servidores para ayudar a monitorear el tiempo de actividad de su sitio web y brindar a sus usuarios la mejor experiencia, comenzando con nuestra propia solución en Dotcom-Monitor. Descubra por qué la supervisión de servidores es una parte esencial de cualquier estrategia de supervisión.

Las 20 mejores herramientas de monitoreo sintético

El monitoreo sintético permite a los equipos monitorear y medir el rendimiento del sitio web y las aplicaciones web durante todo el día desde todos los puntos de vista imaginables, y recibir alertas antes de que los problemas comiencen a afectar a los usuarios reales. Aquí están nuestras mejores opciones para herramientas de monitoreo sintético, liderando con las nuestras en Dotcom-Monitor.

Start Dotcom-Monitor for free today​

No Credit Card Required