Core/Dash Compreender os Dashboards de Decomposição de Métricas

Compreender o Dashboard de Decomposição de Métricas

Métricas compostas como LCP e INP agregam múltiplos eventos de tempo distintos. Otimizar a pontuação total requer o isolamento destes componentes subjacentes. O dashboard de Decomposição de Métricas disseca a performance em fases granulares para identificar o gargalo específico.

Esta ferramenta substitui a otimização genérica por objetivos de engenharia precisos. Atribui a latência ao servidor, à rede ou à execução do cliente.

Anatomia do Dashboard de Decomposição

O dashboard fornece três vistas sincronizadas para isolar a causa raiz da latência:

• Donut de Contribuição: Visualiza o peso relativo de cada subparte. Responde à pergunta "Qual é o maior fator?" Se o `Time to First Byte` ocupar 70% do gráfico, sabe que o problema está relacionado com o backend.
• Linha do Tempo Histórica: Mostra a tendência dos valores absolutos de cada componente ao longo do tempo. Utilize isto para correlacionar mudanças de performance com eventos específicos, como deployments.
• Tabela de Dados Segmentada: Decompõe a métrica por dimensão (URL, Dispositivo, etc.). Cada linha inclui uma barra de distribuição que revela o perfil único desse segmento, ajudando a detetar outliers.

Componentes do LCP (Largest Contentful Paint)

O LCP mede a performance de carregamento. Dividimos esta métrica em quatro fases:

• TTFB (Time to First Byte): O tempo de resposta do servidor. Um TTFB elevado indica consultas lentas à base de dados ou falta de edge caching.
• Atraso de Carregamento: O intervalo entre a resposta HTML inicial e o início do download do recurso LCP. Isto mede a latência de descoberta de recursos.
• Tempo de Carregamento: A duração necessária para descarregar o ativo LCP (imagem ou tipo de letra) através da rede. Isto correlaciona-se com o tamanho do ficheiro e a largura de banda.
• Atraso de Renderização: O tempo entre o fim do download do recurso e a pintura no ecrã. Um Atraso de Renderização elevado indica frequentemente bloqueio da main thread por JavaScript.

Componentes do TTFB (Time to First Byte)

O TTFB serve como proxy para a capacidade de resposta do servidor. Esta decomposição isola as fases de conexão de rede:

• Espera: O tempo que o browser passa à espera que o servidor gere uma resposta (processamento de Backend).
• Cache: Tempo gasto a verificar caches locais ou intermédias.
• DNS: A duração da pesquisa do Domain Name System.
• Conexão: Tempo demorado para estabelecer a conexão TCP.
• Pedido: Tempo demorado para enviar os cabeçalhos do pedido HTTP.

Componentes do INP (Interaction to Next Paint)

O INP mede a interatividade. Segmentamos o ciclo de vida da interação para identificar o bloqueio da main thread:

• Atraso de Entrada: O tempo entre a interação do utilizador e a execução do event handler. Um Atraso de Entrada elevado significa que a main thread estava ocupada.
• Processamento: O tempo demorado para executar os callbacks do evento. Isto representa a eficiência da sua lógica JavaScript.
• Apresentação: O tempo demorado para o browser calcular o layout e pintar o próximo frame.

Fluxo de Trabalho de Diagnóstico

Siga esta sequência para diagnosticar uma regressão:

• Quantificar o Gargalo: Observe o gráfico Donut para encontrar a subparte dominante. Se o `TTFB` for elevado, verifique o seu servidor. Se o `Atraso de Carregamento de Recursos` for elevado, verifique a prioridade dos seus ativos.
• Estabelecer Causalidade: Verifique a Linha do Tempo para correlacionar o pico com um deployment específico ou atualização de conteúdo.
• Isolar o Contexto: Utilize a Tabela de Dados para ver se este padrão se mantém em todas as páginas ou se é específico de um determinado template. Encontrar o padrão é fundamental para implementar uma correção escalável.

Otimizar as Core Web Vitals

Utilize estas decomposições para encaminhar tickets para a equipa de engenharia correta. Atribua problemas de TTFB ao Backend. Atribua o Atraso de Carregamento e o Atraso de Renderização ao Frontend. Atribua a latência de DNS/Conexão à Infraestrutura. Este processo de triagem simplificado reduz o tempo de investigação e acelera a resolução.