Webpagetest

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

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 tuy sus propias páginas podrá optimizarlas.

Su propio sitiodebe ser seguro. Y rápido. Por supuesto, porque del tiempo de carga dependen muchas cosas: la tasa de conversión, la sensación de seguridad de los visitantes de tusy el posicionamiento en Google de tu. Sin embargo, muchos usuarios de WordPress ni siquiera llegan a determinar correctamente el tiempo de carga de su propia sitio.

Algunos operadores de sitios, por ejemplo, no saben qué herramientas pueden utilizar para analizar adecuadamente su sitio. O no saben qué ajustes tienen que hacer para conseguir unos 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 tusitio con (en nuestra opinión) la mejor herramienta de medición gratuita de todas. De este modo, sabrá exactamente la velocidad de carga de tusitio y si es necesario 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. Al fin y al cabo, no es tan fácil poner orden en la maraña de datos. Pero como recompensa por el esfuerzo, recibirá algunos de los mejores datos que haya recogido usted mismo en tusitio . Y especialmente si trabajas para clientes 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 tussitio . Y es completamente gratuita. Y es completamente gratis. Sin barrera de pago, sin modelo de suscripción, simplemente datos valiosos y una API que permite automatizar todo: así es como debería 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 ni deba validar los resultados de tucon varias pruebas en diferentes herramientas. Y tampoco significa que no debas medir con Pingdom o GTmetrix. Sólo puedo recomendarte que al menos eches un vistazo a Webpagetest.

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

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.

Por desgracia, Webpagetest no sólo ofrece datos que no son precisamente 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 algunos de los antecedentes de la herramienta. Si no te interesa, salta esta parte.

Prueba de la 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. Sin embargo, en 2008 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á el potencial de optimización tussitio , Webpagetest puede hacer mucho más. Le muestra no sólo cómo puede mejorar tusitio sino también directamente qué efectos tienen las medidas de optimización tuen el tiempo de carga tussitio .

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. Como sea que uno 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 desanime. 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 lo hace con los siguientes cuatro pasos:

Paso 1: Establecer los parámetros de la prueba

Paso 2: Obtenga una visión general

Paso 3: Análisis detallado

Paso 4: 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 con el que se va a probar (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 Pingdom o GTmetrix.

El servidor seleccionado para la prueba simula un usuario que llama a sitiodesde allí. Si selecciona el servidor por defecto en 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. Puede distorsionar enormemente el resultado global y debe ajustarse en consecuencia, según la aplicación.

Los dos casos de uso más comunes son:

  1. Determinación del tiempo de carga para un usuario de tusGrupo de destino
  2. Comparación de los tiempos 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, no importa la ubicación del servidor. Lo único importante es que 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 una selección en forma de 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 sitiose cargue a través de una conexión 3G y Firefox. Para empezar, sin embargo, basta con elegir el navegador que tugrupo objetivo utiliza con más frecuencia.

Puede encontrar información al respecto en Google Analytics o Piwik, por ejemplo. Raidboxes , por ejemplo, es visitado 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. Por lo tanto, para un análisis en Webpagetest, yo probaría principalmente Chrome. Por otro lado, los resultados de Firefox y Safari también son 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 lleva a cabo la prueba -es decir, la ubicación del servidor y el navegador utilizado-, Webpagetest también ofrece la posibilidad de establecer lo que debe arrojar la prueba 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é tussitio . Para ello, puede utilizar la opción Vista de repetición.

Configuración avanzada de la prueba de la página web
La verdadera magia de la herramienta reside en la configuración avanzada de Webpagetest. Sólo cuando se seleccionan al menos 3 pruebas aquí y se incluye también la vista de repetición, los datos que se obtienen son 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), podrá 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 tuen su totalidad. Esto significa que debe probar la página de inicio de tu, todas las páginas de aterrizaje y, si es relevante, también la descripción de productos de tuindividualmente.

