Analiza latencia, estado HTTP, payloads y caché para localizar cuellos de botella y errores de integración.
El panel Network te enseña qué está pasando de verdad entre frontend y servidor: tiempos, cabeceras, body y caché.
Si una pantalla tarda, aquí puedes separar si el problema es backend, payload grande, bloqueo de recursos o caché mal configurada.
Conecta esta lección con <a href="/curso/hosting-dominios">Hosting y Dominios</a> para entender mejor DNS, TLS y tiempo de respuesta real.
Aprende a leer la línea de tiempo como diagnóstico.
El waterfall muestra orden y duración de cada recurso. Si CSS crítico o JS inicial cargan tarde, la percepción de rendimiento cae.
Filtra por tipo (Fetch/XHR, JS, CSS, Img) para aislar rápidamente el origen del problema.
No basta con que devuelva 200.
Mira status code, método, tamaño y cabeceras de caché. Un 304 bien aprovechado puede ahorrar mucho tiempo de carga.
Cuando una API falla, inspecciona request payload y response body para entender contrato real.
Analiza latencia, estado HTTP, payloads y caché para localizar cuellos de botella y errores de integración.
Código del tema: DevTools > Network > XHR/Fetch
Aprende a leer la línea de tiempo como diagnóstico.
El waterfall muestra orden y duración de cada recurso. Si CSS crítico o JS inicial cargan tarde, la percepción de rendimiento cae.
Filtra por tipo (Fetch/XHR, JS, CSS, Img) para aislar rápidamente el origen del problema.
No basta con que devuelva 200.
Mira status code, método, tamaño y cabeceras de caché. Un 304 bien aprovechado puede ahorrar mucho tiempo de carga.
Cuando una API falla, inspecciona request payload y response body para entender contrato real.
fetch('/api/profile')
.then(r => r.json())
.then(console.log)
.catch(console.error);