Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Network Waterfall
Veamos cómo nuestra página carga los assets requeridos para su funcionamiento, y en qué orden. Así mismo, qué ocurre cuando la visitamos simulando una conexión a internet lenta.
Implementación actual y rendimiento
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 se trata de una tienda con miles y miles de productos, lo que estamos haciendo no sería lo más adecuado.
Estamos cargando la información de los productos directamente sobre nuestro JavaScript.
Cuando una persona ingresa a nuestra página, se está descargando el JavaScript completo.
Si tenemos miles de productos, la página podría cargar de manera mucho más lenta.
Uso de herramientas para analizar la carga
Voy a presionar aquí F12, 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.
Vamos a hacer clic en Slow 3G para hacer una prueba con una conexión de Internet lenta.
Vamos a dar clic en la opción Disable cache para asegurarnos que se descarguen todos los archivos como si fuese 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.
Resultado de la prueba de carga
Teniendo estas opciones configuradas, vamos a visitar nuevamente nuestro sitio.
Cuando la página empieza a cargar, se muestra una pantalla en negro.
Luego comienzan a mostrarse los datos, luego las imágenes.
Los iconos todavía no aparecen.
Finalmente aparecen los iconos y terminan también de cargar las imágenes.
En el lado derecho, podemos ver el progreso conforme avanza el tiempo de cómo se van descargando los recursos.
Lo que está tardando más en descargarse es la imagen llamada monitor.jpg.
Finalmente se terminan de descargar todos los recursos y apareció la imagen del monitor.
Análisis del recurso más pesado
Si 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 por qué este asset tardó mucho más en ser descargado.
Revisando con mayor detalle, podemos ver el peso asociado a cada recurso.
La imagen del monitor ocupa 3.4 MB y tardó en descargarse 1.3 minutos.
Podemos ordenar en base al tamaño del archivo y vemos que 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 el resto de imágenes.
Nuestro componente HomwView es uno de los más livianos, ya que sólo pesa 2.2 KB.
Importancia del tamaño del HTML
Lo más ligero es nuestro HTML.
Gracias a que nuestro HTML ocupa poco espacio, 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 podés realizar este ejercicio para ver cuáles son los recursos más pesados de tu sitio y agilizar la carga de tu página.
Orden de descarga y optimización
Vamos a quitar el orden por size y ordenar por waterfall.
Ordenamos por esa última opción que muestra el orden de descarga.
Como siempre, el primer archivo descargado es el HTML.
Luego, de manera sucesiva, tenemos el JavaScript y CSS principales.
Luego el componente HomeView.
Luego otros recursos que se descargan a partir de los anteriores, como la fuente y las imágenes.
Consideraciones sobre la carga de datos
Nuestro archivo HomeView contiene la información de los productos.
Como son pocos, no hay problema.
Pero si 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 del monitor, o incluso mucho más dependiendo del volumen de datos que gestione nuestra aplicación.
Por eso, no se recomienda tener la data como parte de nuestra aplicación cliente.
Se recomienda tener la fuente de datos separada del proyecto frontend.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript