Prueba de página web: Domine al monstruo de las pruebas y analice el rendimiento del sitio web tu

Jan Hornung Última actualización 03.12.2020
14 min.
Webpagetest
Última actualización 03.12.2020

Webpagetest.org es probablemente la mejor y más completa herramienta gratuita para medir el tiempo de carga de la página tus . Desgraciadamente, proporciona muchos datos muy complejos. Hoy te mostraré lo que tienes que establecer, cómo puedes poner orden en el revoltijo de datos y qué parámetros necesitas para un análisis profesional. Porque sólo si sabe cómo se cargan los proyectos de los clientes de tu y sus propias páginas, podrá optimizarlas.

Su propio sitio debe ser seguro. Y rápido. Por supuesto, porque mucho depende del tiempo de carga: la tasa de conversión, la sensación de seguridad tus visitantes y el ranking de Google tu ofrecen. Sin embargo, muchos usuarios de WordPress ni siquiera llegan a determinar correctamente el tiempo de carga de su propio sitio .

Por ejemplo, algunos operadores de sitios web ni siquiera saben qué herramientas pueden utilizar para analizar correctamente su sitio . O no saben qué ajustes tienen que hacer para conseguir resultados realmente buenos. Para que no cometas los mismos errores, hoy te mostraré cómo puedes obtener una visión rápida y significativa de tu sitio con la (en nuestra opinión) mejor herramienta de medición gratuita. Así sabrá exactamente la velocidad de carga de tu sitio y si necesita optimizarla y dónde.

Para entender exactamente cómo funciona cada uno de los pasos del análisis, le aconsejo que consulte los conjuntos de datos enlazados en los puntos importantes o que analice su propio tu sitio en paralelo. Porque: poner orden en la maraña de datos no es tan fácil. Pero como recompensa por el esfuerzo, recibirá algunos de los mejores datos que haya recogido usted mismo a través de tu sitio . Y sobre todo si trabajas para un cliente o ganas dinero con tus proyectos de WP-WordPress tu , el esfuerzo merece la pena.

Webpagetest es la mejor herramienta que conocemos

Hay que reconocerlo: En este artículo alabamos efusivamente a webpagetest.org. Quizás demasiado efusivamente, pero no sin razón. Porque Webpagetest es la única herramienta que conocemos que permite determinar de forma fiable el tiempo de carga absoluto y percibido tus sitio . Y ello de forma totalmente gratuita. Sin barrera de pago, sin modelo de suscripción, sólo datos valiosos y una API que permite automatizar todo: así es como debe ser.

En aras de la exhaustividad, hay que decir que también se obtienen buenos resultados de medición con Pingdom y GTmetrix. Pero no tan bien como con Webpagetest. Por supuesto, esto no significa que no pueda y deba validar los resultados de tu con varias pruebas en diferentes herramientas. Y tampoco significa que no debas medir con Pingdom o GTmetrix. Sólo puedo recomendarte que eches un vistazo a Webpagetest al menos una vez.

Se ha convertido casi en un mantra para nosotros: Para medir el tiempo de carga tus sitio herramientas como Google PageSpeed Insights no son suficientes. Porque éstos sólo determinan el potencial de rendimiento tus sitio . Por supuesto, estos datos siguen siendo valiosos -desde el punto de vista del rendimiento y la optimización-, pero no permiten sacar ninguna conclusión sobre lo que realmente ocurre cuando un visitante accede a tu sitio .

Pero eso es exactamente lo que quieres saber. Y eso es exactamente lo que hay que saber para determinar si una medida de optimización es eficaz.

Desgraciadamente, Webpagetest no sólo ofrece datos no muy bonitos, sino también resultados de pruebas muy extensos. Por lo tanto, hoy le mostraré cómo utilizar Webpagetest y cómo interpretar los resultados.

En la siguiente sección, me referiré brevemente a los antecedentes de la herramienta. Si no te interesa, salta esta parte.

Prueba de página web: El hermano mayor de Google PageSpeed Insights

