Estas dos funciones de WebPagetest aún no las conocía, pero debería utilizarlas regularmente

Jan Hornung Última actualización 21.10.2020
6 min.
Comparar sitios web con Webpagetest

Webpagetest.org es probablemente la mejor herramienta gratuita para medir el tiempo de carga de la página tus . Porque WebPagetest es incomparablemente más potente que la competencia directa. Y esto se debe principalmente a dos funciones: La capacidad de comparar sitios web y la comparación a largo plazo.

Este artículo forma parte de una serie sobre la medición y evaluación del tiempo de carga de las páginas web tus . En los artículos anteriores lo hemos demostrado:

Hoy te mostraré dos características de Webpagetest que probablemente aún no conocías. Porque la herramienta es especialmente adecuada para las comparaciones de rendimiento y una evaluación continua tus tiempo de carga de la página.

Así que hoy voy a mostrarte

Otros parámetros importantes - Índice de velocidad, elementos DOM y costes

Además de los valores estándar - como Inicio de Renderización, Documento Completo, etc. - Webpagetest también proporciona otros datos clave útiles que le permiten evaluar la eficiencia de tus sitio . Estos valores son importantes para poder interpretar correctamente los resultados de la herramienta.

Ejemplo de resultado de una prueba de página web que muestra los valores característicos ampliados importantes
Ejemplo de resultado de la prueba de una página web. El índice de velocidad, el número de elementos DOM y el número de peticiones son tres indicadores importantes para el rendimiento global tus sitio .

Elementos del DOM: Un elemento DOM es, a grandes rasgos, un bloque de construcción de HTML. Cuantos menos de estos bloques de construcción tenga que cargar el navegador tu , más ágil y rápido será tu sitio . Sin embargo, esto significa que el número de elementos del DOM es sólo una indicación del tiempo de carga de sitio. Haciendo cambios en Plugins, pero sobre todo en Theme, se puede reducir notablemente el número de elementos del DOM.

Extracto del código fuente de una entrada del blog RAIDBOXES
Cada elemento del cuerpo del HTML que está encerrado entre paréntesis angulares es un elemento del DOM.

Las solicitudes: Este valor describe el número de peticiones HTTP individuales que el navegador tu debe realizar al servidor web. Los elementos individuales, como los archivos CSS, los archivos JavaScript o las imágenes, se solicitan mediante una petición HTTP. Aquí también se aplica en teoría lo siguiente: cuantas menos solicitudes, mejor. Por cierto, el diagrama de cascada tus sitio siempre ofrece la mejor visión general de las peticiones HTTP que se cargan.

En la práctica, sin embargo, el número concreto de peticiones HTTP no juega un papel tan importante. Al menos no si tu sitio está encriptado con SSL y se ejecuta en un servidor con HTTP/2. Porque entonces se pueden ejecutar y cargar varias peticiones al mismo tiempo.

Índice de velocidad: Este índice es calculado por Webpagetest y es un indicador del tiempo de carga de la página percibido. El valor describe un valor en milisegundos -los valores bajos son, por tanto, mejores que los altos- que indica la rapidez y eficacia con la que se carga el contenido visible tus sitio . Básicamente, Webpagetest determina la experiencia del usuario mediante capturas de pantalla tus sitio y la mide con un valor de tiempo. Por si le interesa: Webpagetest también ha formulado un ecuación.

Base de cálculo del índice de velocidad
El índice de velocidad de Webpagetest se muestra y se calcula como un área. Cuanto más rápido se cargue el contenido de tus sitio , menor será la superficie y, por tanto, el índice de velocidad. Si está interesado en los detalles: Webpagetest enumera toda la información sobre el cálculo del Índice de Velocidad aquí.

El índice de velocidad es el más adecuado para las comparaciones. Si una medida de optimización da lugar a una reducción significativa del índice, tiende a tener éxito y sitio se percibe como más rápido. Si tu sitio tiene un índice de velocidad significativamente menor que los de la competencia, entonces se puede asumir que tu sitio ofrece a los visitantes una mejor experiencia de navegación.

