Los gráficos de cascada son diagramas que representan cómo se descargan los recursos del sitio web, analizados por el motor, en una línea de tiempo que nos da la oportunidad de ver la secuencia y las dependencias entre los recursos. Ayuda a identificar dónde ocurrieron eventos importantes durante el proceso de carga. También pueden permitir que el usuario vea fácilmente lo bueno o malo que es el rendimiento de su sitio web, mostrándole exactamente lo que está ralentizando su sitio.
Los gráficos de cascada dentro de la plataforma Dotcom-Monitor pueden ayudar a los usuarios a identificar dónde ocurrieron eventos importantes durante el proceso de carga de la página. Los gráficos de cascada nos permiten ver un efecto en cascada en varias tareas, y en cuestión de segundos, el usuario puede ver cuán malo/bueno es el rendimiento del sitio web, como cuántos recursos están bloqueando las descargas paralelas o cuántas filas existen. El usuario tiene el resumen en el dispositivo, con visualizaciones descriptivas de las estadísticas del dispositivo en gráficos circulares. Los usuarios también pueden ver la URL real cargando vídeo en la ventana del navegador.
La captura de pantalla siguiente es una muestra de un gráfico de cascada de amazon.com para introducir cómo se ven los gráficos de cascada. Como puede ver, hay una gran cantidad de elementos diferentes que entran en juego durante el tiempo de carga de la página. Algunos de estos factores incluyen los siguientes:
- Url
- Ubicación de la prueba
- Navegador (Chrome, Firefox, Internet Explorer, navegadores móviles, etc…)
- Conexión
- Número de pruebas
- Repetir vista
Elementos utilizados en los gráficos de cascada
Interactive Slider: El deslizador interactivo es un indicador del rendimiento de cada elemento en términos de milisegundos. En la imagen de abajo, se apunta con la flecha. El usuario puede arrastrar el control deslizante interactivo para ver qué elemento se está cargando y en qué momento. En esta captura de pantalla, puede ver que los elementos resaltados se cargan en el milisegundo 531.
Cuadrícula de tiempo de carga:El área resaltada a continuación se denomina Cuadrícula de tiempo de carga. Muestra cuánto tiempo se tarda en cargar para cada elemento.
Lista deelementos: Los elementos que existen en la página web se muestran en la lista de elementos. La extensión del elemento puede ser HTML, CSS, GIF, etc.
Rendimientode elementos: un usuario puede acceder a la información del rendimiento de cada elemento que existe en el gráfico de cascada.
Cuando el usuario hace clic en el botón de elemento específico, se le da la bienvenida por una página de rendimiento, que se muestra a continuación.
Al analizar la página de rendimiento, el usuario tiene un conocimiento más profundo sobre los detalles de la respuesta. Pueden seleccionar el botón deseado del ratón y soltar el ratón para mostrar los detalles. El usuario también puede observar los problemas de rendimiento prestando atención al área marcada en rojo,lo que significa que hay un período de rendimiento hacia abajo.
Detalles del tiempo de carga para elementos individuales: En el gráfico de cascada, cuando el usuario mueve el cursor en una barra específica, se le muestran detalles de tiempo de carga que son DnsTime, ConnectTime, SSLTime, RequestTime, FirstByteTime, ResponseTime, StartTime, EndTime, Speed que apunta en un óvalo rojo.
Explicación de la codificación de color:Dentro de la plataforma Dotcom Monitor, la representación de los detalles del tiempo de carga se define negún los siguientes colores:
Navigation Timings: Se pueden mostrar como una columna en el gráfico de cascada para mostrar el Inicio de navegación, Redirección Inicio, Redirección Final, Fetch Start, Inicio de búsqueda de dominio, Fin de búsqueda de dominio, Conectar inicio, Inicio de conexión segura, Conectar final, Inicio de solicitud, Inicio de respuesta, Fin de respuesta, Descargar inicio de eventos, Descargar evento final, Carga DE DOM, Dom Interactivo, Contenido DOM Cargado Event Start, DOM Content Loaded Event End , DOM Complete, Load Event Start y Load Event End con codificación de color (que se muestra a continuación en el óvalo rojo).
Es importante mencionar que dentro de la plataforma Dotcom Monitor hay una característica que un usuario puede ver el video de carga de URL real en la ventana del navegador (que se muestra a continuación).
Optimización del rendimiento web mediante la comprensión de los gráficos de cascada
El rendimiento y la velocidad de un sitio web juegan un papel tremendo. Si su sitio web no es lo suficientemente rápido, el usuario no esperará a que termine de cargarse. Un sitio web rápido aumenta las tasas de conversión y le lleva a tener un buen rendimiento en los motores de búsqueda. Para entender la velocidad de su sitio web, se utilizan diagramas de cascada. Los gráficos de cascada le ayudan a identificar el origen del problema y son una excelente manera de diagnosticar lo que está ralentizando sus páginas web.
En un gráfico de cascada buscando un tamaño de un archivo que es más de 1 MB puede hacer que su sitio se ralentice. Con la ayuda de la línea de tiempo en el gráfico de cascada, el usuario puede descubrir las diferentes fases de carga de recursos y comprender qué fases ralentizan su sitio web. Algunas de las fases se presentan a continuación:
- Recibir. El tiempo que se tarda en descargar archivos. Esta es la primera fase de la línea de tiempo. Los archivos grandes, como las imágenes no optimizadas, retrasan el tiempo de descarga y absorben más ancho de banda, causando un retraso en el sitio web. La solución para este problema específico es que el usuario debe optimizar los medios reduciendo el tamaño de las imágenes sin reducir su calidad. Para aumentar la disponibilidad de ancho de banda, el usuario debe mantener las imágenes en un servidor en la nube.
- Tiempo de espera. El tiempo capturado por el servidor para producir una respuesta. Si el tiempo de espera es demasiado, puede significar un servidor de red sobrecargado o puede haber un código ineficiente, que debe ser corregido por los desarrolladores de software mediante la búsqueda de los errores y la corrección del código. Además, la utilidad de almacenamiento en caché puede disminuir el tiempo de espera. En ese caso, el usuario debe pasar de alojamiento compartido a alojamiento dedicado.
- Solicitud en cola. Consta de conexiones convenientes HTTP / HTTP2, autenticación HTTP, ejecución de CSS o JavaScript, tiempo de conexión SSL, es una fase importante de la línea de tiempo.
- Búsqueda DNS. Consiste el tiempo para que el DNS resuelva y le da al usuario una gran pista de lo que está ralentizando el sitio web. En general, la mayoría de los scripts están ralentizando los sitios web debido a la búsqueda de DNS.
Cuando el usuario identifica los problemas que están ralentizando su página web con la ayuda de gráficos de cascada, puede comenzar a encontrar una solución al problema. Algunos de los problemas y sus soluciones se representan a continuación.
plugins
| Solución de problemas |
Enlace de seguimiento de páginas | Desinstale o elimine la herramienta de seguimiento que está en uso |
| Búsqueda DNS lenta | El usuario puede usar una CDN |
| Extremo lento del servidor | Envíe un correo electrónico a su proveedor de servicios. |
| Error debido a | El usuario puede desinstalar los plugins. |
| Personalización de temas no utilizados/voluminosos | El usuario puede contratar a un desarrollador web |
Incluso el usuario principiante puede entender rápidamente las razones específicas que están ralentizando su sitio web mediante la observación de los gráficos de cascada. Por ejemplo, las barras largas significan que el elemento relacionado tarda demasiado tiempo en cargarse, el texto rojo significa un error que captura datos y las brechas largas entre las barras significan tiempos en los que no hay solicitudes.
Cómo hacer que los sitios web se carguen más rápido
Mediante el uso de gráficos de cascada, podemos crear una gran experiencia de usuario haciendo que una página web se cargue más rápido.
Disminuir el ancho de la cascada
El rendimiento del sitio web se puede mejorar reduciendo la cantidad de tiempo que se tarda en descargar los recursos, lo que lleva a reducir el ancho del gráfico de cascada.
Si hay largas barras púrpuras en el gráfico
de cascada. Púrpura significa tiempo dedicado a realizar una negociación SSL/TLS. En caso de que un usuario se enfrente con púrpura continuamente, significa que el sitio web no está optimizado para TLS. El usuario debe optimizar el rendimiento de TLS.
Si hay mucha naranja en el gráfico de cascada. Naranja significa la conexión TCP inicial hecha para su sitio web. Solo 2-6 solicitudes a un nombre de host específico deben crear una conexión TCP. Después de 2-6 solicitudes, se reutilizan las conexiones existentes. Cuando un usuario se enfrenta a una gran cantidad de naranja, debe entender que el sitio web no utiliza conexiones persistentes. Cuando se realiza una conexión persistente, el ancho de cada solicitud será la mitad, ya que el navegador web no va a realizar nuevas conexiones con cada solicitud.
Si hay largas barras azules en el gráfico
de cascada. Color azul significa tiempo dedicado a descargar la respuesta. Si hay una barra azul larga, es muy probable que se deba a que el recurso es demasiado grande. Reducir el tamaño del archivo del archivo puede ayudar a resolver el problema. Un usuario puede reducir el tamaño mediante la optimización de imágenes o la compresión HTTP.
Si hay demasiado verde el gráfico
de cascada . El color verde significa que el navegador está esperando para obtener contenido. Para reducir el verde, el usuario debe mover el contenido estático a una red CDN.
Disminuir la altura del gráfico de cascada
La velocidad del sitio web se puede mejorar disminuyendo el número de solicitudes que el navegador necesita realizar para cargar la página web, lo que lleva a disminuir la altura de la cascada. El usuario debe revisar todo su contenido dentro de cada página y decidir si realmente lo necesita en absoluto.
Si hay demasiados archivos JavaScript/CSS que son menos de 2kb
. El usuario debe involucrar el contenido de esos archivos directamente en el HTML a través de inline, , or
Etiquetas.
Si hay demasiados archivos JavaScript/CSS en el gráfico de cascada.
El usuario debe combinarlos con el plugin CMS o como parte de un proceso de compilación. Esta acción disminuirá el número de solicitudes realizadas, aumentará la velocidad de la página.
Si hay demasiadas 302 redirecciones
. Filas amarillas significan redirecciones, lo que significa que los enlaces en la página se hacen por error o desactualizado, que crean redirecciones innecesarias que aumentan la altura de la cascada. La solución es reemplazar esos enlaces con enlaces directos.
Aumentar el tiempo de renderización
Para mejorar el tiempo de representación, el usuario debe optimizar el orden de las solicitudes de recursos, lo que mueve la línea verde Iniciar renderización a la izquierda.
Si hay demasiadas solicitudes de archivos CSS separados.
Antes de que los navegadores comiencen a representar la página, esperan hasta que se descargue todo el CSS. El usuario debe enlínear o combina esos archivos CSS.
Si un usuario ve llamadas para cargar bibliotecas JavaScript
. JavaScript incluye puede bloquear la representación de páginas. El usuario debe moverlos más abajo en la página.
Si un usuario ve fuentes externas
. Hasta que el navegador descarga la fuente externa, no dibuja nada. El usuario debe evitar el uso de fuentes externas.
Primera visita y repetición de la visita. ¿Qué es más importante?
En función de la visita del usuario, puede haber dos tipos de gráficos de cascada creados: Primera visita y repetir visita. ¿Cuál es la diferencia?
Caché vacía (primera vista): el usuario accede al sitio web por primera vez y no tiene datos almacenados en caché. Las herramientas típicas basadas en explorador van a borrar la memoria caché antes de realizar las solicitudes. En otras palabras, la gente está visitando el sitio web por primera vez.
Modo en caché (repetir visita): El usuario accede al sitio web por segunda vez, emulando una segunda visita desde la perspectiva del usuario, que incluye todos los archivos ahora almacenados en caché en un almacenamiento local. En otras palabras, debido a que las personas visitaron su sitio de antemano, ahora pueden tener sus imágenes, CSS cobrado en su navegador por lo que el sistema no tiene que entregar mucho a ellos.
En las capturas de pantalla a continuación, puede ver lo diferente que es el primer gráfico de cascada de visita y el gráfico de cascada de visita repetida.
Una de las cosas importantes a tener en cuenta es que la memoria caché vacía tarda 6,8 segundos en cargarse, mientras que la repetición, que es un modo almacenado en caché, tarda 1,9 segundos.
Si el sitio web está funcionando bien, será el mismo caso en términos de comparación de tiempos, con caché vacía que tarda más tiempo que la versión almacenada en caché. La razón es en la primera visita, las herramientas vaciarán la memoria caché antes de realizar las solicitudes, y en la visita repetida, el sistema tendrá los archivos que se pueden almacenar en caché en un almacenamiento local, lo que lleva a un tiempo más corto para cargar el sitio web.
El gráfico modo en caché (vista de repetición) tiene menos filas, lo que significa que se cargaron muchos menos recursos. Este es un buen ejemplo de un sitio web donde se utiliza el almacenamiento en caché eficiente.
Sin cambiar nada en el sitio, la visita repetida respondería más rápido debido a los elementos que se almacenan en caché. La primera visita por primera vez tomaría más tiempo que la visita repetida. Si algo está mal en el sitio web, lo que ralentiza el sitio web, el usuario lo corrige. Y vuelven a probar el sitio web. Consideran factores como la geolocalización, los servidores CDN y poP (puntos de presencia). Pueden ver en los gráficos de cascada qué elemento está ralentizando el proceso. Tal vez el sitio web está utilizando demasiada CPU. Después de corregirlo, pueden probar el sitio web de nuevo.
La primera visita por primera vez es importante porque el usuario entiende cuánto tiempo se tarda en descargar las imágenes y otros recursos. La visita repetida también es importante porque después del proceso de almacenamiento en caché, el usuario debe evaluar cuánto tiempo se tarda en cargar los elementos restantes. Además, el usuario observa qué recursos se almacenan en caché mirando los gráficos de cascada desde la primera visita y la visita repetida. Así es como un usuario puede entender el rendimiento del sitio web y los problemas de contenido con los recursos.
¿Quieres ver qué elementos podrían estar ralentizando tu sitio web? Ejecute una prueba de velocidad gratuita del sitio web y vea sus resultados a través de gráficos de cascada e informes de rendimiento.
Cómo usar un gráfico de cascada para supervisar su distribución de CDN adecuada
Una red de entrega de contenido (CDN) es un grupo de servidores distribuido geográficamente optimizado para entregar contenido estático a los usuarios finales. Este contenido estático puede ser casi cualquier tipo de datos, sin embargo, las CDN se utilizan generalmente para entregar páginas web y sus archivos relacionados, audio, streaming de vídeo y paquetes de software de gran tamaño.
Utilización de CDN
Los servidores perimetrales de una red CDN mejoran la velocidad al cerrar la brecha entre los recursos del sitio web y sus visitantes. En lugar de realizar solicitudes directamente al origen de un sitio web, los usuarios se conectan a las varias plataformas de distribución de CDN que tiene el proveedor. Cuanto más cerca viaje una solicitud, más tiempo se ahorrará. Además, el alojamiento de CDN admite la compresión de archivos que mejora la exploración general porque los tamaños de archivo más pequeños equivalen a velocidades de carga más rápidas.
Uso de gráficos de cascada para monitorear LAS CDN
En la captura de pantalla de un gráfico de cascada a continuación, el área URL de supervisión representa la lista de todos los elementos individuales, junto con su tamaño y rendimiento a la derecha.
Si el usuario está aprovechando una red CDN, es posible que vea muchos archivos y recursos procedentes de ese origen, que es una forma de determinar si la red CDN está configurada correctamente.
¿Necesita una CDN?
Los gráficos de cascada permiten al usuario descubrir cómo la latencia está influyendo en la velocidad del sitio web. Volviendo al gráfico codificado por colores anteriormente en el artículo, la barra amarilla significa que el explorador web está esperando datos del servidor de nombres de dominio (DNS). Generalmente, el tiempo de espera de 100 ms se acepta como normal, mientras que 400ms se considera lento. Cuando hay un problema de velocidad, se puede interpretar como un recurso que tarda demasiado tiempo en descargarse o su tamaño es demasiado grande. Además, puede significar que la velocidad de transferencia del servidor web es demasiado lenta. Para este problema específico, el uso de CDN podría ser una solución para reducir el tiempo de espera.
Además, si el usuario experimenta demasiado tiempo de espera para obtener una respuesta, puede significar que el contenido del sitio web está físicamente más lejos del visitante. Para poder decidir si hay una necesidad de CDN, debe conocerse la ubicación del servidor. Para ello, se puede utilizar una plataforma como Dotcom-Monitor para supervisar una ubicación más alejada de su servidor. Revise el gráfico de cascada y las filas de solicitudes y recursos. Si el tiempo de espera es superior a 100 ms, el usuario debe considerar el uso de CDN.
Pruebe la plataforma completa Dotcom-Monitor gratis durante 30 días.
