Análisis de rendimiento con WebPageTest

Un sitio web rápido es ahora una necesidad absoluta. En una era móvil y con consumidores hospitalizados, un sitio web lento podría ser la diferencia entre que su negocio prospere o fracase. Entonces, ¿cómo prueba exactamente la velocidad de su sitio web y cómo puede identificar cualquier problema que pueda estar ralentizándolo?

En este artículo vamos a ver una herramienta popular llamada WebPageTest. Esta herramienta de medición proporciona una gran cantidad de estadísticas y datos detallados que se pueden usar para identificar áreas de su sitio que podrían mejorarse desde una perspectiva de rendimiento. Sin embargo, el gran volumen de información proporcionada puede ser un poco abrumador. No se preocupe... vamos a desglosar cómo usar WebPageTest paso a paso para que quede claro cómo aprovechar al máximo esta herramienta gratuita.

Primeros pasos con WebPageTest

Lo primero es lo primero, diríjase a webpagetest.org para comenzar. El diseño es súper claro e inmediatamente verá un cuadro donde puede ingresar la URL de su sitio web.

Tiene que elegir desde el principio... ¿Utiliza la pestaña "Pruebas avanzadas" predeterminada o se dirige a la pestaña "Pruebas simples"? Bueno, la función Prueba simple es excelente para obtener una descripción general rápida de su sitio, pero para este artículo veremos la pestaña Prueba avanzada.

Configuración de prueba avanzada

Desplácese hacia abajo en la página y verá un menú desplegable de ubicación de prueba. Esto se explica por sí mismo. La ubicación que desea elegir es la más cercana a donde se encuentra su público objetivo. Si tienen su sede en Australia, entonces las pruebas desde Londres, Reino Unido, no tienen mucho sentido. El objetivo de este ejercicio es averiguar cómo funciona nuestro sitio web para nuestros usuarios.

Hay un montón de ubicaciones, pero algunas ofrecen más opciones de prueba que otras en la forma del navegador utilizado para la prueba. Nuevamente, desea probar y seleccionar uno que probablemente sea utilizado por su público objetivo. Para ver algunas estadísticas sobre los navegadores desde los que se visita su sitio web, puede utilizar herramientas como Google Analytics.

Otras configuraciones realmente geniales que puede seleccionar son cosas como la conexión. Entonces, así sería como el dispositivo del usuario final se conecta a Internet. Haz clic en el menú desplegable junto a 'Conexión' y verás opciones que incluyen una conexión 3G (lenta o rápida). Eso es realmente genial, ya que le da una idea del mundo real de cómo su audiencia experimentará su sitio.

Otra configuración que es bastante útil es la opción 'Repetir vista'. Esta opción, cuando está habilitada, significa que el sitio se volverá a probar después de la primera carga, lo que ayuda a mostrar el impacto de cualquier almacenamiento en caché que haya habilitado en su sitio.

Hay una gran cantidad de opciones avanzadas adicionales que tal vez desee explorar. Para la mayoría de nosotros, a menos que esté profundizando mucho en la prueba de su sitio, la configuración descrita anteriormente será suficiente. Para aquellos que deseen obtener más información sobre las configuraciones realmente esenciales disponibles, consulte los documentos de WebPageTest.

Tome nota de cualquiera de las configuraciones que haya cambiado. Es importante que durante la fase de prueba y luego de optimización, siga probando nuevamente usando la misma configuración, de lo contrario, distorsionará los resultados que está obteniendo. Una vez que esté listo, presione el botón 'Iniciar prueba' y luego siéntese y espere los resultados (normalmente toma alrededor de un minuto).

Primera pantalla

En este ejemplo, usamos el sitio web de Apple (apple.com) y lo probamos con una conexión 3G rápida desde Londres, Reino Unido. Los resultados iniciales se muestran a continuación:

Eche un vistazo a la parte superior derecha y verá 7 cuadros de colores que proporcionan una descripción general inicial de cómo ha funcionado la página. Vamos a examinar lo que cada uno de estos son.

Recuadro 1 – Puntaje de seguridad

