Encontrar e Corrigir Problemas de Interaction to Next Paint (INP)

Encontrar e Corrigir Problemas de Interaction to Next Paint (INP)

Em nosso artigo anterior, falamos sobre o interaction to next paint. Se você gostaria de aprender sobre os conceitos básicos, este é um ótimo lugar para começar!

Neste artigo, vou me concentrar em identificar os diferentes problemas de Interaction To Next Paint e então explicar como corrigi-los!

DICA INP: na maioria das vezes, o INP será muito pior quando um usuário interage com a página durante o estágio de inicialização do carregamento da página. É por isso que, ao depurar o INP, faz sentido registrar todas as interações, bem como o estado de carregamento da página!

Passo 1: Verificar o INP no search console

"O primeiro passo para a recuperação é admitir que você tem um problema". Então, antes de fazer qualquer coisa para corrigir o Interaction to Next Paint, vamos nos certificar de que realmente temos um problema com o interaction to next paint.

Faça login no seu Google Search Console. No menu esquerdo, clique em Core Web Vitals e selecione Mobile ou Desktop (dica: na maioria das vezes, os problemas de INP estão em mobile, então comece com mobile)

Aqui você verá uma visão geral de todos os problemas relacionados ao Core Web Vitals que estão atualmente em seu site. Se um desses problemas estiver relacionado ao INP, confirmamos que há um problema!

Passo 2: Identificar Problemas de Interaction to Next Paint

O Google Search Console não fornece nenhuma informação além de grupos de URL para descobrir o que está causando os problemas com o Interaction to Next Paint. Então, na maioria das vezes, vejo desenvolvedores apenas entrando cegamente. Eles começam removendo JavaScript não utilizado (sempre uma ótima ideia) e dividindo o thread principal (também uma ótima ideia), mas isso raramente corrige completamente o INP.

É por isso que, ao melhorar o INP, precisaremos saber exatamente o que está acontecendo.

Quais elementos, quando interagidos, causam uma pontuação ruim de INP. Geralmente, uma pontuação ruim de INP não é causada por um único elemento, mas por uma combinação de problemas. Precisamos abordá-los um por um, começando pelos piores e trabalhando até lá.
Quando essas Interações acontecem? Elas acontecem durante a fase de inicialização do carregamento da página ou acontecem mesmo quando a página principal
Onde essas interações acontecem? Elas acontecem em todas as páginas ou acontecem apenas em algumas páginas selecionadas.
Como podemos replicar essas interações? Você pode ter descoberto que é difícil replicar problemas de INP. É por isso que precisamos nos preparar para o sucesso, imitando as características do dispositivo com uma pontuação ruim de INP.

Configurar rastreamento de RUM

Para responder a todas essas perguntas, precisamos começar a rastrear usuários reais e registrar quaisquer problemas que possam ocorrer com o Interaction to Next Paint. Existem várias maneiras de ativar o rastreamento de RUM. A primeira é aproveitando a biblioteca Web Vitals e enviando os resultados para seu próprio backend de análise. A vantagem deste método é que é barato e flexível. A desvantagem é que pode ser muito trabalho extra.

Uma boa alternativa para enviar seus dados de Core Web Vitals para seu próprio backend é usar uma das muitas ferramentas de RUM disponíveis. Desenvolvemos CoreDash exatamente para esses casos de uso. CoreDash é uma ferramenta de RUM de baixo custo, rápida e eficaz que simplesmente faz o trabalho! É claro que existem muitas soluções de RUM por aí e elas também farão o trabalho (a um preço mais alto)

Encontrar interações lentas por elemento que causam um INP alto

A primeira coisa que precisa ser feita é encontrar as interações 'mais lentas' que causam as piores pontuações de time to first byte. Basta listar suas páginas por 'Métrica INP por Elementos' em CoreDash e você obterá suas interações mais lentas. Clique na primeira linha para filtrar suas métricas por essas interações.

Descobrir quando ocorrem interações ruins de INP

Em seguida, classifique os URLs filtrados por estado de carregamento. Isso lhe dará mais informações sobre a causa raiz do INP. Neste caso, o INP alto ocorre quando o conteúdo do DOM foi carregado. Isso significa que os scripts foram analisados, mas os scripts assíncronos e os sub-recursos da página ainda não foram carregados. Neste caso, o INP é causado por cliques iniciais quando o carregamento da página não foi completamente concluído!

Continue clicando no estado de carregamento com o maior impacto para criar outro filtro!

Encontrar URLs responsáveis por pontuações altas de INP

Finalmente, quando filtramos os elementos com a interação mais lenta e o estado de carregamento correto, vamos dar uma olhada nos URLs onde o INP está no pior. Neste caso, isso claramente acontece em um conjunto específico de páginas.

Encontrar características do dispositivo

Finalmente, quando identificamos interações lentas, estado de carregamento e URLs que causam um Interaction to Next Paint alto, vamos dar uma olhada nos tipos de visitantes que causam as piores pontuações de INP. Olharíamos para Memória do Dispositivo, Largura de Banda, Tamanho da Tela, etc. Uma vez identificadas essas características, podemos prosseguir para replicar e registrar o problema!

Passo 3: replicar e depurar interações que causam uma pontuação alta de INP

