Reseña De WebPageTest.org: Pruebas De Rendimiento Open Source Que Sí Funcionan

Las Métricas Web Principales son uno de los factores de clasificación de Google. Esto significa que realizar pruebas de rendimiento se convierte en algo obligatorio para todos los propietarios de sitios web que desean mejorar la optimización de motores de búsqueda (SEO).

Durante más de una década, GTmetrix fue la recomendación predeterminada para cualquiera que necesitara echar un vistazo rápido a la velocidad de su sitio. Era rápido, sencillo y, lo más importante, generoso, pero decimos “era” porque, a finales de 2023 y mediados de 2024, esa generosidad se había evaporado.

Con nuevos muros de pago que bloquean funciones esenciales, límites severos en las pruebas gratuitas y análisis móviles bloqueados tras una suscripción, la herramienta que todos teníamos marcada como favorita ya no es el modelo a seguir que era antes.

Afortunadamente, existe WebPageTest.org (WPT), una plataforma que lleva desde 2008 en segundo plano, impulsando las auditorías de rendimiento más rigurosas de Internet.

Por lo tanto, probamos WPT en los principales parámetros de rendimiento de sitios web para determinar si puede reemplazar a otras herramientas de prueba de velocidad, como GTmetrix, sin ningún tipo de compromiso.

Acompáñanos.

¿Cuál Es el Origen de WebPageTest.org?

WebPageTest.org es una plataforma de pruebas de rendimiento de código abierto que proporciona diagnósticos detallados para páginas web. Comenzó como un proyecto dentro de AOL y posteriormente fue desarrollado por Patrick Meenan en Google para ayudar a los ingenieros a comprender el comportamiento de los navegadores.

La herramienta ha permanecido activa durante más de dieciséis años gracias al apoyo de una comunidad de especialistas en rendimiento que creen en la contribución al código abierto.

De hecho, los ingenieros de rendimiento crearon esta herramienta específicamente para otros ingenieros de rendimiento que necesitan datos de alta fidelidad. Todas las pruebas se ejecutan en un navegador real, ya sea Chrome, Firefox o Safari, en lugar de en una simulación sin interfaz que podría pasar por alto errores de renderización. Esta base técnica garantiza que los resultados reflejen lo que experimenta un visitante real en su dispositivo.

El proyecto se trasladó a Catchpoint en 2020 para garantizar que contaba con los recursos necesarios para seguir siendo gratuito para el público. Ahora, en lugar de solo suscripciones, WPT está financiado por una empresa matriz que utiliza los datos para su propia investigación.

¿Cómo Se Compara el Conjunto de Funciones para el Uso Diario?

También debemos ver cómo WPT gestiona las métricas del sitio web que realmente importan para tu flujo de trabajo diario. Si vienes de GTmetrix, el conjunto de funciones aquí te resultará familiar, pero la profundidad de los datos es significativamente mayor.

Monitoreo de Core Web Vitals

WebPageTest no solo te da una calificación de aprobado/suspenso, sino que desglosa los Core Web Vitals (LCP, CLS, INP) con un nivel de detalle que Insights suele ocultar.

Cuando ejecutas una prueba, WPT visualiza estas métricas del sitio web en una línea de tiempo. En lugar de limitarse a decirte “Tu cambio de diseño acumulativo es de 0,25”, resalta el fotograma exacto de la secuencia de carga en el que se produjo el cambio.

Esto es fundamental para la depuración, ya que puedes ver el diseño exacto antes del salto y el diseño después.

It also introduces “Opportunities,” a section that mirrors the “Recommendations” from GTmetrix that we’re used to, but with better prioritization. 

 Si tienes 10 problemas, WPT te ayuda a identificar cuáles de ellos no son importantes para obtener mejoras inmediatas en el rendimiento y en cuáles debes centrarte para mejorar el SEO y la velocidad del sitio web.

Gráficos Waterfall y Análisis de Solicitudes

El gráfico en cascada es la joya de la corona de WebPageTest: es denso, colorido y, al principio, aterrador. Pero una vez que aprendas a interpretarlo, no querrás volver nunca más a una lista simplificada.

El nivel gratuito de GTmetrix solo mostraba aquí una lista básica de archivos. WebPageTest muestra cada una de las solicitudes, desglosadas en cinco o diez fases distintas, codificadas por colores para facilitar el diagnóstico:

