Análisis de la prueba de velocidad en 2 minutos: cómo leer un diagrama en cascada

Un diagrama de cascada es probablemente la pieza de datos más valiosa que puede obtener del rendimiento de un sitio web. Pero también es uno de los más voluminosos. A veces asustan a los usuarios inexpertos e incluso los profesionales necesitan algo de tiempo para analizar los diagramas en cascada. En este artículo, le mostraré 7 trucos con los que sacudirá el próximo análisis del sitio web en solo unos minutos. Aprenderá fácilmente a leer y analizar un diagrama de cascada. Rendimiento, velocidad de página, tiempo de carga del sitio. Todos estos términos describen uno de los aspectos más importantes de cualquier proyecto web. El tiempo de carga puede influir en la clasificación de Google y también determina la participación de los usuarios. Especialmente en dispositivos móviles. La última herramienta de rendimiento de Google, Test My Sitio, es un excelente ejemplo de la importancia de cargar el sitio web: si analiza su sitio web con Test My Site, Google le dirá cuántos usuarios del sitio, la web probablemente perderá debido a la Velocidad de cargar su sitio.

Para Raidboxes.io, Google predice una pérdida del 19% de visitantes debido a nuestra velocidad de carga de cinco segundos.Un sitio web con carga rápida y bien optimizado es un requisito previo importante para el éxito de un proyecto web, ya sea la venta de productos, compartir opiniones e información o recaudar dinero para su negocio o para una buena causa.Los datos de Google muestran que la probabilidad de que un usuario de dispositivos móviles deje que su sitio web prematuro crece, cuanto más tiempo se tarda en cobrar su sitio.Si, por ejemplo, su sitio está cobrando en aproximadamente seis segundos, la probabilidad de que un visitante abandone el sitio temprano es 106 por ciento más alto que en el grupo de control.

Por lo tanto, el análisis de la velocidad de carga percibida de un sitio web es una tarea importante pero a veces aburrida. Debido a que analizamos docenas de sitios web de WordPress todas las semanas, no solo automatizamos el proceso, sino que también vine con algunos hacks útiles para usar para acelerar en gran medida su propio análisis. Solo unas pocas herramientas le brindan la información de rendimiento que necesita, pero en primer lugar: hay una multitud de herramientas que pueden medir el rendimiento de su sitio de alguna manera. Básicamente, hay dos tipos de pruebas: auditorías de optimización y auditorías de rendimiento. El primero le muestra qué tan bien ya está optimizado su sitio de WordPress y cómo se puede mejorar más. Google PageSpeed ​​Insights, Google prueban mi sitio y Yahoo Yslow son ejemplos bien conocidos. Lo que hacen estas herramientas es comparar su sitio web con un conjunto de reglas. Cuanto más cumplan su sitio con varias reglas, mejor será el resultado de la prueba. Las pruebas de rendimiento o velocidad, por otro lado, realmente miden su sitio web que se reproducirá en el navegador de un usuario. WebPagetest, Pingdom y Gtmetrix son tres ejemplos bien conocidos (y gratuitos). Estas son las herramientas que desea usar. Porque solo las auditorías de rendimiento le brindan los datos que necesita para optimizar correctamente un sitio web y medir su éxito. Y las auditorías de rendimiento le darán uno de los datos más valiosos: el diagrama de cascada. Este diagrama le mostrará exactamente lo que sucede cuando un usuario visita su sitio web, cuándo sucede y cuánto dura su servidor web.
Lo que es un diagrama de cascada y por qué puede parecer complejo (solo son formas y colores) la estructura cronológica es lo que hace que un diagrama de cascada sea tan valioso. Le permite comprender exactamente lo que hace su sitio y le permite identificar procesos y elementos potencialmente dañinos que ralentizan su sitio. Independientemente del instrumento que use, el diagrama de cascada siempre tiene cuatro características idénticas, que debe saber: el eje x (horizontal) es el eje del tiempo. Indica cuánto dura la carga de cada elemento de su sitio web.
Gtmetrix muestra el tiempo de carga de su sitio en la esquina inferior derecha del diagrama de cascada.
Pingdom, que probablemente tiene los diagramas de cascada más hermosos, muestra el tiempo de carga en el medio del borde inferior de sus vistas a la cascada.

WebPageTest no muestra el tiempo de carga general de su sitio en el borde inferior del gráfico. Pero contiene una escalera completa, lo que hace que sea más fácil de leer. 2) El eje Y (vertical) contiene cada solicitud y recurso necesario para cargar completamente su sitio.

Los diagramas de cascada presentan las solicitudes de su sitio en orden cronológico. Si hace clic en una solicitud, recibirá información adicional sobre el recurso apropiado que se carga.

3) Un tipo de código muestra qué tipo de recursos están cargados (imagen, CSS, JavaScript, etc.)

