Webpagetest: Domestica al monstruo de prueba y analiza tus páginas web

Jan Hornung
14 Min.
Prueba de la página web
Última actualización en

WebPagetest es probablemente la mejor y más completa herramienta gratuita para medir el tiempo de carga de su página. Desafortunadamente, proporciona una gran cantidad de datos muy complejos. Hoy les mostraré lo que necesitan ajustar, cómo poner orden en el caos de datos y qué parámetros necesitan para un análisis profesional. Porque sólo si sabes cómo se cargan los proyectos de tus clientes y tus propias páginas, puedes optimizarlos.

Seguramente el propio lado debería serlo. Y rápido. Por supuesto, porque mucho depende del tiempo de carga: La tasa de conversión, la percepción de seguridad de sus visitantes y el ranking de Google de su oferta. Pero muchos WordPress usuarios ni siquiera llegan al punto de poder determinar correctamente el tiempo de carga de su propia página.

Algunos operadores de sitios, por ejemplo, no saben exactamente qué herramientas pueden utilizar para analizar su sitio correctamente. O no saben qué ajustes tienen que hacer para lograr resultados realmente buenos. Para evitar cometer los mismos errores, les mostraré hoy cómo pueden obtener una visión general rápida y significativa de su sitio con la (en nuestra opinión) mejor herramienta de medición gratuita disponible. Así que sabes exactamente cuán rápido se carga tu sitio y si y dónde tienes que optimizar.

Para entender exactamente cómo funcionan los pasos de análisis individuales, le aconsejo que mire los conjuntos de datos vinculados a los puntos importantes o que analice su propio sitio en paralelo. Porque: poner orden en el caos de los datos no es tan fácil. Pero como recompensa por el esfuerzo, recibirá algunos de los mejores datos que haya reunido sobre su sitio. Y especialmente si trabajas para un cliente o ganas dinero con tus proyectos de WPWordPress , el esfuerzo vale la pena.

El Webpagetest es la mejor herramienta que conocemos

Concedido: Alabamos a webpagetest.org en este artículo de forma exuberante. Tal vez demasiado exuberante, pero no sin razón. Porque Webpagetest es la única herramienta que conocemos que le permite determinar de forma fiable el tiempo de carga absoluto y percibido de su página. Y todo esto gratis. No hay barrera de pago, no hay modelo de suscripción, simplemente datos valiosos y un APIque te permite automatizar todo el asunto: así es como debe ser.

Para completar, permítame decir que usted también tiene Reino Unido y GTmetrix obtener buenas lecturas. Pero no tan bueno como con la prueba de la página web. Esto no significa, por supuesto, que no pueda y no deba respaldar sus resultados con varias pruebas en diferentes herramientas. Y no significa que no debas medirte con Pingdom o GTmetrix. Pero puedo recomendarle que eche un vistazo a Webpagetest al menos una vez.

Casi se ha convertido en un mantra con nosotros: Para medir el tiempo de carga de su página, herramientas como Google PageSpeed Insights no fuera. Porque estos sólo determinan el potencial de rendimiento de su sitio. Por supuesto, estos datos siguen siendo valiosos, desde el punto de vista del rendimiento y de la optimización de los motores de búsqueda, pero no permiten sacar conclusiones sobre lo que realmente sucede cuando un visitante visita su sitio.

Eso es lo que quieres saber. Y eso es exactamente lo que necesitas saber para determinar si una medida de optimización es efectiva.

Desafortunadamente, Webpagetest no sólo entrega datos no muy bien preparados sino también resultados de pruebas muy extensas. Por lo tanto, hoy les mostraré cómo usar el Webpagetest y cómo interpretar los resultados de una manera básica.

En la siguiente sección explicaré brevemente algunos de los antecedentes de la herramienta. Si no te interesa, salta sólo haz el papel.

Webpagetest: El hermano mayor de Google PageSpeed Insights