• DNS y conexión: Muestra el tiempo que se tardó en encontrar el servidor. Las barras largas indican que tu proveedor de DNS es lento.
• Negociación SSL: Muestra el tiempo empleado en establecer una conexión segura. Si es muy largo, es posible que la configuración TLS de tu servidor esté desactualizada.
• Tiempo hasta el primer byte: TTFB es el tiempo que tarda el navegador en recibir el primer byte de la respuesta del servidor. Una barra larga indica un tiempo de respuesta del servidor lento, lo que a menudo apunta a problemas con las consultas a la base de datos o el procesamiento del lado del servidor (lo que indica que es hora de optimizar la base de datos).
• Descarga de contenido: el navegador está recibiendo datos.

La función más potente aquí es la vista “Conexión”.

Puedes ver exactamente cómo el navegador abre conexiones paralelas para descargar imágenes y detectar el momento exacto en que un script de seguimiento de terceros bloquea la carga del resto de tu sitio web.

Recomendaciones de Rendimiento

Todas las sugerencias de WPT tienen en cuenta el contexto. En lugar de una lista de verificación genérica, WebPageTest utiliza su motor de “Oportunidades” y “Experimentos”.

En lugar de sugerir “Aplazar JavaScript”, identifica los paquetes específicos que bloquean el hilo principal y sugiere que realices una prueba sin ellos.

Aún más impresionante es la función “No-Code Experiments” (Experimentos sin código). Esta función te permite “probar” una solución sin tener que cambiar realmente el código. Reescribirá el HTML sobre la marcha y te dará un resultado. Esto ahorra horas de tiempo de desarrollo. Puedes comprobar que una solución funciona antes de pedirle a tu desarrollador que la implemente.

✏️Nota: Se trata de una función de pago, por lo que es posible que tengas que valorar si los costes se justifican para tu caso de uso.

Ubicaciones y Dispositivos de Prueba

Esta es la característica estrella. La mayoría de las herramientas gratuitas simplemente no pueden permitirse ofrecer múltiples ubicaciones y dispositivos de prueba. WPT sí puede. Abre el modal de ubicaciones y verás todas las ciudades y países disponibles.

Además, la empresa también ofrece ISP y Node si deseas realizar pruebas en redes específicas. Aparte de eso, WPT emula cientos de dispositivos y versiones de navegadores (y también ejecuta algunos dispositivos reales) para realizar tus pruebas.

Si tu público es de Londres y la mayoría de los usuarios tienen un iPhone 14, puedes crear esta combinación específica para realizar tus pruebas y obtener los resultados más precisos. 

Funciones Avanzadas en WebPageTest.org

Hay dos características que distinguen a WPT para los desarrolladores: “Scripting” y la vista “Filmstrip”.

Scripting es una función avanzada que te permite automatizar tareas complejas. Por ejemplo, puedes escribir un script corto para indicarle al navegador que inicie sesión en tu sitio antes de comenzar la prueba. Esto te permite medir la velocidad de tu panel de control de miembros o de la página de pago.

La mayoría de las herramientas gratuitas solo te permiten probar páginas públicas que no requieren contraseña. Esta capacidad convierte a la plataforma en una potente herramienta de diagnóstico para aplicaciones web.

La vista Filmstrip es otra función avanzada que captura una captura de pantalla de tu sitio cada 0,1 a 0,5 segundos mientras se carga. Puedes desplazarte por estas imágenes, fotograma a fotograma, para ver exactamente lo que ve un visitante en su navegador.

Esta función te ayuda a detectar problemas visuales, como cambios en el tamaño de las fuentes o imágenes que aparecen tarde, que pueden no ser visibles en el código. También puedes utilizar el modo de comparación para ver dos pruebas diferentes una al lado de la otra. Esto es útil cuando quieres ver si un cambio que has realizado realmente ha mejorado la velocidad.

El Bono “Verde” con Control de Carbono

WPT ha introducido una función que aborda el impacto medioambiental de nuestra infraestructura digital denominada Carbon Control.

Utiliza la biblioteca CO2.js de la Green Web Foundation para estimar las emisiones de carbono generadas por la carga de una sola página.

