Web Page Test Optimization

WebPagetest es un proyecto de código abierto que principalmente está siendo desarrollado y respaldado por Google como parte de los esfuerzos para hacer que la web sea más rápida.

WebPagetest es una herramienta que fue desarrollada originalmente por AOL para su uso interno y fue de código abierto en 2008 bajo una licencia BSD. La plataforma está en desarrollo activo en GitHub y también se empaqueta periódicamente y está disponible para su descarga si desea ejecutar su propia instancia.

La versión en línea en www.webpagetest.org se ejecuta en beneficio de la comunidad de rendimiento con varias empresas y personas que proporcionan la infraestructura de prueba en todo el mundo.

Hoy en día, optimizar las páginas Webs es un requisito indispensable. “Web Page Test” es una herramienta muy completa que te permite ejecutar una prueba de velocidad de tu sitio Web de forma gratuita desde múltiples ubicaciones en todo el mundo y utilizando navegadores reales como Internet Explorer o Chrome y a velocidades reales de conexión del consumidor.

Es posible ejecutar pruebas sencillas o realizar pruebas avanzadas, incluidas las transacciones en varios pasos, la captura de video, el bloque de contenido y mucho más. Los resultados proporcionan mucha información de diagnóstico que incluye gráficos de cascada con la carga de los recursos, comprobaciones de optimización de Page Speed y sugerencias para mejorar.

Web Page Test dispone de un foro donde expertos debaten sobre temas relacionados con la optimización Web.

Vamos a hacer una prueba avanzada para ver en que estado está “jose-aguilar.com”.

Añadimos el dominio completo “https://www.jose-aguilar.com/”. Puedes elegir entre multitud de lugares. Hemos escogido París, Francia con el navegador Internet Explorer 11. En parámetros avanzados hay un montón de opciones. Lo vamos a dejar tal y como está. Por defecto. Pulsamos en “Start test”.

Al pulsar este botón para empezar el test, la prueba de rendimiento para la página Web indicada se ha enviado y tarda unos cuantos segundos en procesarse, La página se va actualizando automáticamente con el estado de la prueba hasta que se muestra el análisis por completo.

Cuando el resultado aparece al completo, podemos ver una cabecera de resumen donde se muestra el dominio para la prueba, desde que lugar, en que navegador y la fecha de ejecución. A la derecha aparecen un cuadros que mediante colores y letras del abecedario miden el estado de tu Web.

El color rojo y letra F significa que hay un problema o fallo en esa parte. El color verde y la letra A significa que está correcto y el N/A significa que no aplica.

First Byte Time: El tiempo de First Byte (a menudo abreviado como TTFB) se mide como el tiempo desde el inicio de la navegación inicial hasta que el navegador recibe el primer byte de la página base (después de los siguientes re-direccionamientos).

Keep-alive Enabled: Cada solicitud de un contenido en la página (imagen, javascript, css, flash, etc.) debe realizarse a través de una conexión al servidor web. La configuración de nuevas conexiones puede llevar mucho tiempo, por lo que es mejor reutilizar las conexiones cuando sea posible y keep-alive es la forma de hacerlo. Están habilitados por defecto en la mayoría de las configuraciones y son parte del estándar HTTP 1.1, pero hay momentos en que se romperán (a veces de forma involuntaria). La habilitación de Keep-Alives suele ser solo un cambio de configuración en el servidor y no requiere ningún cambio en la página en sí, y generalmente puede reducir el tiempo de carga de una página en un 40-50%.

Compress Transfer: Casi todo en una página que no es una imagen o video es texto de algún tipo (html, javascript, css). El texto se comprime muy bien y HTTP proporciona una forma de transferir los archivos en forma comprimida. Permitir la compresión de los recursos de texto suele ser solo un cambio en la configuración del servidor sin requerir ningún cambio en la página y puede tanto mejorar el rendimiento como reducir los costos de servicio del contenido (al reducir la cantidad de datos transmitidos). Dado que los recursos de texto generalmente se descargan al principio de la página (javascript y css), entregarlos más rápido tiene un impacto mucho mayor en la experiencia del usuario que bytes excesivos en imágenes u otro contenido.

