Webpagetest: Domar al monstruo de la prueba y analizar tu las páginas web

Jan Hornung Actualizado el 23.01.2020
14 Min.
Webpagetest
Actualizado por última vez el 23.01.2020

WebPagetest es probablemente la mejor y más completa herramienta gratuita para medir el tiempo de carga de las páginastus . Desafortunadamente, proporciona muchos y muy complejos datos. Hoy les mostraré lo que tienen que establecer, 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 tu se cargan los proyectos de los clientes y tus propias páginas, puedes optimizarlos.

Seguramente debería ser suyositio . Y rápido. Por supuesto, porque mucho depende del tiempo de carga: la tasa de conversión, la percepción de seguridad tus de los visitantes y la tu oferta del ranking de Google. Pero muchos WordPress usuarios ni siquiera llegan al punto de poder determinar sitio correctamente el tiempo de carga de los suyos.

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

Para entender exactamente cómo funcionan los pasos del análisis individual, le aconsejo que mire los conjuntos de datos vinculados a los puntos importantes o que analice sus propios sitio conjuntos de datos en paralelotu . Porque: poner orden en el caos de los datos no es tan fácil. Pero como recompensa por el esfuerzo, recibirás algunos de los mejores datos que hayas tu sitio recogido. Y especialmente si trabajas para un cliente o ganas dinero con tus proyectos tu 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 tus sitio absoluto y percibido. 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 Pingdom y GTmetrix obtener buenas lecturas. Pero no tan bueno como con Webpagetest. Eso no significa que no puedas y no debas asegurar tu los resultados con varias pruebas en diferentes herramientas. Y no significa que no debas medirte con Pingdom o GTmetrix. Pero puedo recomendarte que eches un vistazo a Webpagetest al menos una vez.

Casi se ha convertido en un mantra con nosotros: Para medir el tus sitio tiempo de carga, herramientas como Google PageSpeed Insights no fuera. Porque estos sólo determinan el tus sitiopotencial de rendimiento. 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 simplemente no permiten sacar conclusiones sobre lo que realmente sucede cuando un visitante tu sitio visita el 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 Insights que esto muestra dónde está el tus sitio potencial de optimización, las pruebas de páginas web pueden hacer mucho más. Porque te muestra no sólo cómo tu sitio puedes mejorar, sino también directamente qué efectos tienen las tu medidas de optimización en el tus sitio tiempo de carga.

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 a través tu de un 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 el tus sitio web de la prueba. Cuatro de estos ajustes son especialmente importantes para obtener buenos resultados de medición:

  • 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 está llamando sitio 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. Pero en la mayoría de los casos 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. Determinación del tiempo de carga para un usuario del grupo tus 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 se cargue a sitio través de una conexión 3G y de Firefox. Pero para empezar es suficiente con elegir el navegador que más se utiliza por el grupo tu objetivo.

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 medición al finaltu .

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 debes recordar que siempre debes medir la versión almacenadatus sitio . Puede lograrlo 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.

¿Tiene usted la tu URL - así que 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.

Es importante: Webpagetest sólo prueba el sitioque puede ser alcanzado bajo la URL, no tu toda la presencia en la web. Eso significa que debe probar la tu página de inicio, todas las páginas de destino y, si es relevante, el resumen del producto tu 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 se presentarán todos los datos clave relevantes del tiempo de carga de la página de tus datos para las variantes en caché y sin cachétus sitio . Lo importante es: En el resumen, 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 tu sitio tarda el usuario en tener la impresión de que sitio está completamente cargado. El tiempo de carga corresponde al tiempo de carga total tus sitiopercibido.
  • Primer byte: Tiempo hasta que el primer byte de datos se transmite entre el cliente y el servidor web. Este valor debería ser, de ser posible, inferior a 200 milisegundos y es un indicador importante del rendimiento del hostingtu .
  • Start Render: Este valor describe la cantidad de tiempo que un renderizado se sitio carga antes de que el contenido se muestre al visitante por primera vez. Hasta ese momento, el sitio contenido permanece completamente blanco 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 forma la norma de evaluación de la velocidad percibida del sitio web. Start Render marca el comienzo de la carga visibletus sitio, Document Complete el final.
  • Documento Completo: Este valor es idéntico al Tiempo de Carga.
  • Fully Loaded: Este valor indica cuando la sitio carga completa, con todos los guiones y elementos. Describe el tiempo total de carga técnica del sitio. 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 detu sitio : Una tiendasitio con 50 productos - es decir, 50 o más imágenes y descripciones - carga naturalmente más lento que una impresiónsitio, que consiste sólo en texto.

