Siempre trabajamos por mejorar el rendimiento de nuestro sitio web, algunos están buscando como mejorar 500 ms de tiempo de carga de la página a través de técnicas avanzadas, mientras que otros se conforman con instalar un plugin o código básico para seguir adelante (generalmente una mala idea). Por supuesto, entiendo que no todos tienen tiempo para convertirse en experto en el funcionamiento.
Todos deseamos realizar el mejor rendimiento para nuestra web desde diferentes orígenes. Con este fin, daré una visión general de los diagramas de cascada: qué son, por qué son útiles, y cómo se puede generar el tuyo propio.
Si ya eres profesional con los diagramas de cascada, no pasa nada si deseas abandonar la lectura, si no es así, daremos un paseo y con suerte aprenderás un par de cosas.
¿Qué es un gráfico de cascada?
Me gusta pensar en un gráfico de cascada como una radiografía que muestra el funcionamiento interno de cómo un navegador carga la página web. Cuando se escribe cnn.com o lo que sea en el navegador, sin duda te acostumbras a ver los diversos "esperando en ..." y "cargando ...", mensajes que aparecen en la barra de estado. Lo que quizás no te hallas dado cuenta, es la cantidad de "otros" contenidos que también se están cargando durante el proceso: archivos CSS, javascript, anuncios externos y más.
El gráfico de cascada muestra cómo se crea todo y proporciona una visibilidad completa de cada pieza de contenido que se utiliza para mostrar la página web. Y no sólo una lista de todos los recursos, sino que los muestra a tiempo real junto con la ordenación que se realiza durante cada carga de la página. Cuando deseas diagnosticar una página web con un rendimiento lento, estos datos puede llegar a ser inmensamente valiosos para identificar los cuellos de botella.
Considera el siguiente ejemplo: El eje horizontal muestra el tiempo de carga de la página en cuestión de segundos. El eje vertical muestra la secuencia en orden de carga de los recursos por el navegador. Observa todos los ". Js" (javascript), ". Css" (hojas de estilo en cascada), contenidos publicitarios y demás.
En función del navegador utilizado, muchos de estos recursos se pueden cargar en paralelo (de ahí los plazos superpuestos), pero incluso esto no tiene límites y, finalmente, el navegador se ve obligado a esperar a que algunos de los recursos terminen la carga antes de intentar continuar con el siguiente conjunto de recursos. Esta espera puede llegar a ser un componente importante del tiempo total de carga de la página.
¿Cómo se crea un gráfico Waterfall?
Si bien hay varias herramientas para hacer esto, en mi opinión, la mejor es WebPageTest . Es fantástico y es gratis.
Para comenzar, visita http://webpagetest.org y verás una página como ésta:
Hay una serie de opciones aquí, por las que vamos a caminar a través de la más pertinentes:
Todas las otras opciones se pueden mantener de forma predeterminada.
- URL: Ésta debería ser obvia, pero ten en cuenta que la tabla de cascada se crea para una sola página. Bien puede ser tu página de inicio, pero cuando se profundiza en una página secundaria (por ejemplo una página de categoría en un sitio de comercio electrónico) tu rendimiento caerá bruscamente. Es bueno para poner a prueba esas páginas interactuar con la mayoría, no sólo centrarnos en la página de inicio.
- Ubicación: Ésta es muy importante: tu sitio puede cargar de manera muy diferente desde diferentes lugares del mundo. Si estás en España, no asumas que todos los usuarios estén también en España. Mire tus registros de tráfico y / o informes de historial de ventas para conocer la procedencia de los usuarios, a continuación, elije una ubicación más cercana a dicho origen. Puede que tengas que realizar algunas pruebas desde diferentes lugares del mundo para obtener una imagen más clara.
- Navegador: Los diagramas en cascada son específicos para un navegador en particular, y no todos los navegadores funcionan de igual forma. Mientras que resulta tentador probar únicamente Chrome, mira tus registros de tráfico y observa si también estás recibiendo tráfico de Internet Explorer, Firefox, Safari u otros navegadores. No cometas el error de asumir que un sitio web rápido en Chrome también lo es rápido para Explorer.
- Conexión: Normalmente suelo dejar éste en el valor por defecto de "Cable", ya que la mayoría de los usuarios hoy en dia utilizan este tipo de conexión de banda ancha o superior.
- Número de pruebas: El Internet es una bestia caprichosa. Las cosas que se cargan rápidamente en un momento en el tiempo pueden cargar más lento al siguiente. Todo depende de la congestión actual en las rutas de que se toman de tráfico. Para suavizar estas variaciones, recomiendo elegir un valor de 3. De esta forma, WebPageTest ejecutará la misma prueba 3 veces y reportará los valores medios para suavizar cualquier anomalía. Si bien esto tarda un poco más en ejecutar la prueba, la precisión mejora y a menudo vale la pena.
- Repitir la Vista: Normalmente la primera vez que se carga una página web es mucho más lenta que la segunda. ¿Por qué? Debido a que el navegador sigue las instrucciones del sitio web para la caché (también conocido como "mantener una copia local de"), tales como imágenes, archivos de javascript, y así sucesivamente. El nivel de almacenamiento en caché varía enormemente de un sitio a otro, por lo que su utilidad para seleccionar "First View y Repeat View" puede servirnos para ver qué efectividad tiene el almacenamiento en caché en nuestro sitio.
Ejecución de la prueba
Ahora, ya puedes hacer click en "Start Test" y dejar a WebPageTest hacer su magia. Una sola prueba suele tardar unos 30 segundos o más para completar, pero puede funcionar durante más tiempo si el sitio se está cargando de forma lenta o el "número de pruebas" seleccionado es alto. Además, el servidor de prueba sólo ejecutará una prueba a la vez, por lo que si otros usuarios han presentado solicitudes de prueba antes de que nosotros, deberemos esperar en cola.
Al finalizar la prueba, la herramienta se completará y veremos un resumen del resultado obtenido como este:
Hay una gran cantidad de información que se muestra aquí, así que vamos a destacar algunas áreas clave:
El Gráfico en Cascada
Podríamos escribir un libro sobre todo el contenido de un gráfico en cascada, por lo que para esta guía para principiantes me permitiré destacar únicamente algunos puntos clave:
- Primer Byte - Se utiliza para medir la latencia de la red y el tiempo que tarda el servidor para responder a la primera parte del contenido. Se recomienda un valor de 0,4 segundos o menos.
- Start Render - Este es el tiempo que toma para que un usuario empiecer a ver algo que no sea una página en blanco. Aunque interesante, este número no es el mejor indicador de la experiencia del usuario, ya que los usuarios siguen esperando la carga de la página todavía. Sin embargo, nadie quiere ver una página en blanco durante un período largo de tiempo, por lo que un valor alto aquí debe ser evitado.
- Document Complete - Este es el tiempo que tarda el navegador para activar el evento "onLoad". A riesgo de simplificar demasiado, se debe pensar en esto como el tiempo que tarda en cargar la página "central" en sí, pero no necesariamente todo el javascript que puede ejecutar después de cargar la página. Esta estadística es cada vez menos relevante a medida que más y más sitios adoptan una estrategia de "carga lenta" para obtener recursos, como imágenes, es decir, las imágenes se cargan en segundo plano mientras ya se está interactuando con la página. Sin embargo, lo ideal es que el documento de tiempo completo sea menor de 2 segundos.
- Fully Loaded - Esta es la cantidad de tiempo que se toma para que todo cargue y sea mostrado al usuario. Esta estadística puede ser un poco draconiana ya que el usuario puede tener una experiencia agradable y significativa con tu sitio, mientras que los recursos siguen cargando "por detrás" (no visible hasta que se desplaza por la página). Aún así, esto es útil para la detección de los peores escenarios posibles, especialmente si se tiene un widget de publicidad con un mal comportamiento de carga.
- Speed Index - El índice de velocidad es un concepto relativamente nuevo, introducido para ayudar a superar los retos con los indicadores anteriores, sobre todo para los sitios web de hoy en día que se emplea mucho javascript para cargar el contenido en el fondo. Esencialmente el índice de velocidad utiliza un algoritmo para calcular lo que subjetivamente interpretamos como "cómo se muestran de rápido las cosas" en la página. No he jugado suficiente con ésta métrica aún para dar una buena guía, pero en general cuanto menor sea el número, mejor.
- Lo ideal sería que desees que la caída sea tan "fina" como fuera posible (tiempo de carga total corto) y tan "corto" como sea posible (pequeño número de elementos para cargar). Por supuesto, esto está en contradicción con la entrega de un diseño atractivo, por lo que se necesita un equilibrio.
- En general, se desea que los saltos sean "fuertes", lo que significa que descienden rápido verticalmente. Esto indica un alto nivel de carga paralela que sucede en el navegaro. Los navegadores modernos como Chrome pueden descargar hasta 8 recursos a la vez en algunos casos. Por ejemplo:
- Cuidado con las largas líneas horizontales de carga de otro contenido. Estos son buenos indicadores de los cuellos de botella de rendimiento y las áreas con el valor a analizar más profundamente. Por ejemplo, esta carga de la página inicial tiene retrasos tanto en la búsqueda de DNS como en la presentación incial del servidor.
Para finalizar
Los diagramas en cascada son una excelente herramienta para diagnósticar los cuellos de botella, pero pueden ser sensibles a la congestión en el Internet y la ubicación física de los usuarios en relación a los servidores. Sin embargo, todos los ingenieros web deberían incluir un análisis de la cascada en su bolsa de herramientas estándar.
Espero que con esta guia para principiantes de webpagetest puedas mejorar el rendimiento de tu web o la de tus clientes.
Deja en los comentarios cuáles son tus resultados del test.
- Por supuesto, el sentido común prevalece, evitar la tentación de sobrecargar el sitio con demasiados códigos de análisis, rastreadores y widgets de publicidad. Se puede detectar fácilmente las URL que provienen de dominios completamente ajenos al dominio de la página. Las dependencias de terceros son una de las mayores causas del rendimiento lento en la carga de la página.