Network Waterfall

Llegados a este punto, es importante mencionar que la implementación actual es suficiente para cualquier tienda o servicio, donde la cantidad de productos es limitada. Cargar 100 o 200 productos de esta manera no supone ningún problema, sin embargo, si de pronto se trata de una tienda con miles y miles de productos, lo que estamos haciendo no sería lo más adecuado, porque estamos cargando la información de los productos directamente sobre nuestro JavaScript. Y cuando una persona ingresa a nuestra página, se está descargando el JavaScript completo. O sea, que si tenemos miles de productos, la página podría cargar de manera mucho más lenta. Voy a presionar aquí F12 de hecho, para hacer una pequeña demostración. En la pestaña “Network” tenemos una opción llamada “Throttling”. Esto nos permite limitar la velocidad de Internet con que funciona una página. Por defecto, el valor asignado es “no throttling”, o sea, sin límites. Nosotros vamos a hacer clic en el “Slow 3G” para hacer una prueba con una conexión de Internet lenta, y vamos a dar clic a esta opción que dice “Disable cache” para asegurarnos que se descarguen todos los archivos como si se tratase de la primera vez que accedemos a la página. Es importante marcar esta opción porque en caso contrario los archivos ya estarán descargados y la página cargará rápido, ignorando la velocidad de internet. Entonces teniendo estas opciones configuradas, vamos a visitar nuevamente nuestro sitio. Cuando nuestra página empieza a cargar, se muestra una pantalla en negro. Luego comienza a mostrarse los datos, luego las imágenes. Como vemos, los iconos todavía no aparecen. Finalmente aparecen los iconos, y terminan también de cargar las imágenes. Nosotros aquí en el lado derecho, podemos ver el progreso conforme avance el tiempo de cómo se van descargando los recursos. Como vemos, lo que está tardando más tiempo en descargarse es esta imagen llamada “monitor.jpg”. Finalmente se terminarán de descargar todos los recursos y apareció de este lado la imagen del monitor. Si nosotros abrimos esta imagen en otra pestaña, vemos que es una imagen con bastante resolución, al menos comparado con el resto de imágenes que son más pequeñas. Eso explica porque este “asset” tardó mucho más en ser descargado. Si nosotros revisamos con mayor detalle, podemos ver también el peso asociado a cada recurso. La imagen del monitor por ejemplo, ocupa 3.4 MB y tardó en descargarse 1.3 minutos. Podemos ordenar en base al tamaño del archivo y vemos que de hecho es lo que más espacio ocupa. Luego le sigue la fuente de “materialdesignicons”. Luego nuestro archivo JavaScript. Luego la hoja de estilos. Y luego tenemos ya el resto de imágenes. Y nuestro componente “HomwView” es uno de los más livianos, ya que sólo pesa 2.2 KB. Lo más ligero es nuestro HTML, gracias a que nuestro HTML ocupa poco espacio, es que nosotros pudimos ver nuestra página de color negro al inicio. En una conexión lenta. De todas maneras, el HTML tardó dos segundos en descargarse. Siempre puedes realizar este ejercicio para ver cuáles son los recursos más pesados de tu sitio y agilizar la carga de tu página. Vamos a quitar el orden que aplicamos por size y vamos a ordenar por waterfall. Vamos a ordenar por esa última opción que es la que se encarga de mostrar el orden de descarga. Como siempre, el primer archivo descargado es el HTML y luego, de manera sucesiva, tenemos el JavaScript y CSS principales, luego el componente HomeView, y luego otros recursos que se descargan a partir de los anteriores como la fuente y las imágenes. En nuestro archivo de HomeView es el que contiene la información de los productos. Como son pocos, no hay problema. Pero como comentábamos antes, si de pronto tenemos miles y miles de productos, este archivo no pesaría 2.2 KB, sino que podría pesar MB. Al igual que la imagen de monitor o incluso mucho más dependiendo del volumen de datos que gestione nuestra aplicación. Por eso es que generalmente no se recomienda tener la data como parte de nuestra aplicación cliente, sino que se recomienda tener la fuente de datos de manera separada de nuestro proyecto frontend.

¡Suscríbete y continúa aprendiendo!

Network Waterfall