Webpagetest era originalmente un proyecto de AOL y sólo estaba destinado a uso interno. En 2008, sin embargo, el programa se convirtió en software de código abierto y ahora es mantenido y desarrollado principalmente por Google. La documentación completa de Webpagetest se puede encontrar en GitHub y también se puede descargar y utilizar localmente.

Mientras que PageSpeed Insights le muestra dónde están los potenciales de optimización tus sitio , Webpagetest puede hacer mucho más. Le muestra no sólo cómo puede mejorar tu sitio sino también directamente qué efectos tienen las medidas de optimización tu en el tiempo de carga tus sitio .

A diferencia de Pingdom y GTmetrix, no hay ninguna empresa detrás de Webpagetest que quiera vender un servicio de pago (vale, excepto Google, pero al menos el servicio no se vende directamente). Más bien podría decirse que Webpagetest forma parte del plan de Google para hacer la web más rápida en general. Sea como sea que se quiera evaluar los esfuerzos de Google en este contexto.

4 pasos para obtener datos realmente significativos sobre el tiempo de carga

Sí, Webpagetest es más complejo que otras herramientas. Pero no dejes que eso te asuste. En este caso, la complejidad es buena. Porque significa que se obtienen grandes datos sobre el sitio web tu . E incluso si es la primera vez que se utiliza, se puede obtener la información pertinente con bastante rapidez.

Y eso con los siguientes cuatro pasos:

Paso 1: Establecer los parámetros de la prueba

Paso 2: Obtenga una visión general

Tercer paso: Análisis detallado

Cuarto paso: Análisis del tiempo de carga percibido

Paso 1: Establecer los parámetros de la prueba

Webpagetest ofrece opciones de configuración muy finas para probar el sitio web tus . Cuatro de estos ajustes son especialmente importantes para obtener buenos resultados de medición:

  • el servidor que se va a probar con (1)
  • el navegador que se utilizará para las pruebas (2)
  • los ajustes avanzados de las pruebas, de los que hablaré con más detalle en un momento (3)
Página de inicio de Webpagetest
Este es el aspecto de la página de inicio de Webpagetest. Es un poco más complejo que el de Pingdom o GTmetrix.

El servidor seleccionado para la prueba simula un usuario que llama a sitio desde allí. Si selecciona el servidor por defecto en los Estados Unidos, el resultado de la prueba se emitirá para una llamada de página desde Texas. Sin embargo, en la mayoría de los casos, esto no es necesariamente lo que usted desea. Por lo tanto, este ajuste es muy importante. Porque puede distorsionar enormemente el resultado global y debe ajustarse en consecuencia, según el caso de uso.

Los dos casos de uso más comunes son:

  1. Determinación del tiempo de carga para un usuario de tus Grupo objetivo
  2. Comparación del tiempo de carga tras 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 lo que ha costado una medida de optimización, en principio no importa la ubicación del servidor que utilices. Lo único importante es: debe utilizar la misma ubicación del servidor para la prueba antes y después de la optimización. De lo contrario, no se pueden comparar los datos de medición correctamente. Por supuesto, aquí también recomiendo un servidor de pruebas alemán. Esto simplemente proporciona los resultados más realistas.

Webpagetest: Mapa para la selección del servidor de pruebas en Webpagetest.org
Además de la selección de la lista, también tiene la opción de seleccionar el servidor de prueba a través de un mapa. También puede ver un resumen de todos los servidores de prueba aquí.

El navegador utilizado

Webpagetest ofrece muchas opciones de configuración para simular determinadas técnicas de transmisión y navegadores. Por ejemplo, puede definir que el sitio se cargue a través de una conexión 3G y Firefox. Sin embargo, para empezar, basta con elegir el navegador que tu grupo objetivo utiliza con más frecuencia.

Puede encontrar información al respecto en Google Analytics o Piwik, por ejemplo. Por ejemplo, RAIDBOXES se visita mayoritariamente a través de Chrome.