En esta guía trabajo con los datos del análisis de nuestra página web, raidboxes.de. Esto significa que puedes reproducir todo lo que se explica 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 se ve 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 los valores característicos más importantes (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 sección, 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 puede soportar la presentación 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 puntuación, la F la peor. 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 presentan todos los datos clave relevantes tustiempo de carga de la página para la variante con y sin caché tussitio . Es importante señalar aquí: En la vista general, Webpagetest sólo muestra los valores de una de las tres pruebas. La vista general muestra de qué prueba se trata directamente junto a las etiquetas Primera vista y Vista repetida. 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 tarda tusitio hasta que el usuario tiene la impresión de que la página sitioestá completamente cargada. El tiempo de carga corresponde, por tanto, al tiempo total de carga percibido tussitio .
  • 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 que tarda en cargarse un sitiohasta que se muestra el contenido al visitante por primera vez. Hasta ese momento, el sitiopermanece 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 el estándar de evaluación de la velocidad percibida del sitio web. Start Render marca el comienzo de la carga visible tussitio , Document Complete el final.
  • Documento completo: Este valor es idéntico al del tiempo de carga.
  • Fully Loaded: Este valor muestra cuando el sitioestá 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 mayor de cinco segundos

Por supuesto, estos valores son sólo reglas generales. Siempre depende de tusitio : Una página de la tienda con 50 productos -es decir, con 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 los sitios de sus competidores directos y los modelos de conducta de tus. Esto le dará valores comparativos dentro del sector.

Cálculo de los valores medios - Ahora es el momento de ponerse manos a la obra

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 ha tomado al menos tres medidas consecutivas para la prueba tussitio . Y los valores medios 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 los valores medios basta con pulsar un botón:

Resultados de las pruebas 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 tanto, el promedio es esencial para un análisis profesional del rendimiento.

Como puede ver, los tres valores medidos (1-3) están representados aquí en un diagrama (¡la diferencia entre el punto de medición 1 y el punto de medición 3 es especialmente notable aquí!) 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 tusitio .

Por cierto: Haciendo clic en Box Repetir también puede hacer que se muestren aquí los valores del tiempo de carga con y sin caché. Y si quiere encontrar los resultados de los otros valores: simplemente busque "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

Ok, eso fue un montón de entrada. Y fueron muchos pasos. Especialmente en comparación con los métodos de prueba simples. Pero el esfuerzo merece la pena, 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. Así que puede ser el azar el que decida si invierte tiempo y dinero en seguir optimizando las páginas de tuso 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 tussitio , por lo que sabe lo rápido que se carga tusitio y si todavía hay potencial de optimización, pero todavía no sabe dónde exactamente tusitio puede seguir mejorando. Y para eso está exactamente el análisis detallado.

Paso 3: Análisis detallado

El resumen ya le dice mucho sobre tusitio . Puedes ver si todavía hay margen de mejora en ciertas áreas, lo rápido que carga tusitio y si podría cargar un poco más rápido. Sin embargo, aún no podrá identificar las causas de los problemas. 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 tusitio 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 tusitio .

Básicamente, un sitiorá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 el grado de optimización del rendimiento de tussitio . 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

El glosario es lo primero que debe consultar si es la primera vez que analiza tusitio con webpagetest.org. 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 control de optimización encontrará los criterios de evaluación individuales que se aplican a cada una de las solicitudes HTTP. Una marca verde significa que se cumple el requisito, un triángulo amarillo indica que hay que 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 tussitio tienen todavía potencial de optimización, qué solicitudes deben comprimirse más y si el almacenamiento en caché de tufunciona correctamente.

Por último, 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 que aún son 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 algún tiempo a estas evaluaciones detalladas, pero con su ayuda podrá hacerse una idea detallada de tussitio y su potencial de optimización.

Y como se trata básicamente de la misma información que escupe PageSpeed Insights , por supuesto que se puede 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 tussitio de forma gratuita. Con la vista de película, puede ver un vídeo de la estructura de la página. De este modo, podrá ver exactamente lo que ven los visitantes de tuy podrá evaluar aún mejor si hay que optimizar tusitio y cómo.

Prueba de la página web Encontrar Filmstripview
Encontrará la vista de la tira de película en el resumen tuResultado de la medición en el extremo derecho. Nota: Esta opción no siempre aparece. No sé muy bien por qué. 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 tustiempo de carga de la página. Influye en que los visitantes de tuabandonen sitioantes de tiempo, en la probabilidad de conversión y en la experiencia general tussitio . Por lo tanto, especialmente para las tiendas, la velocidad percibida del sitio 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 vista de la película, recuerda 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 el intervalo entre T0 y la prestación de inicio sea lo más corto posible. Así, el usuario tiene la impresión muy pronto de que la página sitioha terminado de cargarse, aunque esté lejos de haber terminado.

La vista de bandas de filtros le muestra exactamente el aspecto de tusitio y los procesos que se están llevando a cabo en cada momento. Si miras la prueba con estos datos, verás que no pasa nada en sitiodurante más de tres segundos. Sin embargo, el sitiotiene un aspecto casi idéntico al del estado final. El usuario tiene la impresión de que sitiose carga en 3,5 segundos. O mejor dicho, después de 3,5 segundos, el visitante ya tiene la sensación de que puede interactuar con sitio.

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

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

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 tussitio y cómo determinar y mostrar el tiempo de carga percibido tussitio .

Así que usted sabe los fundamentos importantes para obtener una visión realmente completa de tu sitio , las páginas de tusclientes 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 tusitio .

Pero, ¿por qué era esto importante de nuevo? Muy sencillo: sin una medición razonable del estado real de tussitio , no se puede evaluar adecuadamente la carga actual de tusitio . Y en segundo lugar, le falta información para optimizar el tiempo de carga.

¿Tienes algún otro consejo para utilizar Webpagetest? Perfecto, ¡entonces escribe un comentario en este post!

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.