Webpagetest fue originalmente un proyecto de AOL y sólo estaba destinado a uso interno. Pero en 2008 el programa se convirtió en software de código abierto y ahora mantenida y desarrollada principalmente por Google. La documentación completa de Webpagetest se encuentra en GitHub y también puede descargado y usado localmente.

Mientras PageSpeed Insightsque esto muestra dónde está el potencial de optimización de su sitio, Webpagetest puede hacer mucho más. Porque le muestra no sólo cómo puede mejorar su sitio, sino también directamente qué efectos tienen sus medidas de optimización en el tiempo de carga de su sitio.

A diferencia de Pingdom y GTmetrix, Webpagetest no está respaldado por una empresa que quiera vender un servicio de pago (ok, excepto Google, pero al menos el servicio no se vende directamente). Más bien, se podría decir que Webpagetest es parte del plan de Google para hacer la web más rápida en general. Lo que sea que uno quiera evaluar los esfuerzos de Google en este contexto.

En 4 pasos para obtener datos de tiempo de carga realmente significativos

Sí, el Webpagetest es más complejo que otras herramientas. ¡Pero no dejes que eso te desanime! En este caso la complejidad es buena. Porque eso significa que obtienes grandes datos de tu sitio web. E incluso como usuario primerizo obtienes la información relevante bastante rápido.

Esto se hace con los siguientes cuatro pasos:

Paso uno: Establecer los parámetros de la prueba

Paso dos: Proporcionar una visión general

Paso tres: Análisis detallado

Paso cuatro: Análisis del tiempo de carga percibido

Paso 1: Establecer los parámetros de la prueba

Webpagetest ofrece posibilidades de ajuste muy finas para probar su sitio web. Cuatro de estos escenarios son especialmente importantes para obtener buenos resultados en las pruebas:

  • el servidor con el que se va a probar (1)
  • el navegador con el que se va a probar (2)
  • la configuración avanzada de la prueba, que entraré en más detalles en un momento (3)
Página principal de Webpagetest
Así es como se ve la página inicial de Webpagetest. Esto lo hace un poco más complejo que los de Pingdom o GTmetrix.

El servidor que elija para la prueba simula un usuario que accede a la página desde allí. Si elige el servidor predeterminado en los EE.UU., se mostrará el resultado de la prueba de una llamada de página de Texas. Sin embargo, en la mayoría de los casos, esto no es necesariamente lo que quieres. Por lo tanto, este ajuste es muy importante. Porque puede distorsionar masivamente el resultado global y debe ser fijado en consecuencia, dependiendo de la aplicación.

Las dos aplicaciones más comunes son:

  1. Determinar el tiempo de carga para un usuario de su grupo objetivo
  2. Comparación del tiempo de carga después de una medida de optimización

Si quiere saber cómo perciben sus visitantes el tiempo de carga de la página, la ubicación del servidor debe corresponderse lo más posible con la ubicación de un usuario típico. Para un blog con lectores principalmente españoles esto significa que debes elegir un servidor en Europa, por ejemplo en Frankfurt.

Si quieres saber qué medida de optimización se necesita, entonces en principio no importa la ubicación del servidor que utilices. Lo único importante es: Tienes que usar la misma ubicación del servidor para la prueba antes y después de la optimización. De lo contrario, no podrá comparar los datos medidos correctamente. Por supuesto, recomiendo un servidor de pruebas alemán para esta prueba también. Simplemente ofrece los resultados más realistas.

Webpagetest: Mapa para seleccionar el servidor de pruebas en Webpagetest.org
Además de la selección de la lista, también tiene la posibilidad de seleccionar el servidor de prueba a través de un mapa. Además puedes ver todos los servidores de prueba de un vistazo.

El navegador utilizado

Webpagetest ofrece muchas opciones de configuración para simular ciertas técnicas de transmisión y navegadores. Por ejemplo, puedes definir que la página se cargue a través de una conexión 3G y de Firefox. Sin embargo, para empezar, basta con elegir el navegador que su grupo objetivo utiliza más a menudo.

