WebPageTest – La mejor herramienta para medir la velocidad de carga web

Entre estos servicios tenemos a Google PageSpeed Insights, GTMetrix, Pingdom y WebPageTest.

Me centraré exclusivamente en este último, ya que me lo recomendaron en una reciente ponencia de WordPress a la que asistí.

WebPageTest es un sitio de pruebas de rendimiento de sitios web, pensado principalmente para desarrolladores.

Ofrece una multitud de posibilidades para comprobar el rendimiento de una web, aunque con una apariencia relativamente anticuada.

Pero no te dejes engañar por su aspecto.

De todas las principales plataformas de pruebas, ésta es considerada la mejor, debido a su enorme número de opciones.

Incluso la página de inicio muestra su potencia, abriendo como lo hace con el modo de Advanced Testing.

Excavemos las opciones que ofrece esta impresionante herramienta.

Opciones de WebPageTest

Pruebas Avanzadas(Advanced Testing)

Hay demasiadas opciones en la sección de Advanced Testing para tratar, ya que está diseñada para ser una potente herramienta para desarrolladores.

Pero hay opciones aquí que no están disponibles en la sección de Simple Testing que pueden ser muy útiles, incluso para los principiantes.

Para empezar, hay un gran número de ubicaciones de prueba para elegir, y en la ubicación predeterminada, también una gran variedad de dispositivos para utilizar.

Puedes elegir entre muchos dispositivos Android y Apple con los que realizar el test. Si lo prefieres, selecciona tu ubicación en el mapa en Select from Map.

Una vez que elegida la ubicación, selecciona el navegador que quieras usar, y en Advanced Settings, la velocidad de conexión.

El gran abanico de opciones de prueba que ofrece hace que sea una herramienta muy potente para los programadores.

Se pueden ejecutar hasta 9 pruebas consecutivas, y mostrar resultados sólo para la primera vista o también para las vistas repetidas, y puede capturar vídeo de la carga de la página también.

Ir a las otras pestañas sólo sería útil para los desarrolladores, por lo que hay una gran variedad de opciones para personalizar tus pruebas.

Test sencillo (Simple Testing)

La interfaz Simple Testing es muy sencilla. Puedes elegir entre una configuración de escritorio o una de las tres configuraciones móviles, utilizando Slow 3G, Regular 3G o 4G.

También puede incluir una repetición de la visita del sitio y hacer una auditoría en Lighthouse, pero ahí es donde se detienen sus opciones.

Para una prueba simple, este es un buen punto de partida.

Resumen del test

Cuando la prueba ha terminado, aparecerá un resumen de resultados.

WebPageTest prueba las páginas con una serie de seis sugerencias de velocidad, y le da una calificación (de A a F) con respecto a las primeras 5, y una simple marca o cruz para la última, el uso eficiente de una CDN.

Puedes hacer clic en cada uno de estos ítems para ir al área relacionada en la pestaña de Performance Review.

Justo debajo de la sección de resumen inicial, se presentan los enlaces a las numerosas pestañas de la lista de resultados.

Los trataremos uno por uno.

Debajo de esto, hay una opción para volver a ejecutar la prueba, algunos enlaces para descargar los datos en varios formatos, y una tabla Perfomance Results que muestra un resumen de los tiempos de carga de la página.

Seguidamente se presentan los resúmenes del test. En una apariencia ligeramente desordenada, hay una tabla que muestra la cascada (Waterfall), la captura de pantalla (Screenshot) y el vídeo en la parte superior para la primera vista, y debajo de ella, la misma información para la vista repetida.

Si haces clic en la imagen de la cascada irás a la pestaña de Details, y de la misma manera podrás hacer clic en la captura de pantalla y en los enlaces de vídeo para consultar más datos de los mismos.

En la parte inferior de la página hay un enlace a la pestaña Content Breakdown y un resumen del contenido por peticiones y por tipo de archivo.

Detalles (Details)

La pestaña Details es la que se hace más técnica.

¡Pero no te asustes!

Después del resumen del índice de rendimiento y la tabla de carga de la página, esta vez con un formato ligeramente diferente e incluyendo algunos eventos más específicos, la página se divide básicamente en 4 secciones.

Vista en cascada (Waterfall View)

La vista en cascada muestra una visualización en cascada de la carga de la página en el transcurso del tiempo, y puedes hacer clic en cualquier petición individual para que aparezcan más detalles específicos sobre esa petición. Para un desarrollador, verás lo poderoso que puede ser esto.

Vista de conexiones (Connection View)

La vista de conexiones es similar a la vista en cascada, pero en lugar de enfocarse en las peticiones, mira cómo se carga el contenido de todas las fuentes.