Esta es una característica reciente proporcionada por WebPageTest que en realidad es una integración con Snyk y proporciona una idea de la seguridad de un sitio web. Si hace clic en el cuadro de color, accederá al sitio web synk.io, que contiene un análisis detallado del sitio web en cuestión desde una perspectiva de seguridad. De particular interés son los encabezados de seguridad HTTP que se intercambian entre un cliente y un servidor para definir los detalles de seguridad de la comunicación. Los más importantes son Strict-Transport-Security, Content-Security-Policy, X-Frame-Options.

Aloje su sitio web con Pressidium

GARANTÍA DE DEVOLUCIÓN DE DINERO DE 60 DÍAS

VER NUESTROS PLANES

Si falta algún encabezado de seguridad vital en su sitio, se le informará en el sitio web de Synk.

Casilla 2 – Hora del primer byte

El segundo cuadro proporciona el Tiempo del primer byte (también conocido como Tiempo hasta el primer byte o TTFB). Este es el tiempo que tarda el servidor en responder con el primer byte de datos a la solicitud del cliente. Idealmente, apuntaría a una cifra inferior a 300 ms. Este valor está más relacionado con el servidor y es irrelevante para el tiempo que se consume en procesar los archivos de su sitio web. Puede verse afectado por un servidor DNS lento, por ejemplo, o por un almacenamiento en caché insuficiente.

En este punto, es importante tener en cuenta que si tiene el caché habilitado, debe volver a ejecutar la prueba de su página web para que se mida el contenido almacenado en caché. De hecho, se recomienda que ejecute la prueba al menos 3 veces para asegurarse de que los resultados reflejen completamente el contenido almacenado en caché en su sitio.

El tiempo del primer byte es la suma de tres valores: el tiempo necesario para que se envíe la solicitud HTTP, el tiempo para que el servidor lo procese y el tiempo que necesita el servidor para devolver el primer byte al cliente. Puede obtener más detalles al respecto haciendo clic en el cuadro:

Como podemos ver, al sitio web de Apple no le fue muy bien en esta parte particular de la prueba.

Una vez que se ha realizado esta conexión, los recursos pueden comenzar a ser entregados. Las razones más comunes de un TTFB lento son los problemas de red, la configuración del servidor web, la posible E/S del disco del servidor y los problemas de RAM.

Recuadro 3 – Mantener vivo

El cuadro "Keep-alive Enabled" muestra el estado del encabezado HTTP de mantenimiento. Cuando este encabezado está habilitado, los datos se transferirán utilizando la misma conexión; de lo contrario, se debe crear una nueva conexión para cada archivo que se deba transferir. Keep-alive está habilitado de forma predeterminada en la mayoría de los casos y generalmente es una configuración del lado del servidor. si necesita habilitarlo usted mismo, puede editar su archivo .htaccess e insertar el código a continuación

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Recuadro 4 – Transferencia Comprimida

El valor de Compress Transfer representa el estado de la compresión Gzip. Esta es una técnica utilizada para comprimir y luego descomprimir tus archivos estáticos en tiempo real. De esta forma se reduce el tiempo de transferencia porque se reduce el tamaño del archivo. Si tu proveedor de servidor no aplica esta tecnología por defecto puedes hacerlo tú mismo especificando la regla correspondiente para cada tipo de archivo así:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Nuevamente, hacer clic en el cuadro de color correspondiente lo llevará a una sección de descripción general detallada para que pueda ver qué está sucediendo exactamente en su sitio web.

Recuadro 5 – Comprimir imágenes

El cuadro Comprimir imágenes se explica por sí mismo. Haga clic en él y le mostrará qué imágenes podrían comprimirse mejor.

En este caso, WebPageTest ha identificado tres imágenes que cree que podrían comprimirse con éxito y ahorrar 54 kb en datos que no tienen que transferirse. Puede que esto no suene mucho, pero en un móvil, cada kb que puedas ahorrar marca la diferencia.

Las imágenes son el aspecto que más espacio ocupa de su contenido estático. Comprimirlos es una necesidad absoluta. El análisis de WebPageTest facilita la identificación de las imágenes que podrían estar ralentizando su sitio y, por lo tanto, necesitan atención.

Recuadro 6 – Contenido estático de caché