Puedes encontrar información sobre esto en Google Analytics o Piwik, por ejemplo.RAIDBOXES

Extracto de los navegadores utilizados por los visitantes de raidboxes.de. Estos sirven como plantillas para los ajustes en Webpagetest.
Los navegadores más utilizados en raidboxes.de. Así que para un análisis en Webpagetest yo probaría principalmente el cromo. Los resultados de Firefox y Safari, por otro lado, son por supuesto también interesantes.

Muy importante: Los ajustes avanzados determinan lo buenos que serán los datos de las mediciones al final.

Además de los dos parámetros que determinan la forma en que se realiza la prueba - es decir, la ubicación del servidor y el navegador utilizado - Webpagetest también ofrece la opción de configurar lo que la prueba debe producir al final. En los ajustes avanzados, puede definir, por ejemplo, que sólo se impriman ciertos valores o que la prueba se detenga automáticamente después de un cierto tiempo. Y aquí hay dos ajustes que son especialmente importantes para obtener datos razonablemente completos y fiables: El "Número de pruebas a realizar" y la "Vista de repetición".

En principio, siempre se debe medir más de una vez cuando se mide el tiempo de carga. De lo contrario, corre el riesgo de medir los valores atípicos y puede estar buscando un problema que no existe. Y créeme: ya hemos experimentado esto varias veces. Recomiendo al menos tres pruebas consecutivas.

También debe recordar que siempre debe medir la versión en caché de su sitio. Puedes hacerlo con la opción de repetición de la vista.

Configuración avanzada de Webpagetest
En la configuración avanzada de Webpagetest se encuentra la verdadera magia de la herramienta. Sólo si seleccionas al menos 3 pruebas aquí y también incluyes la vista de repetición, los datos que obtengas serán realmente interesantes.

¿Tienes tu URL - por ejemplo https://raidboxes.io - y establecer los parámetros de la prueba (es decir, el servidor alemán, el navegador, el mínimo de 3 repeticiones y la vista de repetición), puede iniciar la prueba. Dependiendo de cuántos otros usuarios estén probando actualmente sus páginas, el análisis puede tardar unos minutos.

Importante: Webpagetest sólo prueba la página a la que se puede llegar bajo la URL, no toda su presencia en la web. Esto significa que debe probar su página de inicio, todas las páginas de aterrizaje y, si es relevante, también su resumen de productos de forma individual.

En esta guía trabajo con los datos del análisis de nuestra página web, raidboxes.com. Eso significa que puedes reproducir todo lo explicado aquí uno a uno en webpagetest.org. Sólo tienes que hacer clic aquí y recibirán los resultados del análisis a finales de diciembre de 2016.

Paso 2: Obtener una visión general

Lo primero que ves es el resumen del tiempo de carga de la página. Esto se divide en tres secciones:

  • los parámetros de la prueba y los resultados de los posibles análisis (1)
  • el desglose de las principales características (2)
  • la visión general de la estructura de la página (3)
Los resultados generales del Webpagetest
Resumen de los primeros resultados de webpagetest.org

(1) Cuanto más verde, mejor

En la primera sección se enumeran de nuevo los parámetros de prueba para su comprobación. Si encuentra un error aquí, repita la prueba. También verá el resultado del análisis potencial. Webpagetest también te da los resultados de Google PageSpeed Insights ...de la que no se puede prescindir. Si puede hacer frente a la presentación espartana de Webpagetest, el dualso se puede configurar para PageSpeed Insights ...para prescindir de ella.

La prueba de la página web utiliza un código de grado y color de la escuela. A es la mejor, F la peor puntuación. El verde indica un buen grado de optimización, el naranja indica un potencial de optimización utilizable y el rojo indica una necesidad urgente de acción.

(2) Cuanto más rápido, mejor

