La configuración perfecta del panel de red de Chrome para optimizar las Core Web Vitals
Configure el panel de red de Chrome DevTools para máxima eficiencia
La configuración perfecta del panel de red de Chrome para optimizar las Core Web Vitals
El panel de red de Chrome DevTools es una herramienta imprescindible para desarrolladores web que buscan optimizar las Core Web Vitals. Desafortunadamente, la configuración predeterminada no es la mejor para optimizar la velocidad. Al configurar los ajustes correctos, puede simular con precisión condiciones del mundo real y obtener mejores conocimientos sobre el rendimiento de su sitio web. Esta guía le mostrará la configuración ideal del panel de red de Chrome DevTools para analizar y mejorar sus puntuaciones de Core Web Vitals.
Table of Contents!
Configuración del panel de red
Para acceder al panel de red, abra Chrome DevTools (F12 o Ctrl+Shift+I) y haga clic en la pestaña "Network".
Limitación de red
Una de las configuraciones más importantes para optimizar las Core Web Vitals es la limitación de red. Esto le permite simular varias condiciones de red que sus usuarios podrían experimentar.
Haga clic en el menú desplegable "No throttling" en el panel de red. Seleccione "Fast 4g", "Slow 4g" o "3G" para simular condiciones de red móvil. La mejor opción depende de su audiencia. Si su audiencia generalmente usa dispositivos móviles de alta gama bajo condiciones de red rápidas, active "Fast 4G". Si las condiciones de red típicas son algo peores, seleccione "Slow 4G" y de lo contrario juegue seguro y seleccione "3G"
Desactivar caché
Para asegurar que está probando su sitio como lo experimentaría un visitante por primera vez: Marque la casilla "Disable cache" en el panel de red.
Activar filas de solicitud grandes
Las filas de solicitud grandes proporcionan una vista más completa de cada solicitud. La información nueva más importante que le proporcionará es:
- La columna size ahora mostrará el tamaño sin comprimir y comprimido de la solicitud.
- Las columnas name darán información sobre la ruta.
- La columna priority le mostrará la prioridad de búsqueda inicial y final.
Activar capturas de pantalla
Cuando activa las capturas de pantalla, Chrome capturará capturas de pantalla durante las cargas de página. Cada captura de pantalla representa un cambio visual en la página y puede usarse para comprender las diferentes etapas de carga de la página e identificar cambios de diseño acumulativos.
- Con la pestaña de red enfocada, presione Ctrl+F5 (Cmd+R en Mac) para actualizar la página.
- Chrome capturará 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 de red.
La vista general de capturas de pantalla tiene algunas características útiles que quizás no conozca todavía:
- Pase el cursor sobre una captura de pantalla para ver cuándo se capturó. Esto se indicará con una línea vertical amarilla en el gráfico de vista general.
- Haga clic en una miniatura de captura de pantalla para filtrar las solicitudes que ocurrieron después de que se tomó esa captura de pantalla.
- Haga doble clic en una miniatura para acercar y ver la captura de pantalla con más detalle.
Activar las mejores columnas de red
Para encontrar problemas con las Core Web Vitals, los siguientes paneles le darán información útil. Simplemente haga clic derecho en cualquier nombre de columna y seleccione sus columnas preferidas
Luego active las siguientes columnas que tienen importancia para las Core Web Vitals:
| Nombre de columna | Descripción | Importancia para las Core Web Vitals |
|---|---|---|
| Name | Nombre de la solicitud | Identificar recursos |
| Status | Códigos de estado HTTP | Monitorear códigos no-200 (301 y 302 para encontrar redirecciones y 404 / 410 para recursos que no existen) |
| Protocol | Protocolo de red utilizado | Priorizar HTTP/3 para rendimiento |
| Domain | Dominio del recurso | Identificar recursos de terceros |
| Type | Tipo de recurso | Categorizar solicitudes |
| Initiator | Activador de solicitud | Comprender los orígenes de solicitud |
| Size | Tamaño de transferencia y real | Identificar solicitudes grandes |
| Priority | Prioridad de carga de recursos | Asegurar priorización correcta |
| Waterfall | Línea de tiempo visual de solicitudes | Analizar secuencia de carga |
Active estos encabezados de respuesta personalizados:
Active estos encabezados de respuesta personalizados:
| Nombre de columna | Descripción | Importancia para las Core Web Vitals |
|---|---|---|
| Cache-Control | Comportamiento de almacenamiento en caché de recursos | Identificar recursos |
| Link | Encabezado de respuesta de enlace | Verificar encabezados de precarga o prefetch |
| Content-Encoding | La codificación utilizada | Verificar compresión de recursos |
El resultado final:
Ahora es el momento de recargar la página y ver la respuesta de red nueva y mejorada en la pestaña de red de Chrome. Se verá algo así y muestra toda la información que necesita para comenzar a depurar las Core Web Vitals!
Stop debating in Jira.
Get a definitive answer on your performance issues. I deliver a granular breakdown of your critical rendering path.
- Definitive Answers
- Granular Breakdown
- Critical Path Analysis