Compress Images: La comprobación de compresión de imagen solo mira imágenes fotográficas (archivos JPEG) y se asegura de que la calidad no sea demasiado alta. Las imágenes JPEG generalmente se pueden comprimir de forma bastante sustancial sin ninguna reducción apreciable de la calidad visual. Se emplear el estándar para comprimir las imágenes con un nivel de calidad de “50” en el modo “Guardar para Web” de Photoshop, pero en general debes comprimir-las tanto como pueda antes de que comiencen a verse mal. Tampoco es raro que se incluyan otros datos en las fotos, particularmente si provienen de una cámara digital (información sobre la cámara, lente, ubicación, incluso imágenes en miniatura) y parte de eso deben eliminarse de las imágenes antes de publicarse en una página web.

Cache static content: El contenido estático son las piezas de contenido en su página que no cambian con frecuencia (imágenes, javascript, css). Puede configurar-los para que el navegador del usuario los almacene en un caché, de modo que si el usuario vuelve a la página (o visita otra página que usa el mismo archivo) pueden simplemente usar la copia que ya tienen en lugar de solicitar el archivo al servidor web de nuevo. Almacenar con éxito el contenido estático en el navegador del usuario puede mejorar significativamente el rendimiento de una visita repetida (hasta un 80% más dependiendo de la página) y reduce la carga en los servidores web. A veces puede ser difícil implementar el almacenamiento en caché sin romper una página, así que no solo lo habilites a ciegas (debes poder cambiar el nombre del archivo para los archivos que espera cambiar).

Use of CDN: Cada solicitud de contenido al servidor web debe viajar desde el navegador del usuario hasta el servidor y viceversa. A medida que se aleja cada vez más del servidor, esto puede convertirse en una cantidad de tiempo significativa (que se suma rápidamente ya que hay más solicitudes en la página). En última instancia, el tiempo que lleva está limitado por la velocidad de la luz, por lo que no hay mucho que puedas hacer, excepto acercar tu servidor a los usuarios. Eso es exactamente lo que hace una Red de distribución de contenido (CDN). Tienen servidores en todo el mundo que están cerca de los usuarios y pueden servir el contenido estático de un sitio web desde servidores cercanos a los usuarios. El único caso en el que no tiene sentido utilizar un CDN es si todos los usuarios de un sitio web ya están cerca del servidor web.

Justo debajo de este resumen, aparece una tabla de resultados:

Donde podemos ver los tiempos de carga, tiempo del primer byte, el índice de velocidad, las solicitudes, el tamaño en bytes de la página cargada, etc.

El índice de velocidad es importante y tenemos que intentar mejorarlo lo máximo posible. El índice de velocidad es el tiempo promedio en el que se muestran las partes visibles de la página. Se expresa en mili-segundos y depende del tamaño del puerto de visualización.

La métrica Índice de velocidad se agregó a WebPagetest en abril de 2012 y mide la rapidez con la que se llena el contenido de la página (donde los números más bajos son mejores). Es particularmente útil para comparar experiencias de páginas entre sí (antes / después de la optimización, mi sitio frente a competidor, etc.) y debe usarse en combinación con otras métricas (tiempo de carga, inicio de renderizado, etc.) para comprender mejor el rendimiento de un sitio.

En la tabla de resultados podemos ver la carga de contenidos en cascada donde podemos averiguar fácilmente que recurso está haciendo retrasar la carga. Puedes ver capturas de pantalla de la página y un video.

No solo se ejecuta una prueba y ya está. En el análisis se hacen 3 pruebas donde puedes ver un intervalo de tiempos ya que el tiempo de carga de una página Web no es siempre el mismo. Puede variar por diferentes circunstancias. Además te mantiene un historial de las pruebas para que puedas compararlas para ver si con los cambios  que aplicas consigues mejorar el rendimiento.

Revisar el estado de mi Web con WebPageTest ahora

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Web Page Test Optimization”

  1. […] métrica Índice de velocidad se agregó a WebPagetest en abril de 2012 y mide la rapidez con la que se llena el contenido de la página (donde los […]

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.