Extracto de los navegadores utilizados por los visitantes de raidboxes.de. Estos sirven como plantilla 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 Chrome. Los resultados de Firefox y Safari son, por supuesto, también interesantes.

Muy importante: ¡Los ajustes avanzados determinan la calidad de los datos de medición de tu !

Además de los dos parámetros que determinan cómo se realiza la prueba, es decir, la ubicación del servidor y el navegador utilizado, Webpagetest también ofrece la opción de establecer lo que la prueba debe producir al final. En los ajustes avanzados puede, por ejemplo, definir que sólo se emitan determinados valores o que la medición se detenga automáticamente después de un tiempo determinado. 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 hay que medir más de una vez el tiempo de carga. De lo contrario, se corre el riesgo de medir valores atípicos y posiblemente buscar un problema que no existe. Y créanme: ya lo hemos experimentado unas cuantas veces. Recomiendo al menos tres pruebas consecutivas.

También debe recordar que siempre debe medir la versión en caché tus sitio . Para ello, puede utilizar la opción Vista de repetición.

Configuración avanzada de Webpagetest
La configuración avanzada de Webpagetest es donde reside la verdadera magia de la herramienta. Sólo si selecciona aquí al menos 3 pruebas y además incluye la Vista de repetición, los datos que obtenga serán realmente interesantes.

Una vez que haya introducido la URL tu -por ejemplo, https://raidboxes.de- y haya configurado 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 sus páginas, el análisis puede tardar unos minutos.

Es importante tener en cuenta que Webpagetest sólo prueba sitio, que es accesible bajo la URL, no tu en su conjunto. Esto significa que debe probar tu página de inicio, todas las páginas de aterrizaje y, si es relevante, también tu resumen de productos individualmente.

En esta guía trabajo con los datos del análisis de nuestra página web, raidboxes.de. Eso significa que puedes reproducir todo lo explicado aquí uno a uno en webpagetest.org. Haga clic aquí y obtendrá los resultados del análisis.

Paso 2: Obtener una visión general

Lo primero que verás es el resumen del tiempo de carga de la página. Se divide en tres áreas:

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

(1) Cuanto más verde, mejor

En la primera zona, se enumeran de nuevo los parámetros de la prueba para su comprobación. Si descubre un error aquí, simplemente repita la prueba. También verás los resultados del análisis de potencial. Webpagetest también muestra los resultados de Google PageSpeed Insights . Si está satisfecho con la pantalla espartana de Webpagetest, puede prescindir de PageSpeed Insights .

Webpagetest utiliza un código de grado y color de la escuela. La A es la mejor, la 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 la necesidad urgente de actuar.

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

En la segunda sección de los resultados se obtienen todos los datos clave relevantes tus tiempo de carga de la página para la variante con y sin caché tus sitio presentada. Es importante tener en cuenta: En el resumen, Webpagetest sólo muestra los valores de una de las tres pruebas. La vista general le muestra de qué prueba se trata directamente junto a las etiquetas Primera vista y Repetir vista. La ejecución 2, por ejemplo, es el resultado de la segunda prueba.

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

Cinco valores son especialmente importantes ahora:

  • Tiempo de carga: El tiempo que necesita tu sitio hasta que el usuario tiene la impresión de que la página sitio está completamente cargada. El tiempo de carga corresponde, pues, al tiempo total de carga percibido tus sitio .
  • Primer byte: Tiempo hasta que se transmite el primer byte de datos entre el cliente y el servidor web. Este valor debería ser, a ser posible, inferior a 200 milisegundos y es una indicación importante del rendimiento del alojamiento tu .
  • Start Render: Este valor describe el tiempo de carga de un sitio hasta que se muestra el contenido al visitante por primera vez. Hasta ese momento, el sitio permanece completamente blanco para el usuario. Por supuesto, este valor también debe ser lo más bajo posible. Junto con el tiempo de carga (o documento completo), este valor constituye la referencia de evaluación de la velocidad percibida del sitio web. Start Render marca el comienzo de la carga visible tus sitio , Document Complete el final.
  • Documento completo: Este valor es idéntico al del tiempo de carga.
  • Fully Loaded: Este valor muestra cuando el sitio está completamente cargado con todos los scripts y elementos. Describe el tiempo total de carga técnica de sitio. Esto suele ser irrelevante para el visitante. Lo realmente decisivo es el tiempo de carga percibido.

