Dimensão Core/Dash: Estado de Carregamento (INP)

Dimensão: Estado de Carregamento INP (inpls)

A dimensão Estado de Carregamento (INP) registra o estado de prontidão do documento no exato momento em que uma interação do usuário foi capturada. Cada evento de INP no Chrome User Experience Report carrega uma tag de estado de carregamento: loading, dom-interactive, dom-content-loaded ou complete. O CoreDash apresenta essa tag como uma dimensão filtrável e agrupável para que você possa responder à pergunta que as pontuações brutas de INP não conseguem: quando no ciclo de vida da página ocorreu a pior interação?

Essa pergunta é a linha divisória entre duas correções de engenharia completamente diferentes. Um problema de INP que se concentra durante o loading exige uma estratégia de adiamento de JavaScript. Um problema de INP que se concentra durante o complete exige a redução do trabalho do manipulador de eventos, a diminuição da sobrecarga do framework ou a divisão de tarefas longas no seu código em tempo de execução. Agrupar por estado de carregamento oferece essa divisão sem qualquer instrumentação manual.

Nos dados do CoreDash em sites monitorados, a distribuição das interações de INP por estado de carregamento é aproximadamente: loading 15%, dom-interactive 20%, dom-content-loaded 25%, complete 40%. A maioria das interações acontece depois que a página está totalmente carregada, mas as piores pontuações de INP se concentram esmagadoramente nos estados iniciais.

Captura de Tela

Por que o Estado de Carregamento Importa para o INP

A métrica Interaction to Next Paint mede a latência total de uma interação do usuário: atraso de entrada, tempo de processamento do manipulador de eventos e atraso de apresentação para o próximo quadro pintado. Desses três componentes, o atraso de entrada é o mais diretamente controlado pelo que o navegador está fazendo no momento em que o usuário clica ou toca.

Durante o início do carregamento da página, a thread principal está em disputa máxima. O navegador está analisando o HTML, executando scripts síncronos, construindo o CSSOM, executando recursos que bloqueiam o analisador e acionando ciclos de renderização consecutivamente. Cada tarefa longa na thread principal é uma janela durante a qual uma interação do usuário entra na fila e espera. Essa espera é o atraso de entrada, e é o fator dominante de um INP ruim durante o carregamento da página.

As interações que chegam após o document.readyState atingir complete encontram uma thread principal mais silenciosa. O navegador terminou de carregar. Se o INP ainda for ruim nesse estágio, a causa não é a contenção de carregamento. É o JavaScript que sua página executa em resposta às ações do usuário: manipuladores de eventos sobrecarregados, ciclos de nova renderização do framework, layout thrashing acionado por scripts ou código de terceiros não otimizado executando de forma síncrona durante a interação.

O estado de carregamento é o filtro mais rápido e único para separar essas duas causas raízes.

Os Estados de Carregamento

loading

A página ainda não terminou de analisar o documento HTML. A thread principal está executando scripts síncronos, buscando recursos que bloqueiam o analisador e construindo o DOM inicial. Este é o ambiente mais hostil para a interação do usuário. O atraso de entrada atinge o seu máximo porque qualquer tarefa longa bloqueia diretamente o navegador de processar o clique ou toque. Os usuários que interagem durante essa janela são tipicamente os visitantes mais impacientes ou aqueles em conexões rápidas que alcançam o conteúdo visível antes que a página termine de carregar. As pontuações de INP deles são as piores que você coletará. Se uma parcela significativa dos seus eventos de INP ruins carrega o estado de loading, mova os scripts não críticos para defer ou async e elimine os recursos que bloqueiam o analisador acima da dobra.

dom-interactive

O document.readyState atinge interactive quando o HTML é totalmente analisado e o DOM é construído, mas os sub-recursos, como imagens, folhas de estilo e scripts adiados, ainda estão carregando. Os scripts adiados começam a ser executados neste ponto, o que significa que a thread principal ainda pode estar muito ocupada. A hidratação de frameworks frequentemente começa aqui. Esta é uma janela perigosa porque a página parece pronta para o usuário, mas a thread principal ainda está ocupada. O atraso de entrada permanece elevado. Se o INP ruim se concentra aqui, a correção é a mesma que para o loading: reduza o volume de trabalho síncrono que é executado imediatamente após a conclusão da análise do DOM.

dom-content-loaded

O evento DOMContentLoaded foi disparado. O DOM está completo e os scripts adiados foram executados. A maioria dos frameworks JavaScript concluiu sua passagem inicial de hidratação neste ponto. A carga de trabalho da thread principal diminui, e as interações começam a obter respostas mais rápidas. As pontuações de INP durante este estado são normalmente melhores do que as dos dois estados anteriores, mas ainda são elevadas em comparação com o complete. Se você observar uma concentração de interações ruins aqui, analise o que o seu framework ou os scripts da aplicação estão fazendo nos manipuladores do DOMContentLoaded e se o trabalho de hidratação pode ser dividido em blocos ou usar yielding para permitir o processamento de entrada entre as tarefas.

complete

O document.readyState atinge complete quando todos os recursos, incluindo imagens, fontes e iframes de terceiros, terminam de carregar. Este é o estado estável em que a página opera pelo resto da sessão. Um INP ruim neste estado é puramente um problema de tempo de execução. A página terminou de carregar. Se a thread principal ainda está bloqueando interações, a causa está na execução do seu JavaScript durante a interação: manipuladores de eventos realizando muito trabalho síncrono, atualizações do framework acionando recálculos de layout custosos ou scripts de terceiros executando tarefas longas continuamente. A correção não tem a ver com adiamento. Trata-se de reduzir o custo do que acontece quando o usuário realmente clica.

Fluxo de Trabalho de Depuração

Passo 1: Filtre por estado de carregamento no CoreDash. Abra a tabela de detalhamento do INP e agrupe por Estado de Carregamento. Identifique qual estado possui a maior parcela de interações ruins (acima de 200ms). Isso informa imediatamente se você está diante de um problema de carregamento ou de um problema em tempo de execução.

Passo 2: Faça referência cruzada com a URL e o dispositivo. Combine a dimensão Estado de Carregamento com a dimensão URL para descobrir quais páginas específicas geram interações ruins durante os estados iniciais de carregamento. Os dispositivos móveis são desproporcionalmente afetados durante o carregamento porque CPUs mais lentas prolongam todas as tarefas longas.

Passo 3: Faça a correspondência da correção com o estado. Para o loading e o dom-interactive, audite sua estratégia de carregamento de scripts usando o guia de otimização de INP. Mova os scripts para defer, elimine os recursos que bloqueiam a renderização e use scheduler.yield() para dividir as tarefas longas de inicialização. Para o complete, analise o perfil dos seus manipuladores de eventos no Chrome DevTools e reduza o trabalho síncrono que eles acionam por interação.

Regra de Ouro de Engenharia

Se mais de 30% de suas interações de INP ruins estiverem marcadas como loading ou dom-interactive, o seu problema de INP é um problema de carregamento de página e o adiamento de JavaScript produzirá a maior melhoria. Se mais de 60% das interações ruins estiverem marcadas como complete, o seu problema de INP é um problema em tempo de execução e você precisa otimizar o custo do manipulador de eventos, não a ordem de carregamento dos scripts. O Estado de Carregamento (INP) toma essa decisão em uma única visualização de tabela, sem exigir uma sessão de laboratório ou instrumentação personalizada.