Así que sólo puedo adivinar: También probar los sitios de los competidores directos y los tus modelos de conducta. De esa manera obtendrá 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 lo tanto, ha realizado al menos tres mediciones consecutivas para la pruebatus sitio . Y los valores medios de estas tres medidas son los mejores valores aproximados que se pueden obtener para el tiempo de carga de la tu página.

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

Webpagetest trazando los resultados
Haciendo clic en la opción de trazado, Webpagetest calcula los valores promedio de los resultados de tu 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 se puede obtenertu 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 de los otros valores: Sólo tienes que buscar "First Byte" y "Start Render" a tu través de la búsqueda en el navegador (CTRL+F para PC y cmd+f para Mac).

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 inviertes tiempo y dinero en seguir optimizando tus las páginas o no. Y especialmente si ganas WordPress tu dinero con 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 tus sitioparámetros de rendimiento más importantes, sabes lo rápido tu sitio que carga y si todavía hay potencial de optimización, pero no sabes exactamente tu sitio dónde hay espacio para mejorar. 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 sobretu sitio... Puedes ver si todavía hay espacio para mejorar en ciertas áreas, cuán rápido carga tu sitio realmente y si podría cargar un poco más rápido. Sin embargo, todavía no se reconocen las causas 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 tu sitio obtener un montón de detalles de 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 tu sitio optimizarlos aún más.

Básicamente, un rápido sitio 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 sobre lo bien que está tus sitio optimizado el rendimiento. Esta revisión detallada contiene a su vez 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 lo tu sitio analices 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 comprobación de la optimización se puede, por ejemplo, ver exactamente qué imágenes tus sitio tienen todavía un potencial de optimización, qué peticiones deben comprimirse más y si tu el almacenamiento en 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 pasar algún tiempo con estas evaluaciones detalladas, pueden ayudarle a obtener una imagen detallada tus 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 tus sitio gratis tiempo de carga percibido. Puedes ver un video de la estructura de la página a través de la vista de la película. De esta manera se puede ver exactamente lo que tu los visitantes ven y se puede evaluar mejor si y cómo debe ser tu sitio optimizado.

Encuentra la cinta de cine de Webpagetest
Puedes encontrar la vista de la película en la vista general tu de los resultados de la medición en el extremo derecho. Atención: Esta opción no siempre se muestra. ¿Por qué no me queda claro... Sin embargo, la repetición de la prueba siempre ha hecho que esta opción esté disponible.

El tiempo de carga percibido es probablemente el parámetro más importante del tiempo de carga de la tus página. Influye en el hecho de que tu los visitantes abandonen el sitio sitio antes de tiempo, en la probabilidad de conversión y en la experiencia generaltus sitio. 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 sitio está completamente cargado, aunque esté lejos de estarlo.

La vista de Filstrip muestra con una precisión de una décima de segundo cómo se tu sitio ve y qué procesos se están ejecutando en un momento dado. Si miras la prueba con estos datosentonces te das cuenta de que no pasa nada durante sitio más de tres segundos. Entonces, sitio sin embargo, se ve casi igual que en el estado final. Así que el usuario tiene la impresión de que se carga sitio en 3,5 segundos. O, alternativamente, el visitante ya tiene la sensación después de 3,5 segundos de que puede sitio interactuar con él.

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 tu 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 tus sitio encontrar información detallada y cómo determinar y mostrar el tus sitio tiempo de carga percibido.

Así que sabes lo básico importante para obtener una visión general realmente completa de tu tu propiositio, el sitio tus de los clientes y cualquier otro proyecto web. Y sabes dónde conseguir la información que te permitirá llenar los resultados con vida y tu sitio sacar conclusiones significativas.

¿Pero por qué era eso importante otra vez? Muy simple: Sin un medición razonable del estado real tus sitio no puedes calificar correctamente la carga tu sitio actual. 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!

RAIDBOXER desde el inicio y Jefe de Apoyo. En el bar y WordCamps le gusta hablar de PageSpeed y del rendimiento de los sitios web. La mejor manera de sobornarlo es con un expreso o un pretzel bávaro.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

tu La dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con * marcado.