Cómo leer los informes de GTMTrix y analizar la velocidad de su sitio

Gtmetrix es una de las mejores alternativas para las ideas de la velocidad de la página cuando se trata de medir el rendimiento de su sitio en WP Rocket, usamos GTMTrix diariamente, junto con otras pruebas de rendimiento. Sitios y aprovechar al máximo sus recomendaciones. Si bien PageSpeed ​​se centra principalmente en colores y puntaje para guiar a los usuarios a través de sus recomendaciones, Gtmetrix se basa en una interfaz más clásica, en la que la cascada desempeña el papel principal. Varias opciones de personalización (región de prueba del servidor, tipo de navegador, etc.) hacen que la experiencia con GTMetrix sea completa y confiable.
En este tutorial, profundizaremos en GTMetrix y comprenderemos por qué es una herramienta muy válida para evaluar el rendimiento real de su sitio ¿Qué es GTMTRIX y cómo funciona? GTMTRIX es la herramienta de prueba de rendimiento gratuita creada por personas en GT.NET, una empresa de alojamiento con sede en Vancouver, Canadá. Ofrecen soluciones de alojamiento de nubes dedicadas, en clúster y privado, además de un conjunto específico de herramientas de rendimiento: estas incluyen GTMTRIX. Lo primero que sugerimos que hacemos antes de ejecutar una prueba de rendimiento con GTMTRIX es crear una cuenta gratuita.

Esto le permite personalizar su prueba y obtener un resultado de rendimiento más confiable. ¿Cómo personalizar su prueba GTMetrix? Hay varias opciones que puede cambiar para personalizar su experiencia de prueba GTMTRIX. Vamos a verlos juntos.

Ubicación (región de prueba) Hay 30 servidores de prueba disponibles para probar. Como se menciona en nuestro artículo sobre cómo medir correctamente la velocidad de su sitio, el primer paso para obtener resultados confiables para las pruebas de velocidad es elegir una ubicación tan cerca de su servidor significa que si su servidor. Se encuentra en Europa, probando su La velocidad en Canadá le dará un resultado engañoso, a menos que esté apuntando al público canadiense. En este caso, ¡no olvide activar un CDN en su sitio! Puede encontrar las ubicaciones de los servidores GTMTRIX aquí. Navegador que puede elegir entre:
Firefox para escritorio
Chrome para escritorio
Chrome para Android (Galaxy Nexus)
Conexión Ahora, cuando Google se ha mudado a Mobile, es esencial estar al tanto del rendimiento de su sitio en diferentes tipos de redes. Gtmetrix te ofrece más posibilidades:
Conexión irregular
Banda grande (lenta, rápida y normal)
3G Mobile
2G Mobile
LTE Mobile
Dial-up de 56k
AdBlock Con esta opción puede ver el impacto que los anuncios tienen en su sitio cuando marque la opción AdBlock, GTMTrix escaneará su URL mientras que los anuncios están bloqueados.
Puede consultar un ejemplo de caso real en el sitio web de GTMTrix, donde utilizaron el sitio web de la revista Smashing. Apague la prueba de carga Esto apagará la prueba de velocidad inmediatamente después del evento de Onload, en lugar de 2 segundos de inactividad de la red (que es el valor predeterminado para GTMTRIX y se llama tiempo de carga completa). El evento de Onload es cuando terminó el procesamiento general de la página y se han descargado todos los recursos de la página. La desventaja de usar esta opción es que a veces no todos los elementos de la página se descargan antes del evento Onload (piense en imágenes o comportamientos basados ​​en JavaScript) como resultado, los tiempos de medición medidos cuando esta opción se activa. Podría ser inconsistente. Es por eso que, de manera predeterminada, GTMTRIX probará su sitio teniendo en cuenta el tiempo de carga completo: espere para activar el evento de encendido (incluidos los anuncios y los elementos de pliegue) y luego espere una inactividad de red de 2 segundos. Es importante tener en cuenta que un sitio web puede ser perfectamente utilizable en un tiempo más corto que el indicado por el tiempo de carga completo. Cree un video si desea ver cómo se carga exactamente su página, puede activar la opción de video.
Gtmetrix grabará un video en el que verá su página cargando 4 veces más lento, por lo que sería más fácil detectar cualquier problema de carga. Cómo leer las pestañas GTMTrix e interpretar sus resultados Una vez que inicie un informe GTMTRIX, verá toda la información sobre el rendimiento de su sitio. Primero, tiene un resumen de las opciones de prueba elegidas: lo hermoso de GTMTRIX es que es que Le permite ver varios tipos de valores, incluidos los de otras herramientas de prueba, como PageSpeed ​​e YSlow. Por lo tanto, verá los puntajes de rendimiento externos a la izquierda (GTMetrix no calcula uno de ellos) y los detalles de la página a la derecha:
Los detalles de la página son la información más importante e inmediata que puede tener sobre el rendimiento de su sitio:
A tiempo completo cargado, expresado en segundos

El tamaño total de la página, en MB

