Todo el mundo habla de PageSpeed Insights o GTmetrix cuando toca medir la velocidad de una web. Sin embargo, en una reciente ponencia de WordPress a la que asistí me recomendaron otra opción mucho más potente. Se trata de WebPageTest, una plataforma pensada para desarrolladores que tiene una apariencia anticuada, pero que es considerada la mejor de todas por su enorme cantidad de opciones avanzadas. Vamos a destripar lo que ofrece.
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.
Mi opinión sobre esta herramienta
Aunque su interfaz parezca desordenada y su aspecto eche para atrás al principio, la cantidad de datos que ofrece WebPageTest no tiene rival entre las plataformas de pruebas. Las vistas de conexiones y de cascada permiten ver exactamente qué ocurre en cada milisegundo de la carga de la página. Si de verdad quieres exprimir el rendimiento de tu sitio y entender los problemas técnicos al detalle, merece la pena perderle el miedo a su estética y aprender a usarla.
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.
Mi opinión sobre esta herramienta
Aunque su interfaz parezca desordenada y su aspecto eche para atrás al principio, la cantidad de datos que ofrece WebPageTest no tiene rival entre las plataformas de pruebas. Las vistas de conexiones y de cascada permiten ver exactamente qué ocurre en cada milisegundo de la carga de la página. Si de verdad quieres exprimir el rendimiento de tu sitio y entender los problemas técnicos al detalle, merece la pena perderle el miedo a su estética y aprender a usarla.