Core/Dash Entendiendo los Dashboards de Desglose de Métricas

Entendiendo el Dashboard de Desglose de Métricas

Las métricas compuestas como LCP e INP agregan múltiples eventos de tiempo distintos. Optimizar la puntuación total requiere aislar estos componentes subyacentes. El Dashboard de Desglose de Métricas disecciona el rendimiento en fases granulares para identificar el cuello de botella específico.

Esta herramienta reemplaza la optimización general con objetivos de ingeniería precisos. Atribuye la latencia al servidor, la red o la ejecución del cliente.

Anatomía del Dashboard de Desglose

El dashboard proporciona tres vistas sincronizadas para aislar la causa raíz de la latencia:

• Gráfico de Donut de Contribución: Visualiza el peso relativo de cada subparte. Responde a la pregunta "¿Cuál es el factor más grande?". Si el `Time to First Byte` ocupa el 70% del gráfico, sabes que el problema está relacionado con el backend.
• Línea de Tiempo Histórica: Muestra la tendencia de los valores absolutos de cada componente a lo largo del tiempo. Usa esto para correlacionar cambios de rendimiento con eventos específicos como despliegues.
• Tabla de Datos Segmentados: Desglosa la métrica por dimensión (URL, Dispositivo, etc.). Cada fila incluye una barra de distribución que revela el perfil único de ese segmento, ayudándote a detectar valores atípicos.

Componentes de LCP (Largest Contentful Paint)

LCP mide el rendimiento de carga. Dividimos esta métrica en cuatro fases:

• TTFB (Time to First Byte): El tiempo de respuesta del servidor. Un TTFB alto indica consultas de base de datos lentas o falta de edge caching.
• Retardo de Carga (Load Delay): La brecha entre la respuesta HTML inicial y el inicio de la descarga del recurso LCP. Esto mide la latencia de descubrimiento de recursos.
• Tiempo de Carga (Load Time): La duración requerida para descargar el activo LCP (imagen o fuente) a través de la red. Esto se correlaciona con el tamaño del archivo y el ancho de banda.
• Retardo de Renderizado (Render Delay): El tiempo entre la finalización de la descarga del recurso y el pintado en la pantalla. Un alto Retardo de Renderizado a menudo indica bloqueo del hilo principal por JavaScript.

Componentes de TTFB (Time to First Byte)

TTFB sirve como un proxy para la capacidad de respuesta del servidor. Este desglose aísla las fases de conexión de red:

• Waiting (Espera): El tiempo que el navegador pasa esperando que el servidor genere una respuesta (procesamiento Backend).
• Cache: Tiempo dedicado a verificar cachés locales o intermedias.
• DNS: La duración de la búsqueda del Sistema de Nombres de Dominio.
• Connection (Conexión): Tiempo tomado para establecer la conexión TCP.
• Request (Solicitud): Tiempo tomado para enviar los encabezados de solicitud HTTP.

Componentes de INP (Interaction to Next Paint)

INP mide la interactividad. Segmentamos el ciclo de vida de la interacción para identificar el bloqueo del hilo principal:

• Input Delay (Retardo de Entrada): El tiempo entre la interacción del usuario y la ejecución del manejador de eventos. Un alto Input Delay significa que el hilo principal estaba ocupado.
• Processing (Procesamiento): El tiempo tomado para ejecutar los callbacks del evento. Esto representa la eficiencia de tu lógica JavaScript.
• Presentation (Presentación): El tiempo tomado por el navegador para calcular el diseño (layout) y pintar el siguiente frame.

Flujo de Trabajo de Diagnóstico

Sigue esta secuencia para diagnosticar una regresión:

• Cuantifica el Cuello de Botella: Mira el gráfico de Donut para encontrar la subparte dominante. Si el `TTFB` es alto, revisa tu servidor. Si el `Resource Load Delay` es alto, revisa la prioridad de tus activos.
• Establece Causalidad: Revisa la Línea de Tiempo para correlacionar el pico con un despliegue específico o actualización de contenido.
• Aísla el Contexto: Usa la Tabla de Datos para ver si este patrón se mantiene en todas las páginas o si es específico de una plantilla determinada. Encontrar el patrón es clave para desplegar una solución escalable.

Optimizando Core Web Vitals

Usa estos desgloses para dirigir los tickets al equipo de ingeniería correcto. Asigna problemas de TTFB al Backend. Asigna Retardo de Carga y Retardo de Renderizado al Frontend. Asigna latencia de DNS/Conexión a Infraestructura. Este proceso de triaje simplificado reduce el tiempo de investigación y acelera la resolución.