El cálculo se basa en dos factores principales para determinar tu puntuación.

• Tamaño de la transferencia de datos: La cantidad total de datos (en kilobytes o megabytes) que debe viajar desde el servidor hasta el dispositivo del usuario. Las páginas más pesadas requieren más electricidad para su transmisión y procesamiento.
• Estado del alojamiento ecológico: Si el centro de datos que aloja el sitio web funciona con fuentes de energía renovables (como la eólica o la solar) o con combustibles fósiles.

Esto añade una valiosa dimensión a tus auditorías de rendimiento. Puedes demostrar a un cliente que la optimización de su código no solo mejora su posicionamiento en Google. Reduce de forma cuantificable los residuos físicos que produce su empresa y le ayuda a cumplir sus propios objetivos de sostenibilidad.

¿Cuáles Son las Limitaciones de WebPageTest?

WebPageTest no es perfecto. De hecho, hay días en los que lo odiarás.

• Las colas: Como utiliza dispositivos reales y es un recurso público, tienes que esperar en la cola. Si realizas una prueba durante las horas punta, es posible que veas “Posición 100”. Podrías esperar entre 10 y 20 minutos para que se ejecute una sola prueba. GTmetrix (en los viejos tiempos) era instantáneo. WPT… digamos que te enseña a ser paciente.
• No hay “supervisión” en el nivel gratuito: No puedes configurar WPT para que compruebe automáticamente tu sitio cada mañana y te envíe los resultados por correo electrónico a menos que pagues por la API o un plan Pro. Es una herramienta de diagnóstico, no un sistema de supervisión. Si quieres gráficos diarios, tienes que ejecutar las pruebas manualmente.
• Complejidad visual: No puedes enviar un enlace de WebPageTest a un cliente sin conocimientos técnicos y esperar que lo entienda. A ojos inexpertos, parece que no funciona. Siempre tendrás que interpretar los datos por ellos, mientras que otras herramientas generan informes en PDF con un aspecto lo suficientemente atractivo como para facturarlos.

¿Es la Curva de Aprendizaje Demasiado Pronunciada para Principiantes?

Tenemos que ser sinceros: WebPageTest es complicado.

Cuando llegas por primera vez a la página de inicio, hay menús desplegables por todas partes. La página de resultados es un muro de números. No hay ninguna mascota sonriente que te diga “¡Buen trabajo!”.

Cómo empezar sin agobiarse:

1. Ignora la “Configuración avanzada” al principio: solo tienes que elegir tu ubicación y tu navegador (Chrome está bien).
2. Céntrate en el resumen “Web Vitals”: en la parte superior de la página de resultados hay una vista en rojo/verde/amarillo similar a la que estás acostumbrado. Empieza por ahí.
3. Utiliza la pestaña “Análisis de imágenes”: es visual y fácil de entender. Te muestra exactamente qué imágenes son demasiado grandes y cuánto espacio puedes ahorrar. Si ves archivos enormes aquí, sabrás que necesitas optimizar las imágenes para la web inmediatamente.

Para un propietario de una pyme sin conocimientos técnicos, la herramienta puede resultar demasiado compleja. Pero para cualquiera que gestione un sitio web de forma profesional, la curva de aprendizaje merece la pena. Estás cambiando simplicidad por precisión.

Cómo Integrar WebPageTest en tu Flujo de Trabajo

Debemos ser realistas sobre cómo encaja esto en un día ajetreado. No puedes esperar 20 minutos por el resultado de una prueba cada vez que guardas un archivo CSS. Esa no es realmente una forma eficiente de trabajar. La forma más eficaz de utilizar WebPageTest es como herramienta de diagnóstico especializada, en lugar de como monitor diario.

Comienza tu rutina con una herramienta rápida como PageSpeed Insights o la pestaña Lighthouse de las herramientas de desarrollo de tu navegador. Estas plataformas te dan una calificación instantánea de aprobado o suspendido. Cuando esa calificación baja, o ves una advertencia roja que no puedes explicar, es el momento de abrir WebPageTest.

Incluso con el informe completo, resiste la tentación de corregir todas y cada una de las advertencias. Mira el gráfico en cascada y busca la barra más larga. Puede ser una imagen grande, un script de terceros lento o incluso tu servidor.

