Webpagetest

Prueba de la página web: Doma al monstruo de las pruebas y analiza 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 . Por desgracia, proporciona muchos datos muy complejos. Hoy te mostraré qué 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 sabes cómo se cargan los proyectos de los clientes de tu y tus propias páginas podrás optimizarlas.

Tu propio sitio debe 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 tus y el posicionamiento en Google de tu . Sin embargo, muchos usuarios de WordPress ni siquiera llegan a determinar correctamente el tiempo de carga de su propio 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 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 (en nuestra opinión) la mejor herramienta de medición gratuita de todas. Así sabrás exactamente la velocidad de carga de tu sitio y si necesitas optimizarla y dónde.

Para entender exactamente cómo funcionan los distintos pasos del análisis, te aconsejo que mires los conjuntos de datos enlazados en los puntos importantes o que analices tu 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ás algunos de los mejores datos que hayas recogido tú mismo en tu sitio . Y sobre todo 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 te permite determinar de forma fiable el tiempo de carga absoluto y percibido tus sitio . Y es completamente gratuita. Y es completamente gratis. Sin barrera de pago, sin modelo de suscripción, simplemente datos valiosos y una API que te 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 puedas ni debas 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 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 tus sitio . 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 del SEO-, pero simplemente no te permiten sacar ninguna conclusión sobre lo que realmente ocurre cuando un visitante llama a tu sitio .

Pero eso es exactamente lo que quieres saber. Y eso es exactamente lo que necesitas 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 ello, hoy te mostraré cómo utilizar Webpagetest y cómo interpretar los resultados.

En la siguiente sección, me adentraré brevemente en 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. Toda la documentación de Webpagetest se puede encontrar en GitHub y también se puede descargar y utilizar localmente.

Mientras que PageSpeed Insights te muestra dónde está el potencial de optimización tus sitio , Webpagetest puede hacer mucho más. Te muestra no sólo cómo puedes 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 se podría decir que Webpagetest forma parte del plan de Google para hacer la web más rápida en general. Sea 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 obtienes grandes datos sobre el sitio web tu . E incluso si es la primera vez que lo usas, puedes 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: Obtén 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 la prueba, de los que hablaré con más detalle dentro de 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 que selecciones para la prueba simula un usuario que llama a sitio desde allí. Si seleccionas el servidor por defecto en EEUU, 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 quieres. 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. Determinar el tiempo de carga de un usuario de tus Grupo objetivo
  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 que utilices. Lo único importante es que debes utilizar la misma ubicación del servidor para la prueba antes y después de la optimización. De lo contrario, no podrás comparar correctamente los datos de las mediciones. 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 tienes la opción de seleccionar el servidor de pruebas mediante un mapa. También puedes 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, puedes definir que el sitio se cargue a través de una conexión 3G y de Firefox. Para empezar, sin embargo, basta con elegir el navegador que tu grupo objetivo utiliza con más frecuencia.

Puedes encontrar información sobre esto 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 la prueba debe mostrar al final. En los ajustes avanzados puedes, 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 debes medir más de una vez el tiempo de carga. De lo contrario, corres el riesgo de medir valores atípicos y posiblemente buscar un problema que no existe. Y créeme: ya lo hemos experimentado unas cuantas veces. Recomiendo al menos tres pruebas consecutivas.

Además, debes acordarte siempre de medir la versión en caché tus sitio . Puedes hacerlo utilizando 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 si seleccionas aquí al menos 3 pruebas y además incluyes la vista de repetición, los datos que obtengas serán realmente interesantes.

Una vez que hayas introducido la URL de tu -por ejemplo, https://raidboxes.de- y hayas establecido 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), puedes 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 comprueba sitio, que es accesible bajo la URL, no tu en su conjunto. Esto significa que debes probar la página de inicio de tu , todas las páginas de aterrizaje y, si es pertinente, también la descripción de productos de tu individualmente.

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. Sólo tienes que hacer clic aquí y obtendrás los resultados del análisis.

Paso 2: Obtén una visión general

Lo primero que ves 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 descubres un error aquí, simplemente repite la prueba. También verás los resultados del análisis potencial. Webpagetest también muestra los resultados de Google PageSpeed Insights . Si puedes soportar la presentación espartana de Webpagetest, puedes 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 te presentarán todos los datos clave relevantes tus tiempo de carga de la página para la variante con y sin caché tus sitio . 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
Lamentablemente, 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, tienes que ir un nivel más profundo. Dentro de un momento te explicaré cómo hacerlo.