Depois de ter todas as informações de que precisamos, podemos começar a investigar profundamente os problemas subjacentes do Interaction to Next Paint.

Prepare-se para o sucesso: replique as circunstâncias de falha do INP

A próxima coisa que devemos fazer é tentar recriar o INP com falha. Fazemos isso imitando as circunstâncias onde o INP pode estar falhando.

Use o Painel de Performance do Chrome: abra as ferramentas de desenvolvedor do Chrome (Ctrl-Shift-i) e selecione o painel de performance. Na barra superior, você pode selecionar o CPU Throttle (reduza para 4 vezes de desaceleração para emular um dispositivo móvel normal), o Network Throttle (selecione a predefinição fast 3g para imitar seu dispositivo móvel médio) e defina a concorrência de hardware para 4 ou 8 para imitar seu móvel médio.

Para carregar o Chrome com menos memória disponível (embora reduzir as configurações de rede e CPU frequentemente façam o trabalho!) inicie o Chrome em um contêiner Docker e atribua menos memória.

Recarregue a página, interaja e verifique o INP com o visualizador de Core Web Vitals

A próxima etapa para encontrar a causa das pontuações ruins de INP é simular as condições e confirmar que as pontuações de INP são realmente tão ruins quanto relatadas.

Recarregue a página e clique no elemento correto no momento certo

Depurar o INP com um rastreamento de performance

Este é o momento para o qual você se preparou nos passos anteriores. É hora de descobrir por que uma certa interação está causando uma pontuação ruim de Interaction To Next Paint.

Abra o Console do Desenvolvedor do Chrome novamente (Ctrl-Shift-i), navegue até o painel de Performance e desta vez clique no ícone Seta Circular para recarregar a página e comece a gravar (ou use o atalho Ctrl-Shift-E).

Open the Chrome Developer Console again (Ctrl-Shift-i), navigate to the Performance panel and this time click the Circular Arrow icon to reload the page and start recording (or use the Ctrl-Shift-E shortcut).

Passo 3: Corrigir problemas de INP

Agora estamos em um ponto onde sabemos qual interação está causando nosso INP ruim e analisamos exatamente o que está acontecendo durante essa interação lenta. Isso significa que é hora de começar a corrigir o Interaction to Next Paint. O Interaction to Next Paint pode ser dividido em 3 fases: 'input delay', 'processing time' e 'presentation delay'.

Cada fase do interaction to next paint deve ser tratada de forma diferente!

Minimizar Atraso de Entrada:

Input delay é o tempo entre a interação com a página até quando o retorno de chamada do evento comança a ser executado. Embora sempre haja algum atraso de entrada (até os navegadores precisam de tempo para agendar os retornos de chamada), há algumas coisas a considerar:

1. Evite tarefas longas. Sempre que uma tarefa é executada, ela  bloqueará o thread principal e deixará os retornos de chamada de evento aguardando. Isso é especialmente importante ao otimizar cliques iniciais (pois a maioria dos scripts será executada nesse momento). 
2. Tenha cuidado ao criar novas tarefas. Por exemplo, tarefas recorrentes via setTimeout() ou tarefas que provavelmente ocorrerão antes do evento INP, como retornos de chamada no evento mouseover.
3. Medir e avaliar interação antecipada. Quando um elemento interativo é apresentado cedo (por exemplo, um elemento de busca do site) e é controlado por JavaScript que carrega posteriormente, qualquer interação com o elemento não acionará uma atualização de layout imediata. Ou priorize a funcionalidade ou oculte/desabilite o elemento antes de estar funcionando adequadamente.
4. Use web workers para executar JavaScript fora do thread principal do navegador. Web workers permitem que o Script seja executado fora do thread principal. Isso evitará que o thread principal seja bloqueado e cause problemas de atraso de entrada de INP
   
5. Carregue scripts de terceiros desejáveis durante o tempo ocioso do navegador.  Alguns scripts são mais críticos do que outros. Faz sentido priorizar esses scripts e carregar scripts menos importantes durante o tempo ocioso do navegador. Por exemplo, um script de chat

Minimizar tempo de processamento

1. Remova código desnecessário. Código desnecessário é código antigo que ainda é executado ou código novo que não é necessário nesta página específica, mas ainda consome tempo de CPU. Esta é, de longe, a maneira mais fácil de melhorar imediatamente o INP.
2. Adie o código que não precisa ser executado antes da próxima pintura. Divida o código em código crítico que deve ser executado antes do INP e código não crítico (por exemplo, envio de análises) e agende isso após o INP até mesmo com o método requestIdleCallback(). 
3. Otimize o código que deve ser executado antes da pintura. Verifique seu código e reescreva partes lentas ou ineficazes.
4. Forneça feedback imediato. Em tarefas complicadas ou possivelmente lentas, forneça feedback imediato antes de executar o código principal.

Minimizar Atraso de Apresentação

1.  Mantenha o DOM pequeno e simples. Basicamente, será muito mais fácil para um navegador renderizar uma página com poucos elementos DOM simples e não aninhados (nós html) do que renderizar uma página com muitos nós DOM aninhados.
   
2. Use content-visibility para renderizar preguiçosamente conteúdo fora da tela.  Content-visibility acelerará a renderização de partes visíveis da página, atrasando a renderização do conteúdo fora da tela, renderizando esse conteúdo fora da tela just-in-time.