WebPageTest, por ejemplo, utiliza este código de color para identificar imágenes, JavaScript, CSS, etc.
Pingdom, por otro lado, usa estos símbolos para identificar los diferentes tipos de recursos.4) Un sistema de codificación adicional muestra cómo se ejecutan las solicitudes individuales (mientras dure el servidor web, cuántas conexiones deben abrirse y si se usan o no HTTPS) Pingdom usa colores para indicar las diferentes fases de una solicitud HTTP.Cada instrumento tiene su propia lógica, cuando se trata de códigos de color.Pero, prácticamente, todos usan los mismos cuatro elementos en sus diagramas de cascada.Una vez que entiendes eso, un análisis es de hecho un juego infantil

Análisis de cascada En 2 minutos ahora que sabe cómo leer un diagrama de cascada, es hora de mostrarle los 7 hacks que inventamos, lo que le permite analizar cualquier página web en 5 segundos o menos. Estos trucos lo ayudarán a comprender cómo y qué tan rápido está cargando su sitio y le mostrará dónde es el potencial para que su proyecto sea más rápido y mejor. Regla #1 – El tamaño es importante: cuanto más corto sea, cuanto mejor sea la cascada, más demandas se deben jugar y más lento puede ser. Sin embargo: una vista “larga” de la cascada no siempre es algo malo. Debido a que necesita ciertas funciones y recursos externas en su sitio web, como un complemento de chat de asistencia, un mapa de Google Analytics, puede necesitar una cierta longitud. Y si usa HTTP/2, que solo es posible si su sitio se carga a través de HTTPS, su sitio también puede aprovechar el servidor de carga y empuje paralelo. Esta tecnología mitiga los efectos negativos de demasiadas solicitudes HTTP.

Desde nuestra experiencia, no existe una correlación directa entre la longitud de un diagrama de cascada y la velocidad de carga real.Sin embargo, hay un límite: 100 solicitudes parecen ser el umbral.Si su sitio web produce más solicitudes, debe mirarlo más de cerca e intentar reducir la cantidad de solicitudes HTTP, por ejemplo, deshacerse de algunos recursos externos.- Si la visualización de la cascada supera las 100 solicitudes, échale un vistazo más de cerca e intente reducir la cantidad de solicitudes.Regla #2 Total de carga total El valor máximo de su eje x es crucial para su análisis le mostrará cuánto tiempo lleva hasta que su sitio se reproduce por completo.Cuanto eje más pequeño es el número al final del eje x, mejor.

Si este valor es mayor de 10 segundos, utilizando una métrica completamente cargada (predeterminada en GT Manux), definitivamente debe verificar la velocidad de carga de su sitio: las velocidades de carga total deben ser <10 segundos. Regla #3-verde y azul: lo que el usuario siente como usuario de Internet y visitante del sitio web, no le importa la velocidad de un sitio web "en papel". Todo lo que importa es qué tan rápido percibe que es un sitio web. Como webmaster, puede anticipar este hecho usando la memoria en caché y un CDN. El hecho de que los usuarios actúen de acuerdo con lo que perciben, no lo que mide, es aún más importante al analizar la velocidad de cargar un sitio web. WebPagetest es la única herramienta de prueba gratuita que conocemos, que en realidad diferencia entre una velocidad de carga tecnológica y una velocidad de carga percibida. Todo el diagrama de cascada o el valor "completamente cargado" representa una velocidad de carga tecnológica menos importante. Sin embargo, las líneas azules y verdes en la visualización de la cascada representan lo que los usuarios perciben al visitar su sitio web.
El período de tiempo en el que los usuarios realmente ven la reproducción en su sitio web está marcado por el espacio entre la línea verde y azul. Estas dos líneas deben estar lo más lejos posible y lo más cercano. La línea verde representa el evento "Inicio Render", que es el momento en que su sitio comienza a cargar su primer elemento visual. La línea azul marca el momento en que los usuarios perciben que un sitio web está completamente cargado, lo que significa que es muy probable que interactúe con él. Como dije: WebPageTest es la única herramienta de prueba gratuita que conocemos, que diferencia estos dos valores. Otras herramientas de prueba, como Pingdom Tools o Gtmetrix, no. Por lo tanto, esta regla solo se aplica a los diagramas de cascada webpagetest: -La barra verde debe aparecer alrededor de 2-3 segundos de la línea base, y la barra azul no debe estar más allá de los 6 segundos de la línea base. Regla #4 – Detección de HTTP/2 Las primeras tres reglas vienen en una mente muy natural: pocas solicitudes, períodos cortos de tiempo, distancias cortas, etc. Y este cuarto es muy fácil de detectar. Con esto, puede verificar si su Hoster está utilizando o no el estándar HTTP/2-A que acelera enormemente su sitio en comparación con HTTP/1. Tenga en cuenta que HTTP/2 solo funciona si su sitio se carga a través de HTTPS. Una de las mejoras más importantes, en comparación con HTTP/1.1, es el procesamiento paralelo. Su sitio web puede solicitar y cargar más recursos desde el servidor simultáneamente. Y este proceso es claramente visible en la visualización de la cascada.
A la izquierda, puede ver las primeras solicitudes de Raidboxes.io cargadas a través de HTTP. Como puede ver, las solicitudes individuales están cargadas cronológicamente. A la derecha verá la misma sección cargada a través de HTTPS. En este caso, las solicitudes individuales se cargan en paralelo y se elevan más rápido. Entonces, si las solicitudes consecutivas se cobran en paralelo, su sitio se beneficia del nuevo estándar. Si no, debe consultar con su proveedor de alojamiento. Pero recuerde: HTTP/2 solo se puede usar si su sitio está equipado con un certificado SSL válido. Si no está seguro, también puede usar un instrumento como este para verificar HTTP/2 Nota: Si su sitio no se carga en paralelo, no use HTTP/2 Regla #5: Las imágenes podrían ser las imágenes más pequeñas son probablemente las más Factor de rendimiento importante de su sitio de WordPress después de almacenar en caché. Porque por cada imagen que subes, WordPress crea muchas imágenes para tu sitio, las llamadas imágenes presentadas o miniaturas. Por lo tanto, la compresión de la imagen es una de las formas más poderosas de reducir el tamaño de su sitio. no resaltar imágenes). Y si esas barras sospechan más tiempo que las otras solicitudes de su sitio (lo que significa que les toma mucho más por la carga), debe echar un vistazo a sus imágenes en detalle.