En la mayoría de los casos, corregir solo esa barra puede ser suficiente para solucionar tus problemas. Es posible que incluso descubras que simplemente convertir los archivos a formatos de imagen modernos resuelve la mitad del problema.

¿Deberías Usar WebPageTest?

Ahora que la web es tan complicada, no podemos tener “una herramienta para todo”. En su lugar, debes elegir las herramientas que más sentido tengan para tus flujos de trabajo diarios.

En el caso de WebPageTest:

• Los desarrolladores deberían cambiar a esta herramienta: La posibilidad de programar flujos de inicio de sesión, realizar pruebas en hardware móvil real y ver vistas detalladas de la conexión de forma gratuita la convierte en una herramienta profesionalmente superior. Es la única herramienta gratuita que te proporciona los datos que necesitas para solucionar realmente los problemas, no solo para identificarlos.
• Los propietarios de pymes pueden utilizar WebPageTest para tu “revisión de estado” trimestral: Pero no te obsesiones con ello todos los días. Realiza una prueba, consulta los Core Web Vitals y envía el enlace a tu desarrollador si las cosas parecen ir mal.

Cuando la Optimización No Es Suficiente

En última instancia, la optimización es una lucha contra la latencia: podrías pasar semanas recortando milisegundos de tus scripts, pero solo hay una forma de solucionar un problema de hardware: cambiar a un hardware mejor.

Un servidor privado virtual (VPS) proporciona la potencia dedicada necesaria para convertir tu diseño optimizado en una experiencia rápida y ágil. WebPageTest demuestra su valor al identificar exactamente cuándo tu infraestructura te está frenando. Separa los problemas que puedes solucionar con un editor de texto de los que requieren una mejor infraestructura.

Esa es, sinceramente, la única forma de dejar de perseguir líneas aleatorias en tu código y dotar a tu sitio web del motor que se merece.

Preguntas Frecuentes

¿Es confiable WebPageTest.org?

Sí, WebPageTest está ampliamente considerado como una de las herramientas de rendimiento más confiables, ya que utiliza navegadores reales en hardware real de consumidores en lugar de simulaciones. A diferencia de otras herramientas que estiman el rendimiento basándose en el análisis de código, WebPageTest registra exactamente lo que ocurre cuando un navegador Chrome, Firefox o Safari real carga tu sitio web a través de una conexión de red real.

¿Cuál es la diferencia entre WebPageTest y PageSpeed Insights?

PageSpeed Insights es principalmente una herramienta de informes que te proporciona una puntuación de “aprobado/suspenso” basada en los datos de campo de Core Web Vitals (CrUX) de Google y una prueba de laboratorio rápida. WebPageTest es una herramienta de diagnóstico que te proporciona datos técnicos detallados (como gráficos en cascada y vistas de conexión) para ayudarte a explicar por qué tu puntuación es baja.

¿Qué se considera una buena puntuación de Core Web Vitals?

Según los parámetros de referencia de Google, una puntuación “buena” significa que tu Largest Contentful Paint (LCP) es inferior a 2,5 segundos, tu Interaction to Next Paint (INP) es inferior a 200 milisegundos y tu Cumulative Layout Shift (CLS) es inferior a 0,1. Para superar la evaluación de Core Web Vitals, es necesario cumplir estos umbrales para al menos el 75 % de tus visitantes.

¿Con qué frecuencia debo comprobar la velocidad de mi sitio web?

Debes realizar una comprobación rápida (utilizando PageSpeed Insights) cada vez que publiques contenido nuevo o actualices los complementos. Sin embargo, debes realizar una prueba de diagnóstico profunda con WebPageTest una vez al mes, o inmediatamente después de cualquier cambio importante en el diseño o migración del alojamiento. Esto garantiza que detectes las regresiones ocultas en el rendimiento antes de que afecten a tu posicionamiento SEO.

¿WebPageTest es realmente gratuito?

Sí. El plan “Starter” es gratuito e incluye 150 pruebas al mes, acceso a dispositivos móviles reales y ubicaciones de prueba globales. Ofrecen planes “Pro” de pago a partir de unos $180 USD al año con funciones como acceso a la API, colas prioritarias y “No-Code Experiments”, pero la versión gratuita es más que suficiente para la mayoría de los desarrolladores y propietarios de sitios web.