Muestra cada socket TCP y las peticiones que se recuperan a través de él. Una forma más de ver el flujo de información, y sobre todo útil para los desarrolladores avanzados.

Solicitud de datos (Request Details)

Esta sección proporciona información de cada solicitud, y si haces clic en una en particular…

Solicitud de encabezados (Request Headers)

… serás llevado a la correspondiente entrada expandida en la sección Solicitud de encabezados.

Rendimiento (Perfomance Review)

La pestaña Perfomance Review muestra las solicitudes de página, marcadas con una completa lista de comprobaciones de optimización.

Esto cubre las 6 áreas en las que WebPageTest ha realizado pruebas y describe cómo cada solicitud ha respondido a los requisitos pertinentes.

Debajo de esta se encuentra la sección Detalles (Details), que muestra las puntuaciones de cada una de las seis secciones, e información de cualquier problema que haya hecho que la puntuación haya bajado de un 100%.

Esta información permite ver los archivos o procesos a los cuales nos dirigimos específicamente para mejorar los tiempos de carga de la página.

Por último, a continuación se muestra un resumen (Glossary) de las seis pruebas, en el que se explican los objetos aplicables a cada prueba y lo que se comprueba.

Esta sección es muy útil para que los principiantes se hagan una idea de lo que afecta a la velocidad de carga de la página y dónde se puede empezar a hacer las mejoras.

Contenidos (Content Breakdown)

Esta pestaña es muy útil para ver tu contenido de un vistazo, mostrándote el desglose tanto por tipo como por bytes.

Las imágenes representan un porcentaje importante de tu contenido, y un gráfico te indica exactamente qué tipo de archivo es cada solicitud.

Otro gráfico muestra el tamaño de los bytes por tipo.

Debajo hay una sección de conexiones con código de colores para que puedas ver dónde se está cargando tu contenido y cuánto tiempo tarda.

Si has elegido Repetir Carga en tus pruebas, la información de Repeat View se visualiza directamente debajo de ésta, mostrando lo diferente que puede ser una segunda carga a causa de la caché.

Dominios (Domains)

La pestaña Dominios muestra sencillamente un desglose del contenido por dominio.

Dependiendo de cómo esté configurado tu sitio, es posible que sólo muestre uno o varios dominios.

Aquí, podemos ver que un pequeño porcentaje de las peticiones y el contenido proviene de fuentes de Google.

Captura de pantalla (Screenshot)

La pestaña Screenshot te muestra una captura de pantalla del sitio, completamente cargada en el dispositivo que hayas elegido para la prueba.

Hay una opción para crear un vídeo, si no lo ha seleccionado antes de la prueba, y se puede descargar los fotogramas de vídeo si se desea.

Análisis de imágenes (Image Analysis)

Para utilizar esta herramienta, empieza con una prueba estándar.

Una vez generados los resultados, seleccione el enlace Image Analysis.

Verás resultados detallados para cada imagen de la página; en la parte superior hay un resumen de cuántas imágenes se han detectado, su peso total (una gran parte de lo que afecta a la velocidad de carga de la página) y detalles sobre el entorno de prueba.

Continuando hacia abajo en la página, obtendrás información detallada sobre cada imagen y te sorprenderás de cuántas imágenes se están cargando en cada página.

No te pierdas los botones azules See More, ya que proporcionan información más útil y procesable.

Encontrarás una gran cantidad de información sobre la imagen junto con recomendaciones sobre cómo mejorar su optimización.

Una de las notas incluye la posibilidad de descargar una versión comprimida de la imagen (y de la compatibilidad con los distintos navegadores) que puedes usar para reemplazar la que se encuentra actualmente en la página.

Esta nueva función es un gran paso en la facilidad de uso y las descripciones en inglés sencillo, por lo que los usuarios que tengan un nivel básico de conocimientos técnicos les resultará de gran utilidad.

Request Map

RequestMap utiliza los datos de peticiones Chrome de WebPageTest para visualizar las solicitudes en una página.

Este servicio pretende ser una demostración de conceptos para ayudar a identificar a terceros en una página y desde dónde se les llama.

Los nodos de un mapa de solicitud representan solicitudes. El tamaño del nodo representa el tamaño del recurso en bytes enviados.

Puedes descargar el mapa como una imagen o en formato .csv.

Conclusión

WebPageTest es una tremenda herramienta de test, con un conjunto de funciones muy adecuadas para desarrolladores o usuarios avanzados.

A pesar de su diseño un poco anticuado, este servicio te ofrece toda la información que necesitas para optimizar los tiempos de carga de tu sitio web.