En la segunda sección de los resultados obtendrá todos los datos clave relevantes del tiempo de carga de su página para la variante en caché y sin caché de su página. Lo importante es: En la visión general, Webpagetest sólo muestra los valores de una de las tres pruebas. La vista general te muestra cuál es, justo al lado de las etiquetas de la Primera Vista y la Vista de Repetición. La carrera 2, por ejemplo, es el resultado de la segunda carrera de prueba.

Explicación de los resultados individuales de Webpagetest
Desafortunadamente, esta visión general sólo está disponible para los resultados de las mediciones individuales, es decir, las pruebas individuales. Para los valores realmente valiosos, tienes que ir un nivel más profundo. Le explicaré cómo hacerlo en un momento.

Cinco valores son particularmente importantes aquí:

  • Tiempo de carga: El tiempo que le toma al usuario la impresión de que la página está completamente cargada. El tiempo de carga corresponde al tiempo de carga total percibido de su página.
  • Primer byte: Tiempo hasta que el primer byte de datos se transmite entre el cliente y el servidor web. Si es posible, este valor debe ser inferior a 200 milisegundos y es una indicación importante del rendimiento de su hosting.
  • Start Render: Este valor describe el tiempo que una página se carga hasta que el contenido se muestra al visitante por primera vez. Hasta este momento la página permanece completamente blanca para el usuario. Este valor también debe ser lo más bajo posible. Junto con el Tiempo de Carga (o Documento Completo), este valor es el punto de referencia para la velocidad percibida del sitio web. Start Render marca el comienzo de la carga visible de su página, Document Complete el final.
  • Documento Completo: Este valor es idéntico al Tiempo de Carga.
  • Fully Loaded: Este valor indica cuando la página está completamente cargada, con todos los guiones y elementos. Describe el tiempo total de carga técnica de la página. Esto suele ser irrelevante para el visitante. Lo que realmente cuenta es el tiempo de carga percibido.

Lo siguiente se aplica a todos estos valores: Cuanto más pequeño, mejor. Como una guía que puedes recordar:

  • el tiempo para el primer byte debería ser menor de 200 milisegundos
  • El inicio de la renderización no debe ser mayor de 2,5 segundos
  • El documento completo no debe durar más de cinco segundos

Por supuesto, estos valores son sólo reglas generales. Siempre depende de tu lado: Una página de tienda con 50 productos - es decir, 50 o más imágenes y textos de descripción - se carga naturalmente más lento que una página de impresión que consiste sólo en texto.

Así que sólo puedo adivinar: También pruebe los sitios de sus competidores directos y sus modelos a seguir. De esa manera, recibirá valores comparativos dentro de la industria.

Calculando los valores promedio - Ahora es el momento de ir al grano

Desafortunadamente, la visión general explicada anteriormente sólo muestra los resultados de una sola medición. Y recuerda: los valores únicos y aislados pueden llevarte por mal camino. Por eso ha realizado al menos tres mediciones consecutivas para probar su sitio. Y los valores medios de estas tres medidas son los mejores valores aproximados que puedes obtener para el tiempo de carga de tu página.

Y no se preocupe: para crear los valores promedio sólo se necesita pulsar un botón:

Webpagetest trazando los resultados
Al hacer clic en la opción de trazado, Webpagetest calcula los valores promedio de los resultados de las mediciones.

Ahora se obtiene una cantidad de datos inicialmente confusa de las llamadas tramas. Y estos son exactamente los resultados que quieres tener. En principio, este nuevo panorama es el mismo para todos los valores. Así que una vez que has entendido cómo leerlos, son cualquier cosa menos confusos.

Vista de la trama de Webpagetest
Estos gráficos ilustran perfectamente por qué siempre se deben tomar varias medidas: El punto de medida 3 es casi un segundo peor que el punto de medida 1, por lo que el promedio es esencial para el análisis del rendimiento profesional.