Cinco valores son especialmente importantes ahora:

  • Tiempo de carga: El tiempo que tarda tu sitio hasta que el usuario tiene la impresión de que el sitio está completamente cargado. El tiempo de carga corresponde, por tanto, 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 debe ser, a ser posible, inferior a 200 milisegundos y es una indicación importante del rendimiento del alojamiento tu .
  • Inicio de la renderización: Este valor describe el tiempo que tarda en cargarse 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 norma de evaluación de la velocidad percibida del sitio web. Iniciar Renderización marca el comienzo de la carga visible tus sitio , Documento Completo el final.
  • Documento Completo: Este valor es idéntico al Tiempo de Carga.
  • Completamente cargado: 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 que es 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 tu sitio : 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: Prueba los sitios de tus competidores directos y los modelos de conducta de tus . Esto te dará valores comparativos dentro del sector.

Promedio - Ahora se trata de lo más importante

Desgraciadamente, 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 tomaste al menos tres medidas consecutivas para la prueba tus sitio . Y los valores medios de estas tres mediciones son las mejores aproximaciones que puedes obtener para el tiempo de carga de la página tu .

Y no te preocupes: crear los valores medios sólo requiere 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 obtienes una cantidad de datos inicialmente confusa 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 entiendes cómo leerlos, son cualquier cosa menos confusos.

Prueba de la página web Vista de la parcela
Estas parcelas son una excelente ilustración de por qué debes tomar siempre varias medidas: 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 de rendimiento profesional.

Como puedes 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 puedes obtener sobre tu sitio .

Por cierto: Haciendo clic en Box Repetir también puedes hacer que se muestren aquí 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 "Primer Byte" e "Iniciar Renderización" a través de tu (CTRL+F para PC y cmd+f para Mac).

Conclusión provisional: Mucho trabajo para datos especialmente valiosos

Vale, han sido muchas aportaciones. 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 los números de los gráficos: A veces, dos pruebas con los mismos ajustes pueden tener una diferencia de un segundo entero. Así que puede ser el azar el que decida si inviertes tiempo y dinero en seguir optimizando las páginas de tus o no. Y sobre todo si ganas dinero con WordPress tu , ya sea con tu propia tienda, con un negocio de diseño web o con tu propia agencia, deberías tener la mejor base de datos para tomar esa decisión.

Sin embargo, aún no hemos llegado al final. Porque ahora conoces los parámetros de rendimiento más importantes tus sitio , por lo que sabes lo rápido que se carga tu sitio y si aún hay potencial de optimización, pero aún no sabes dónde exactamente tu sitio puede aún mejorarse. Y para eso está exactamente el análisis detallado.

Paso 3: Análisis detallado

El resumen ya te dice mucho sobre tu sitio . Puedes ver si todavía 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ás identificar las causas de los problemas. 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 de un diagrama de cascada con sólo una mirada. Aquí te mostramos cómo leer correctamente los diagramas de cascada y cómo puedes 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ás 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

El glosario es lo primero que debes mirar si estás analizando tu sitio con webpagetest.org por primera vez. 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 detalladamente todos los términos técnicos.

En la lista de comprobación de la optimización encontrarás los criterios de evaluación individuales que se aplican a cada una de las peticiones 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, puedes ver exactamente qué imágenes de tus sitio tienen todavía potencial de optimización, qué peticiones deberían comprimirse más y si la caché de tu funciona correctamente.

Por último, en la sección de detalles encontrarás 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ás que dedicar algo de tiempo a estas evaluaciones detalladas, pero con su ayuda podrás hacerte una idea detallada de tus sitio y su potencial de optimización.

Y como se trata básicamente de 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 todos los demás tests que conocemos, Webpagetest es el único que muestra el tiempo de carga percibido tus sitio de forma gratuita. Con la vista de película, puedes ver un vídeo de la estructura de la página. De este modo, puedes ver exactamente lo que ven los visitantes de tu y puedes evaluar aún mejor si hay que optimizar tu sitio y cómo.

Prueba de la página web Encuentra Filmstripview
Encontrarás la vista de la tira de película en el resumen tu Resultado de la medición en el extremo derecho. Nota: Esta opción no siempre se muestra. 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 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 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 el rendimiento inicial sea lo más corto posible. Esto da al usuario la impresión de que el sitio ha terminado de cargarse muy pronto, aunque esté lejos de haber terminado.

La Vista de Filtros te muestra exactamente el aspecto de tu sitio y qué procesos se están llevando a cabo en cada momento. Si observas la prueba con estos datos, verás que no ocurre nada en sitio durante más de tres segundos. Sin embargo, el sitio tiene un aspecto casi idéntico al del estado final. El usuario tiene la impresión de que el sitio se 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 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 conseguirás una muy buena visión general de tu sitio

Bien, después de leer este artículo deberías ser capaz de elegir los ajustes adecuados 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 sabes dónde encontrar información detallada sobre tus sitio y cómo determinar y mostrar el tiempo de carga percibido tus sitio .

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

Pero, ¿por qué era esto importante de nuevo? Muy sencillo: sin una medición razonable del estado real de tus sitio , no puedes evaluar correctamente cómo se está cargando tu sitio . Y en segundo lugar, te 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á. Los campos obligatorios están marcados con *.