Si presiona la casilla 'Almacenar en caché el contenido estático', accederá a una sección detallada llamada 'Aprovechar el almacenamiento en caché del navegador de activos estáticos'.

Su desarrollador o administrador puede aprovechar el almacenamiento en caché del navegador instruyendo al navegador web cuándo almacenar en caché un recurso, cuándo no hacerlo y durante cuánto tiempo con el uso de los encabezados HTTP correctos. Puede encontrar información más detallada sobre el almacenamiento en caché del navegador en nuestro artículo '¿Cómo funciona el caché del navegador?'. También puede averiguar cómo Pressidium implementa el almacenamiento en caché del navegador aquí.

Cuadro 7 – Uso efectivo de CDN

Vale la pena usar una CDN (o red de entrega de contenido) si tiene una base de usuarios dispersa geográficamente. Si, por ejemplo, todos sus clientes tienen su sede en Londres y su servidor host también está ubicado en Londres, probablemente no tenga mucho sentido usar una CDN. Sin embargo, si sus usuarios son más diversos geográficamente, una CDN puede marcar una gran diferencia en el rendimiento de su sitio para esos usuarios al colocar una copia de su sitio web en un servidor ubicado más cerca de ellos.

Si está utilizando un CDN, WebPageTest observará la eficacia con la que funciona.

Resultados de rendimiento

Prosigamos y veamos algunos datos más, comenzando con los resultados de rendimiento que verá en la parte superior de la pestaña Resumen.

En los resultados de rendimiento, podemos ver las descripciones generales más importantes para cosas como el tiempo del primer byte, el índice de velocidad, que es el tiempo promedio en el que se muestran las partes visibles de la página, el cambio de diseño acumulativo (CLS) para medir la estabilidad visual, el tiempo consumido hasta que el Documento se cargue por completo y más.

Vista de cascada

Justo debajo de los resultados de rendimiento, podemos ver la vista en cascada de cada una de tus carreras. Si hace clic en cualquiera de ellos, será dirigido a la página que contiene todos los detalles de la carrera en formato de cascada.

Se le proporcionarán todas las estadísticas de rendimiento para cada activo individual de su sitio web. Estos son de diferentes colores, por lo que es más fácil distinguirlos. Si hace clic en cualquiera de estos, se abre una ventana emergente que proporciona aún más detalles.

La Vista en cascada es una representación visual de la página y cómo se carga el componente de cobertura. Esto nos permite identificar fácilmente cualquier componente que podría estar ralentizando las cosas. Es muy útil poder ver dónde están los cuellos de botella y significa que podemos solucionar los problemas con una precisión milimétrica en lugar de tener que adivinar.

Vista de conexión

El tablero Vista de conexión también es una característica muy útil, ya que le permite identificar problemas de rendimiento web muy fácilmente al resumir visualmente las medidas para las conexiones entre el navegador y el servidor.

Puede ver el estado de la conexión directamente desde el DNS, la conexión inicial, la negociación SSL hasta cosas como los recursos de video. Debajo de esto, también hay un gráfico que muestra el uso de la CPU en el dispositivo que está cargando el sitio web. También hay un indicador de ancho de banda que muestra los niveles utilizados durante la representación de datos.

Detalles de las solicitudes

Finalmente, debajo de la Vista de conexión, se le proporcionan dos paneles de análisis más: Detalles de solicitud y Encabezados de solicitud.

El panel Detalles de la solicitud es muy útil y enumera todos los recursos solicitados junto con datos relevantes para esa solicitud, como el tipo de contenido, la hora de inicio de la solicitud, la cantidad de bytes descargados y mucho más. Esta tabla en realidad se puede ordenar... simplemente haga clic en los encabezados de las columnas para ordenar por esa columna en particular.

El tablero de encabezados de solicitud proporciona (sí, lo adivinó) la lista de recursos de solicitud junto con la información del encabezado. Haga clic en cada uno para ver todos los detalles.

Conclusión

Si necesita un análisis en profundidad de la actividad de su sitio web, WebPageTest es una herramienta fantástica para usar. Incluso si no profundiza en la información que proporciona, puede tener una idea rápida de si su sitio está funcionando bien o no y si es necesario observar más de cerca su rendimiento. Y lo mejor de todo, ¡es gratis!