Lo siguiente se aplica a todos estos valores: cuanto más pequeños, mejor. Como orientación, puedes recordar:

  • el tiempo hasta el primer byte debe ser inferior a 200 milisegundos
  • El inicio de la representación no debe ser superior a 2,5 segundos
  • El documento completo no debe ser superior a cinco segundos

Por supuesto, estos valores son sólo reglas generales. Siempre depende de tu sitio : Una página de la tienda con 50 productos -es decir, 50 o más imágenes y textos descriptivos- se carga naturalmente más lentamente que una página de impresión compuesta sólo por texto.

Por lo tanto, sólo puedo aconsejar: Pruebe también los sitios de la competencia directa y tus modelos de rol. De este modo, se obtienen valores comparativos dentro del sector.

Cálculo de los valores medios - Ahora es el momento de los detalles

Lamentablemente, la visión general explicada anteriormente sólo muestra los resultados de una única medición. Y recuerda: los valores únicos y aislados pueden llevarte por el mal camino. Por eso también ha realizado al menos tres mediciones consecutivas para la prueba tus sitio . Y los promedios de estas tres mediciones son las mejores aproximaciones que se pueden obtener para el tiempo de carga de la página tu .

Y no te preocupes: para crear las medias basta con pulsar un botón:

Trazar los resultados de la prueba de la página web
Al hacer clic en la opción de trazado, Webpagetest calcula los valores medios de los resultados de las mediciones de tu .

Ahora se obtiene una cantidad inicialmente confusa de datos de las llamadas parcelas. Y estos son exactamente los resultados que quieres tener. En principio, esta nueva visión general es la misma para todos los valores. Así que una vez que se entiende cómo leerlos, son cualquier cosa menos confusos.

Prueba de la página web Vista de la parcela
Estos gráficos son una excelente ilustración de por qué siempre hay que hacer varias mediciones: El punto de medición 3 es casi un segundo peor que el punto de medición 1, por lo que el promedio es esencial para un análisis de rendimiento profesional.

Como puede ver, los tres valores medidos (1-3) se representan aquí en un diagrama (destaca especialmente la diferencia entre el punto de medición 1 y el punto de medición 3). Encima del 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 puede obtener sobre tu sitio .

Por cierto: marcando la casilla Repetir también puedes obtener los valores del tiempo de carga con y sin caché. Y si quieres encontrar los resultados de los otros valores: sólo tienes que buscar "First Byte" y "Start Render" a través de tu (CTRL+F para PC y cmd+f para Mac).

Conclusión provisional: mucho trabajo para datos especialmente valiosos

Bien, eso fue mucho aporte. Y fueron muchos pasos. Especialmente en comparación con los métodos de prueba simples. Pero merece la pena el esfuerzo, porque lo has visto en las cifras de los gráficos: A veces, dos pruebas con la misma configuración pueden tener una diferencia de un segundo entero. En determinadas circunstancias, es el azar el que decide si se invierte tiempo y dinero en la optimización posterior de las páginas de tus o no. Y, sobre todo, si gana dinero con WordPress tu , ya sea con su propia tienda, con un negocio de diseño web o con su propia agencia, debería tener la mejor base de datos para tomar esa decisión.

Sin embargo, todavía no hemos llegado al final. Porque ahora conoce los parámetros de rendimiento más importantes tus sitio , por lo que sabe la velocidad de carga de tu sitio y si todavía hay potencial de optimización, pero no sabe exactamente en qué aspectos tu sitio puede todavía mejorarse. Y para eso está el análisis detallado.