LEYENDA: Estos dos sitios web son un gran ejemplo de imágenes de los sitios web sin comprimir versus optimizados. Las imágenes en el primer sitio deben reproducirse hasta 8.5 segundos. Es muy largo. El segundo ejemplo tiene imágenes bien optimizadas, pero como puede ver, todavía no usa HTTP/2. Desde nuestra experiencia, alrededor del 30% de los sitios web que hemos probado tienen el potencial de comprimir sus imágenes aún más. -Si las barras de imagen son mucho más largas que otros elementos del sitio web, intente reducir el tamaño de la imagen o mejorar su compresión. Regla #6-Identificación de redireccionamientos Un diagrama de cascada es una excelente herramienta para comprender su sitio. Le muestra qué elementos están cargados, si su sitio tiene problemas o errores durante la carga y también le muestra cuántas redirecciones también están configuradas donde se establecen donde indican. Legend: Como puede ver aquí, más solicitudes HTTP de Raidboxes.io se redirigen a otras direcciones de URL. Cada respuesta 3xx está marcada con una fila amarilla. Cada redirección se resalta e incluye el tipo de redirección. Varias veces hemos logrado detectar redirecciones innecesarias o dañinas en los sitios web de los clientes utilizando un diagrama en cascada. – Las líneas amarillas son redirecciones. Si uno no tiene sentido, investigue. Regla #7-Identificar los errores con un solo aspecto A veces, los componentes de su sitio no se reproducen correctamente. Por ejemplo, un marco de adsense, un mapa o fuente. Con un diagrama de cascada, puede identificar fácilmente estos componentes: cada fila roja es un tipo de error.

LEYENDA: Este sitio web produce más errores 4xx. Una vez más, la herramienta de prueba te muestra y qué tipo de error se ha cumplido. El sitio web anterior produce varios errores 404. Un análisis de las solicitudes muestra que todas están relacionadas con una licencia temática faltante. Una vez renovado, todos los 404 desaparecieron. – Las filas rojas indican errores 4XX. Tomar el control: una vista de cascada es probablemente la pieza de datos más valiosa que puede obtener bien, ahora entiendo. Nos llevó un poco más de 2,100 palabras. Pero ahora conoce nuestros 7 trucos en cascada que le permiten realizar una auditoría de rendimiento fundamental y un análisis de cualquier sitio web en unos minutos. Un diagrama de cascada combina varios conjuntos de información, incluidos los tiempos de carga, el orden de reproducción y la consola de solución de problemas. Esta es una pieza de datos muy valiosa. Y si sabe cómo analizarlo correctamente, generalmente no toma más que un aspecto para saber todos los hechos importantes sobre un proyecto web. Solo busque los patrones traicioneros:

¿Es el diagrama de cascada demasiado largo? (Más de 100 aplicaciones)


¿El tiempo de carga es demasiado alto? (Más de 10 segundos)

¿Las solicitudes se cargan en paralelo? (= Usando http/2)

¿Son demasiados y demasiado largos palos violetas? (= Imágenes mal optimizadas)
¿Están las líneas verdes y azules demasiado lejos a la derecha o demasiado lejos? (= Experiencia de carga de página percibida por un usuario)
¿Hay líneas amarillas inesperadas? (= redireccionamiento)
¿Hay filas rojas? (= errores de representación)
Y no se preocupe: si hace este análisis varias veces, no solo podrá hacerlo en unos minutos, sino que comprenderá mejor todos sus sitios web y proyectos de WordPress.