Como pueden ver, los tres valores medidos (1-3) se muestran aquí en un diagrama (¡la diferencia entre el punto de medición 1 y el punto de medición 3 es particularmente notable!) Sobre el gráfico está el valor al que se refiere el diagrama (4). En este caso el tiempo de carga percibido (Documento Completo o Tiempo de Carga). El número de la columna "Media" describe ahora el valor medio del tiempo de carga en las tres mediciones (5). Este valor medio es la información más valiosa que puedes obtener sobre tu sitio.

Por cierto: Marcando la casilla Repetir también se pueden obtener los valores del tiempo de carga con y sin cacheo. Y si quieres encontrar los resultados para los otros valores: Sólo usa tu buscador (CTRL+F para PC y cmd+f para Mac) para buscar el "Primer Byte" y "Iniciar Renderización".

Conclusión provisional: Mucho trabajo para datos particularmente valiosos

Vale, eso fue un montón de información. Y fueron muchos pasos. Especialmente comparado con los métodos de prueba simples. Pero valió la pena el esfuerzo, porque se podía ver en los números de los diagramas: Dos pruebas con el mismo ajuste pueden a veces estar separadas por un segundo entero. Así que puede ser que la casualidad decida si invierte tiempo y dinero en seguir optimizando sus páginas o no. Y especialmente si ganas dinero con WordPress tu propia tienda, negocio de diseño web o agencia, deberías tener la mejor base de datos para tal decisión.

Pero en realidad no estamos todavía en el final. Porque ahora conoces los parámetros de rendimiento más importantes de tu sitio, así que sabes cuán rápido carga tu sitio y si todavía hay potencial de optimización, pero no sabes exactamente dónde se puede mejorar tu sitio. Y esto es exactamente para lo que sirve el análisis detallado.

Paso 3: Análisis detallado

La visión general ya te dice mucho sobre tu sitio. Puedes ver si todavía hay espacio para mejorar en ciertas áreas, cuán rápido carga tu página y si podría cargar un poco más rápido. Sin embargo, aún no se conoce la causa de los problemas. Pero puedes encontrarlos en los informes detallados:

Los diagramas de cascada enumeran cada una de las peticiones HTTP que un navegador hace al servidor web. A primera vista, estos diagramas parecen muy complejos y confusos. Pero si sabes cómo, puedes obtener muchos detalles sobre tu sitio en un diagrama de cascada con sólo una mirada. Aquí le mostramos cómo leer correctamente los diagramas de las cascadas y cómo puede utilizarlos para optimizar aún más su sitio.

Básicamente, una página rápida tiene un diagrama de cascada corto con pocas y cortas peticiones. Esto significa que la longitud del diagrama y la longitud de las barras en las líneas individuales son particularmente relevantes.

En la Revisión de Rendimiento encontrará información detallada acerca de lo bien que está optimizado el rendimiento de su sitio. Este examen detallado contiene tres elementos:

  • la lista de control de optimización
  • el desglose detallado de la prueba de rendimiento
  • el glosario

Deberías mirar el glosario primero cuando analices tu sitio con webpagetest.org por primera vez. Explica todos los términos importantes de la Revisión de Rendimiento.

Extracto del glosario de Webpagetest.
Desafortunadamente en inglés, pero Webpagetest realmente explica cada término técnico en detalle.

En la lista de verificación de optimización encontrará los criterios de evaluación individuales que se aplican a cada una de las solicitudes HTTP. Una marca de verificación verde indica que el requisito se cumple, un triángulo amarillo indica que hay margen de mejora, y una cruz roja indica que falta la medida de optimización propuesta.

Un extracto de la lista de control de rendimiento de Webpagetest.
Con la lista de verificación de optimización puede, por ejemplo, ver exactamente qué imágenes de su sitio web tienen todavía potencial de optimización, qué solicitudes deben ser comprimidas más y si su caché funciona correctamente.