Paso 3: Análisis detallado

El resumen ya le dice mucho sobre tu sitio . Puedes ver si hay margen de mejora en ciertas áreas, lo rápido que carga tu sitio y si podría cargar un poco más rápido. Sin embargo, aún no podrá identificar las causas de los problemas. Pero puede encontrarlos en los informes detallados:

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

Básicamente, un sitio rápido 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 especialmente relevantes.

En la revisión del rendimiento encontrará información detallada sobre la optimización del rendimiento de tus sitio . Esta revisión detallada contiene tres elementos:

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

Si es la primera vez que analiza tu sitio con webpagetest.org, debería echar un vistazo al glosario. Aquí se explican todos los términos importantes de la evaluación del rendimiento.

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

En la lista de comprobación de la 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 significa que se cumple el requisito, un triángulo amarillo indica que es necesario mejorar, y una cruz roja significa 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 puede ver exactamente qué imágenes de tus sitio tienen todavía potencial de optimización, qué solicitudes deberían comprimirse más y si el almacenamiento en caché de tu está funcionando correctamente.

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

Tendrá que dedicar algo de tiempo a estas evaluaciones detalladas, pero con su ayuda podrá hacerse una idea detallada de tus sitio y su potencial de optimización.

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

Paso 4: Análisis del tiempo de carga percibido

A diferencia de todas las demás pruebas que conocemos, Webpagetest es la única que muestra el tiempo de carga percibido tus sitio gratis . A través del moviestripview puedes ver un vídeo de la carga de la página. De este modo, podrá ver exactamente lo que ven los visitantes de tu y podrá evaluar aún mejor si es necesario optimizar tu sitio y cómo hacerlo.

Prueba de la página web Encontrar Filmstripview
Encontrará la vista de la película en el resumen tu en el extremo derecho. Atención: Esta opción no siempre aparece. El por qué no está muy claro para mí. Sin embargo, la repetición de la prueba siempre ha hecho accesible la opción.

El tiempo de carga percibido es probablemente la métrica más importante tus tiempo de carga de la página. Influye en que los visitantes de tu abandonen sitio antes de tiempo, en la probabilidad de conversión y en la experiencia general tus sitio . Por lo tanto, especialmente para las tiendas, la velocidad percibida de la página web es un punto de referencia importante. Por supuesto, el tiempo de carga percibido debe ser siempre lo más bajo posible.

Además de la película Stripview, recuerda esto:

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

La vista Filstrip le muestra el aspecto de tu sitio y los procesos que se están ejecutando en cada momento, con una precisión de décimas de segundo. Si observas la prueba con estos datos, verás que no pasa nada en sitio durante más de tres segundos. Sin embargo, de un plumazo, sitio se ve casi exactamente igual que en su estado final. El usuario tiene la impresión de que sitio se carga en 3,5 segundos. O mejor dicho, el visitante ya tiene la sensación, a los 3,5 segundos, de que puede interactuar con la sitio .

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

Conclusión: Con estos fundamentos y un poco de práctica tendrás una muy buena visión general de tu .sitio

Bien, después de leer este artículo deberías ser capaz de elegir la configuración correcta para una prueba de página web, saber qué métricas interpretar y cómo evitar interpretaciones erróneas debido a los valores atípicos. También sabe dónde encontrar información detallada sobre tus sitio y cómo determinar y mostrar el tiempo de carga percibido tus sitio .

Así que usted sabe los fundamentos importantes para obtener una visión realmente completa de tu propia sitio, las páginas tus clientes y cualquier otro proyecto web. Y ya sabe dónde obtener la información que le permita llenar de vida los resultados de las mediciones y sacar conclusiones significativas para tu sitio .

Pero, ¿por qué era esto importante de nuevo? Sencillamente: sin una medición razonable del estado real de tus sitio no se puede evaluar adecuadamente la carga actual de tu sitio . Y por otro lado, te falta información para optimizar el 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

Escribe un comentario

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