No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Análisis de Network en GitHub para Optimizar Cargas de Proyecto

16/22
Recursos

¿Qué es Next en GitHub y cuándo debería utilizarlo?

En el mundo del desarrollo web, tener control y visibilidad sobre lo que ocurre en tu proyecto web es esencial. GitHub proporciona herramientas para facilitar este control, y una de ellas es Next, particularmente útil para verificar cómo se está cargando o descargando un proyecto. Es ideal cuando necesitas analizar y corregir problemas de carga de página, al entender qué elementos están siendo solicitados, descargados y cómo se están utilizando.

¿Cómo funciona la pestaña Network para el análisis de cargas?

¿Qué información proporciona?

La sección Network del navegador es crucial para los desarrolladores web que necesitan entender la interacción entre su aplicación y el servidor. Facilita el análisis de cómo las dependencias se descargan, cuánto pesan y el tiempo de carga, ofreciendo información esencial para la optimización del rendimiento web.

  • Nombres de archivos solicitados: Aquí podrás ver una lista con los nombres de los archivos que son pedidos por el navegador, como páginas HTML, hojas de estilos CSS, scripts en JS, e imágenes PNG.

  • Estado de la petición: El estado es importante para verificar si una petición HTTP ha sido exitosa, indicada por un código de status. Por ejemplo, un código 200 significa que el archivo se ha pedido y recibido correctamente.

  • Tipo de documento: Te permite identificar si el archivo es una página HTML, estilo CSS, JavaScript u otro tipo de documento.

¿Cómo interpretar los datos de descarga?

La información proporcionada por la pestaña Network es variada y altamente técnica, pero cada elemento puede decirte mucho sobre dónde podrían estar los problemas de carga:

  • Tamaño y tiempo de carga: Cada archivo se muestra con datos de tamaño y tiempo que tomó descargarse. Esto es esencial para identificar si algún archivo es demasiado grande o toma un tiempo considerable en cargarse.

  • Diferencia entre tamaño original y optimizado: Network muestra por defecto dos tamaños para cada archivo: sin optimizar y optimizado. Comparar estos tamaños te ayuda a identificar si realmente se está aplicando una minimización efectiva.

¿Cómo detectar cuellos de botella?

El análisis adecuado de esta información puede ayudar a identificar cuellos de botella en las cargas de página:

  • Recursos que tardan más en descargarse: Puedes centrarte en archivos que tarden demasiado en descargarse para averiguar el motivo, ya sea por tamaño o por falta de optimización.

  • Minimización incorrecta: Asegúrate de que tus archivos estén realmente minificados; una falta de diferencia entre los tamaños original y optimizado podría indicar una falla en este proceso.

¿Qué pasos adicionales se pueden seguir para optimizar el rendimiento?

Para optimizar el rendimiento de un proyecto utilizando la información de Network:

  1. Revisar CDN y servidores: Asegúrate de que los archivos pesados se sirvan a través de una Content Delivery Network (CDN) para mejorar el tiempo de respuesta.

  2. Validar caché: Utiliza estrategias de cacheo para reducir la carga en el servidor y acelerar las respuestas del navegador.

  3. Optimizar imágenes y otros archivos medios: Considera técnicas de compresión para reducir el peso de los archivos multimedia.

Utilizando estas estrategias y herramientas, estarás más cerca de asegurar que tu sitio web no solo se vea bien, sino que también se cargue de manera eficiente y sin problemas. Si te comprometes a mejorar continuamente, lograrás un rendimiento óptimo que beneficiará a todos tus usuarios. ¡Sigue explorando y optimizando!

Aportes 33

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Secciones de Network:

  1. Name: Nombre del archivo
  2. Status: Estatus del http. En este caso 200 significa OK (Todo bien)
  3. Type: Tipo de archivo. Por ejemplo: document (html), stylesheet(css), js, png, etc…
  4. Inialitator: Cuál archivo solicitó a otro archivo. En este caso, el documento html solicitó a todos los demás archivos.
  5. Size: Tamaño del archivo. Se muestra el tamaño no optimizado y optimizado por el navegador.
  6. Time: Tiempo total que tarda en descargarse el archivo.
  7. Waterfall: Tiempo (sección por sección) que le tomó al archivo descargarse.

El panel de network, nos permite evaluar si los archivos fueron descargados o no una vez que se carga una página web, estos pueden ser: HTML, imágenes, CSS, JS, entre otros. Cada uno demora cierto tiempo dependiendo de su peso y la velocidad de conexion de internet.