Finalmente, en la sección de detalles encontrará una descripción de las advertencias y las medidas de optimización que faltan. Webpagetest describe las optimizaciones aún posibles para cada recurso. En el caso de las imágenes, por ejemplo, muestra cuánto volumen de datos puede ser guardado.

Aunque tendrá que ocuparse de estas evaluaciones detalladas durante algún tiempo, puede utilizarlas para obtener una imagen detallada de su sitio y su potencial de optimización.

Y como es básicamente la misma información que se escupePageSpeed Insights, puedes, por supuesto, ejecutar un análisis PageSpeed en paralelo. Porque esta prueba es mucho más agradable y mejor preparada.

Paso 4: Análisis del tiempo de carga percibido

A diferencia de todas las demás pruebas conocidas, Webpagetest es la única que muestra el tiempo de carga percibido de su páginagratis . A través de la vista de la película se puede ver un video de la estructura de la página. De esta manera puedes ver exactamente lo que ven tus visitantes y puedes evaluar mejor si y cómo tu sitio debe ser optimizado.

Encuentra la cinta de cine de Webpagetest
Encontrará la vista de la película en la vista general del resultado de su medición en el extremo derecho. Atención: Esta opción no siempre se muestra. ¿Por qué no está claro para mí. Sin embargo, la repetición de la prueba siempre ha hecho que esta opción esté disponible hasta ahora.

El tiempo de carga percibido es probablemente el parámetro más importante del tiempo de carga de su página. Influye en que sus visitantes abandonen la página antes de tiempo, en la probabilidad de conversión y en la experiencia general de su página. Especialmente para las tiendas, la velocidad percibida del sitio web es por lo tanto un punto de referencia importante. Por supuesto, el tiempo de carga percibido debe ser siempre lo más corto posible.

Además de la película de striptease, debes recordar lo siguiente:

Representación esquemática del tiempo de carga de la página
El tiempo total de carga percibido debe ser lo más corto posible. Al mismo tiempo es importante que la distancia entre T0 y Start Render sea lo más pequeña posible. Porque entonces el usuario tiene la impresión muy pronto de que la página está completamente cargada, aunque esté lejos de serlo.

La vista de Filstrip muestra con una precisión de una décima de segundo el aspecto de su página y los procesos que se están realizando en un momento dado. Si miras la prueba con estos datosentonces te das cuenta de que nada pasa en ese lado por más de tres segundos. Sin embargo, la página se ve casi exactamente igual que en el estado final. El usuario tiene la impresión de que la página se carga en 3,5 segundos. O, alternativamente, el visitante ya tiene la sensación después de 3,5 segundos de que puede interactuar con la página.

Especialmente cuando se prioriza el contenido de la página visible, la vista de la tira de película es una herramienta muy valiosa.

Conclusión: Con estos fundamentos y un poco de práctica obtendrá una muy buena visión general de su sitio

Ok, después de leer el artículo ahora debería ser capaz de elegir los ajustes correctos para una prueba de página web, saber qué métrica tiene que interpretar de qué manera y cómo evitar interpretaciones erróneas debido a los valores atípicos. También sabe dónde encontrar información detallada sobre su sitio y cómo determinar el tiempo de carga percibido de su sitio y cómo visualizarlo.

Así que sabes los fundamentos importantes para obtener una visión general realmente completa de tu propio sitio, de los sitios de tus clientes y de cualquier otro proyecto web. Y sabes dónde conseguir la información que te permitirá llenar los resultados con vida y sacar conclusiones útiles para tu sitio.

¿Pero por qué era eso importante otra vez? Muy simple: Sin un medición razonable del estado real de su página, no puede evaluar correctamente cómo se está cargando su página actualmente. Y por otro lado, te falta información para la Optimización del tiempo de carga.

¿Tienes otro consejo para usar Webpagetest? ¡Perfecto, entonces escribe un comentario en este post!

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.