El coste: Este valor es más bien un "nice-to-have". Indica lo caro que es tu sitio cuando se carga a través de las redes móviles. Los datos proceden de quéhaceelmysitecost.com y es un valor medio para todas las tasas de los países que figuran aquí. Utilizando esta función puede echar un vistazo al coste de la carga de móviles tus sitio una vez. Creo que este valor no es realmente relevante para la optimización en la mayoría de los casos. Por favor, corríjanme si me equivoco.

La función más importante de Webpagetest: Compare directamente varios sitios web

Cuando se mide el tiempo de carga de tus sitio , se suele hacer por dos razones: O bien has hecho un cambio y quieres saber qué influencia tiene en el tiempo de carga o quieres comparar tu sitio con otros.

Por supuesto, se necesita un valor de comparación para tal afirmación. Y precisamente por eso se creó la función"Comparación visual". Porque con él puedes comparar directamente el tiempo de carga y el comportamiento de carga de varias URLs.

La función de comparación visual le permite comparar sitios web directamente entre sí.
Encontrará la función de comparación directamente a la derecha del análisis estándar de Webpagetest.

Con esta función se puede, por ejemplo:

  • tu comparar sus propias páginas con las de la competencia
  • comprueba lo que ha supuesto el cambio de hoster
  • probar dos o más subpáginas entre sí
  • comprueba la velocidad de carga de las subpáginas en comparación con la página de inicio

Para la comparación directa sólo hay que nombrar las páginas, insertar las URL y ejecutar la prueba con los parámetros previamente establecidos.

A modo de prueba, comparamos dos de nuestras páginas de productos entre sí. El resultado permite comparar las páginas utilizando varias métricas. La más descriptiva se encuentra justo al principio del documento de resultados: la vista de tira de película. Aquí puede ver cuándo el visitante percibe que tu sitio ha terminado de cargarse (la métrica correspondiente se llama Visually Complete).

El valor de referencia también puede modificarse para que también se muestren otros valores característicos, como Totalmente cargado y Documento completo.

Resultado, si se comparan dos sitios web en Webpagetest
La métrica más descriptiva se presenta justo al principio: La vista de la tira de película. Todavía puedes configurarlo a través de los ajustes de la parte inferior derecha. Los diagramas de cascada pueden cambiarse de un lado a otro mediante el control deslizante situado a la izquierda, encima de los diagramas.

A continuación encontrará cuatro gráficos de barras que muestran el rendimiento de las páginas probadas en términos de tiempo de carga percibido, los puntos más importantes del tiempo de carga, el número de peticiones HTTP y el tamaño de la página sitio .

Con estas métricas, se puede ver de un vistazo cuál de las páginas probadas se carga más rápido, es más ágil y proporciona una mejor experiencia al visitante.

Para los usuarios de Google, Webpagetest también ofrece la posibilidad de realizar comparaciones a largo plazo

Si inicias la sesión en Webpagetest con tu cuenta de Google, se registran las pruebas individuales. Esto le da la oportunidad de ver todas las pruebas del año pasado y compararlas entre sí.

Comparaciones a largo plazo en Webpagetest para comparar varias versiones de un sitio web
El historial de pruebas de nuestra página web durante los últimos siete días. Cada vez que te conectas con tu cuenta de Google, las pruebas de tu se guardan y se pueden consultar posteriormente.

Esta visión general es muy práctica gracias a dos funciones: puede llamar a los datos históricos de las pruebas haciendo clic en la URL. Eso significa que puedes ver los resultados completos de todas las pruebas del año pasado.

Además, puede marcar pruebas individuales y compararlas entre sí para obtener una rápida visión general de las páginas de desarrollo tus .

Conclusión: Webpagetest es mucho más potente que otras herramientas gratuitas

La comparación directa de varias páginas es sin duda la función más potente de Webpagetest. Permite ver tu sitio en relación con la competencia, los modelos a seguir o los puntos de referencia del sector. Los resultados que recibe son - según los estándares de Webpagetest - también bien preparados y fáciles de entender.

El análisis de series temporales también permite obtener una imagen completa de la evolución del tiempo de carga de la página tus . De este modo, puede ver exactamente qué medidas de optimización o cambios han afectado a tu sitio , su tiempo de carga y la experiencia del usuario.

Con estas dos funciones podrá capturar y, sobre todo, analizar todos los cambios relevantes tus páginas.

¿Sabes otra función útil de Webpagetest que hemos olvidado? Entonces, ¡esperamos su comentario!

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 *.