Número de solicitudes HTTP
Este es un excelente comienzo para comprender cómo funciona su sitio como explicamos en nuestra guía sobre la optimización de velocidad de página de WordPress, las diferentes herramientas de velocidad pueden proporcionar tiempos de carga o resultados de rendimiento diferentes. Esta declaración se vuelve inmediatamente clara cuando mira las pestañas GTMetrix. Aquí está la lista de recomendaciones en la pestaña PageSpeed:
Y aquí está cómo, el mismo sitio web, señala la pestaña Yslow:
Buceando en el diagrama de cascada GTMTrix para profundizar los detalles de rendimiento de su sitio, debe hacer clic en la tercera pestaña y leer el diagrama de cascada GTMTRIX. El diagrama de cascada describe el comportamiento de carga de su página, diseccionando cada solicitud y midiendo su tiempo. Contiene cada script, archivo de medios o recurso externo incluido en la página probada. Esta pestaña es muy útil para tener una idea de los recursos que carga su página y en qué orden. Para cada solicitud, tiene el tiempo de carga, representado por las barras horizontales: cuanto más larga sea la barra, más lenta tomará la solicitud para descargar/ejecución.
El diagrama de cascada GTMetrix incluye cinco columnas; de izquierda a derecha:

El nombre del archivo de recursos solicitados;


La condición de la respuesta HTTP regresó del servidor para el recurso respectivo;

Origen del archivo, de donde proviene el recurso;
Tamaño de archivo para cada recurso;
Desglose de tiempo de carga, que representa el tiempo necesario para descargar/ejecutar cada recurso.
Fuente: Blog GTMTrix Si pasa con el mouse en el nombre del archivo, podrá leer la ruta completa del archivo seleccionado. Y si le da a CTRL+haz clic en él, puede abrir el archivo en otra pestaña para identificarlo mejor y ver su contenido.
Debido a que usa WordPress, será fácil de entender si ese archivo proviene de uno de los complementos o tema que usa. En este momento, tiene frente a usted una imagen muy clara de lo bien que le va a su sitio. Antes de pasar a la sección de tiempo de carga, vigile la cuarta columna, el tamaño del archivo. Si nota los tamaños de archivo grandes aquí, observa el archivo e intenta solucionarlo: ¿hay imágenes o videos? En este caso, eche un vistazo a nuestra guía completa sobre cómo optimizar las imágenes y reducir el tamaño del archivo. Predeterminado del tiempo de carga El código de color creado por GTMetrix es útil para distinguir las diferentes partes del proceso de carga para cada recurso. Pasar con el mouse en el tiempo de carga para cada recurso abrirá una ventana emergente en la que las diferentes fases del proceso de carga de recursos se expresan en diferentes colores: marrón para bloquear
Teal para la búsqueda de DNS
Verde para iniciar sesión

Rojo para enviar
Púrpura para esperar

Gris para recibir
Además del tiempo relativo de cada fase de la ejecución de la solicitud, GTMTRIX también indica el momento del evento, que es el momento específico en el que se alcanzan ciertas etapas. También hay un código de color para el horario del evento:
Una línea verde describe el momento en que la primera reproducción comienza en la página (la primera pintura);
La línea azul indica el momento en que el navegador considera el DOM listo.
La línea roja está encendida, es decir, cuando el navegador ha descargado y procesado todos sus componentes.
Con la línea púrpura vemos el evento completamente cargado: Onload comenzó y no hubo actividad en la red durante 2 segundos. Algunas de estas líneas también se representan en la siguiente pestaña GTMetrix, etiquetada como tiempos. Pestaña Tiempos Esta pestaña es muy útil porque ofrece una explicación clara y visual de los diversos momentos en que se divide el tiempo de carga de su página.
En la imagen de arriba puede ver la información incluida en ella. Tendrá una indicación del tiempo requerido para posibles redirecciones, conexiones y la duración del Backynd. Luego, podrá ver cuánto tiempo dura el tiempo hasta los primeros bytes, seguido del tiempo interactivo DOM, la primera pintura, la pintura de contenido, DOM cargado y encendido. Lo que más nos gusta de la pestaña es cómo el equipo GTMetrix da su tiempo para explicar el significado de cada valor, en inglés simple. ¡Súper útil tener una primera base en el complejo proceso de carga de la página! Las últimas dos pestañas de cualquier informe GTMetrix son video e históricos. El primero registra un video con la carga de su página (incluidos los bloqueos), mientras que el segundo muestra el historial de rendimiento de la misma página probada.

La conclusión en este artículo ha conocido GTMTRIX, una de las mejores herramientas de prueba de rendimiento que puede usar como una alternativa (o junto con) las ideas de la energía.Lo bueno de GTMetrix es que ofrece no solo los indicadores instantáneos y de rendimiento (como el tiempo de carga en segundos y puntajes), sino también un conjunto integral de pestañas de exploración: desde la cascada hasta los eventos y el momento.La pestaña, más mucha información y explicaciones sobre los indicadores de rendimiento.Ahora es el momento de continuar y averiguar sobre otras herramientas de prueba de rendimiento y cómo usarlas: Pingdom vs Gtmetrix vs WebPagetest: ¿Qué es diferir?
¿Por qué se les debe atender las ideas de la vida?
Cómo leer la nueva auditoría del faro de PageSpeed ​​Insights
Cómo medir correctamente el tiempo de carga de su sitio