Configuración del panel Network de Chrome DevTools para los Core Web Vitals
Los ajustes del panel Network que utilizo en cada auditoría de Core Web Vitals
El panel Network de Chrome DevTools es una de las herramientas más útiles para depurar los Core Web Vitals. Pero la configuración predeterminada oculta la mitad de la información que necesitas. Así es como configuro el panel Network en cada auditoría.
Última revisión por Arjen Karel en marzo de 2026
Table of Contents!
Configuración del panel Network
Para acceder al panel Network, abre Chrome DevTools (F12 o Ctrl+Shift+I) y haz clic en la pestaña "Network".
Throttling
Tus visitantes no están conectados al Wi-Fi de tu oficina. A nivel mundial, el 30% de las conexiones móviles siguen siendo 3G y otro 55% son 4G (GSMA Mobile Economy 2025). El throttling de red te permite ver lo que ellos ven.
Haz clic en el menú desplegable "No throttling" en el panel Network. Selecciona "Fast 4G", "Slow 4G" o "3G" para simular las condiciones de una red móvil. La mejor opción depende de tu audiencia. Si tu público suele utilizar dispositivos móviles de gama alta en condiciones de red rápidas, activa "Fast 4G". Si las condiciones de red habituales son algo peores, selecciona "Slow 4G". En caso contrario, ve a lo seguro y selecciona "3G".
Throttling en peticiones individuales (Chrome 145+)
Desde diciembre de 2025, puedes aplicar throttling a una sola petición en lugar de a toda la página. Haz clic derecho en cualquier petición en el panel Network y selecciona "Throttle request". Esto te permite responder a preguntas como: ¿qué le pasa a mi LCP si este script de terceros carga lento? O: ¿cómo se comporta mi página cuando la CDN es lenta pero la conexión del usuario es rápida? Es la forma más rápida de aislar el impacto en el rendimiento de un solo recurso.
Disable Cache
Para asegurarte de que estás probando tu sitio web tal y como lo experimentaría un visitante por primera vez, marca la casilla "Disable cache" en el panel Network.
Habilitar Big Request Rows
Las "big request rows" (filas de petición grandes) muestran detalles críticos que la vista compacta predeterminada oculta:
- La columna size muestra tanto el tamaño comprimido (transferencia) como el tamaño sin comprimir (real) de cada petición.
- La columna name muestra la ruta completa, no solo el nombre del archivo.
- La columna priority muestra la fetch priority inicial y final. Así es como verificas que tu imagen LCP carga con prioridad High o detectas cuándo Chrome reprioriza un recurso.
Habilitar capturas de pantalla
Habilita las capturas de pantalla y Chrome capturará un filmstrip de cada cambio visual durante la carga de la página. Así es como detectas los layout shifts y verificas que tu elemento LCP se renderiza cuando esperas que lo haga.
- Con la pestaña Network enfocada, presiona Ctrl+F5 (Cmd+R en Mac) para actualizar la página.
- Chrome tomará capturas de pantalla durante el proceso de carga de la página.
- Las miniaturas de estas capturas de pantalla aparecerán debajo de la fila de casillas de verificación en el panel Network.
La vista general de capturas de pantalla tiene algunas funciones útiles que quizás aún no conozcas:
- Pasa el ratón sobre una captura de pantalla para ver cuándo se tomó. Esto se indicará con una línea vertical amarilla en el gráfico Overview.
- Haz clic en la miniatura de una captura de pantalla para filtrar las peticiones que ocurrieron después de que se tomara esa captura.
- Haz doble clic en una miniatura para hacer zoom y ver la captura de pantalla con más detalle.
Habilitar las mejores columnas en Network
A las columnas predeterminadas les faltan datos críticos. Haz clic derecho en cualquier encabezado de columna para añadir más. Estas son las que habilito en cada auditoría:
| Nombre de la columna | Descripción | Por qué es importante para los Core Web Vitals |
|---|---|---|
| Name | Nombre de la petición | Identifica cada recurso que descarga el navegador |
| Status | Códigos de estado HTTP | Detecta redirecciones (301, 302) que añaden latencia a tu TTFB, y errores 404 de recursos que desperdician un viaje de ida y vuelta en la red |
| Protocol | Protocolo de red utilizado | HTTP/3 elimina el head-of-line blocking. Según Cloudflare Radar, solo el 21% de las peticiones utilizan HTTP/3. Si tu CDN lo soporta y no ves h3 en esta columna, comprueba tu configuración DNS |
| Domain | Dominio del recurso | Separa las peticiones propias (first-party) de las de terceros (third-party). El Web Almanac 2024 descubrió que el 92% de las páginas cargan al menos un recurso de terceros. Ordenar por dominio revela qué parte de tu waterfall está fuera de tu control |
| Type | Tipo de recurso | Filtra por tipo para aislar scripts, imágenes o fuentes que compiten por el ancho de banda |
| Initiator | Desencadenador de la petición | Descubre qué script o hoja de estilos desencadenó cada petición. Así es como puedes rastrear una cadena lenta de peticiones críticas hasta su origen |
| Size | Tamaño real y de transferencia | Detecta recursos sin comprimir o demasiado grandes. La página móvil mediana carga 66 peticiones que suman 2.3 MB (Web Almanac 2024) |
| Priority | Prioridad de carga del recurso | Muestra la fetch priority inicial y final. Verifica que tu imagen LCP cargue en High y los scripts no críticos carguen en Low |
| Waterfall | Línea de tiempo visual de las peticiones | La línea de tiempo que muestra en qué se gasta el tiempo. Las barras largas antes del primer renderizado afectan directamente a tu LCP y FCP |
Habilitar encabezados de respuesta personalizados
| Nombre de la columna | Descripción | Por qué es importante para los Core Web Vitals |
|---|---|---|
| Cache-Control | Comportamiento de la caché del recurso | Verifica que los activos estáticos tengan tiempos de vida de caché largos y que el HTML tenga una revalidación adecuada. Una caché deficiente obliga a los visitantes recurrentes a volver a descargar los recursos, perjudicando a cada métrica. Consulta también: Configuración de caché de Cloudflare |
| Link | Encabezado de respuesta Link | Comprueba si tu servidor envía sugerencias (hints) de preload o preconnect, incluso a través de 103 Early Hints |
| Content-Encoding | La codificación utilizada | Verifica que tu servidor envía Brotli (br) en lugar de gzip. Brotli comprime el JavaScript haciéndolo entre un 15 y un 20% más pequeño que gzip. El Web Almanac 2024 muestra que Brotli ha superado a gzip en recursos JavaScript (45% frente a 41%) |
Si quieres analizar encabezados de respuesta de forma masiva sin abrir DevTools en cada página, prueba el HTTP Header Performance Analyzer.
Conectar con el panel Performance
El panel Network te muestra qué se carga y cuándo. Para ver cómo cada recurso afecta a los Core Web Vitals, cambia al panel Performance. Ahora muestra las puntuaciones de LCP, CLS e INP en vivo sin necesidad de grabar y puede superponer datos de campo de CrUX de usuarios reales. Usa el panel Network para diagnosticar, y el panel Performance para confirmar.
Para una monitorización continua más allá de una sola sesión de depuración, conecta una herramienta de Real User Monitoring (RUM) para que puedas realizar un seguimiento de si tus correcciones del panel Network realmente mejoran los datos de campo con el tiempo.
La configuración completa
Vuelve a cargar la página con estos ajustes y tu panel Network se verá así. Cada columna está asignada a algo que afecta a los Core Web Vitals.
Your Lighthouse score is not the full picture.
Your real users are on Android phones over 4G. I analyze what they actually experience.
Analyze field data