Secciones de Network:

  • Name: Nombre del archivo.
  • Status: Estatus del http. En este caso 200 significa OK (Todo bien).
  • Type: Tipo de archivo. Por ejemplo: document (html), stylesheet(css), js, png, etc…
  • Inialitator: Cuál archivo solicitó a otro archivo. En este caso, el documento html solicitó a todos los demás archivos.
  • Size: Tamaño del archivo. Se muestra el tamaño no optimizado y optimizado por el navegador.
  • Time: Tiempo total que tarda en descargarse el archivo.
  • Waterfall: Tiempo (sección por sección) que le tomó al archivo descargarse.

NOTA: Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP específica. Las respuestas se agrupan en cinco clases:

  • Respuestas informativas (100–199),
  • Respuestas satisfactorias (200–299),
  • Redirecciones (300–399),
  • Errores de los clientes (400–499),
  • y errores de los servidores (500–599).

Referencias:

De verdad que me sorprende todo lo que tiene las Dev Tools y aunque estoy empezando en el desarrollo web… Me estoy llevando demasiado conocimiento que aplicare para tener mejores practicas y simplemente me encanta aprender algo nuevo en cada clase.
Excelente curso, muchas gracias!

En lo personal pienso que es apartado de network es uno de los más importantes, sobretodo porque, además del waterfall, te permite ir viendo cuáles son esas tareas asíncronas que las páginas igual suelen lanzar así que puedes ir viendo algunas cargas de assets en paralelo:D

Creo que la pagina esta caida o cambio su url 😦

A la fecha de hoy se cargan mas archivos que los que se muestra en el curso, uno de ellos esta roto 96.png

Muy util esta funcionalidad de DevTools, es necesario saber que recursos tienen nuestra pagina y cuales esta afectando la velocidad de carga de la página.

<h3>16. ¿Cuándo utilizar Network en DevTools?</h3>

1:36 Iniciando Network. Para que funcione debemos refrescar la página ya que solo captura la data cuando el network está abierto.

2:34 Descripción:
Name: nombre de los archivos
Status: respuesta del servidor
Type: tipo de archivo
Initiator: archivo que generó se petición y descarga
Size: tamño del archivo (minificado y sin minificar)
Time: tiempo de descarga
Waterfall: cascada de tiempo en forma de gráfico de barras.

Enlaces de la clase:
Inspect Network Activity Demo
Enlaces complementarios:
Tutorial ¿Qué es Minificar archivos?
Inspect Network Activity In Chrome DevTools

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

De forma general, el panel Network se usa cuando requieres asegurarte que los recursos de tu proyecto se descargan o cargan adecuadamente. Para abrirlo, desde DevTools presiona Control + Shift + I o Comando + Opción + I (Mac).

A seguir aprendiendo.

Si publicas el link de enlace de la clase te lo borra pues lo considera un link no seguro.

Resumen de la clase: ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-06-18%20a%20la%28s%29%2013.23.17-2571f3f9-53ff-490a-94f8-bebf8c4d06b2.jpg)
Me encantaría que actualizaran el curso.
No me carga el recurso de la clase. pero encontré este de Edge, espero les sirva xd ![](https://static.platzi.com/media/user_upload/imagen-5d30209c-e897-460c-aae4-75fc0bed7f3c.jpg) <https://microsoftedge.github.io/Demos/network-tutorial/>

Actualmente, la mayor parte de los archivos dan estado: 304 y uno que es el png en 404.

Es interesante aprender de la cantidad de componentes que tiene la pagina web en network. Tambien es increible que te muestra el resultado de como llega la pagina web ya sea en buenos o malos terminos.

La url del demo da error

Excelente explicación de Network!

Yo solo he usado esta opción para comprobar el lazy loading o saber si en realidad estoy haciendo un fetch a una API.

http://devtools.glitch.me/network/getstarted.html

A seguir!

http : / / devtools. glitch. me/ network/ getstarted. html
Enlace con espacios para que puedan entrar a é.

No entiendo porque a mí me aparece un solo request con el JSON nada más y con un peso de 276B

excelente clase!

gracias.

No sabía cómo utilizarla cuando comencé el curso profesional de javascript. Es un interesante curso.

Para la parte de status, les dejo la documentacion de los status http
https://developer.mozilla.org/es/docs/Web/HTTP/Status

Aquí algunos códigos de status muy resumidos:

Respuestas informativas (100–199),
Respuestas satisfactorias (200–299),
Redirecciones (300–399),
Errores de los clientes (400–499),
y errores de los servidores (500–599).

Si quieres saber mas visita: https://developer.mozilla.org/es/docs/Web/HTTP/Status

afecta si hago esto en Opera mini, en vez de hacerlo en Chrome¿?

💚

👌