Entenda o que é INP e como se preparar para a nova métrica do Google

Você já deve ter uma ideia de que o Google tem diversas métricas para acompanhar a experiência das páginas de um site, certo?

Só que  ele vai além: também repensa constantemente esses indicadores para melhorá-los.

O INP, que vem para substituir o FID, é um bom exemplo disso.

A mudança chega para valer em março de 2024, então, já é hora de se familiarizar com ela, ok?

Quem atua com SEO precisa entender muito bem o que isso significa, afinal, tem a ver com seu campo de análise.

Mas não somente essas pessoas: quem atua indiretamente também deve estar a par dessa nova métrica, pois ela diz respeito a UX.

E qual empresa não precisa se preocupar com isso? Acredito que seja o seu caso.

Então,  se você quer se atualizar sobre o tema, é só continuar acompanhando meu texto. Prometo que vou descomplicar esse tema para você!

Só peço um favorzinho antes! Dá uma olhada no meu ebook completíssimo com todas as dicas transformadas sobre o marketing digital em 2023? Não vai se arrepender!

O que é Interaction to Next Paint?

O Interaction to Next Paint (INP) — que pode ser traduzido como “Interação com a Próxima Pintura” em português — é a métrica que mede a capacidade de resposta geral de uma página às interações realizadas pelo usuário.

Ou seja, tem tudo a ver com o contexto da avaliação da experiência do usuário em páginas da web. 

Inclusive, vale lembrar que ele faz parte do próprio relatório de Core Web Vitals disponibilizado pelo Google Search Console.

Sendo mais específico, ele é projetado para medir o tempo decorrido entre uma interação do usuário, como clique, toque ou entrada de teclado, e a subsequente renderização visual significativa da página. 

(Paint, inclusive, pode ser traduzido para renderização!)

Em outras palavras: ele quantifica o tempo que leva para a página reagir às ações do usuário e apresentar as mudanças visuais correspondentes. 

A métrica considera todas as interações que ocorrem durante a visita do usuário à página e identifica a interação que teve o maior tempo de latência.

De acordo com dados do Google Chrome, 90% do tempo do usuário em uma página é gasto após o carregamento. 

Por isso, ele também entende que avaliar cuidadosamente a capacidade de resposta ao longo do ciclo de vida da página é essencial.

E é exatamente isso que essa nova métrica faz.

A INP substitui o FID

Ok, você entendeu o que é a INP. 

Mas é preciso essa substituição da First Input Delay (FID).

A ideia dessa métrica anterior era parecida: era medir a rapidez com que uma página responde às suas ações.

No entanto, ela tinha algumas limitações. 

A principal diferença entre os dois é que o FID foca apenas na primeira ação que você faz na página, enquanto a nova considera todas as ações que você realiza nela. 

O FID também olha apenas para o atraso na primeira ação, não levando em conta outros atrasos que podem ocorrer depois. 

Nesse sentido também, o INP é mais confiável: ele leva todas as suas interações em consideração, dando uma imagem mais completa da capacidade de resposta da página.

Por causa desses probleminhas, a equipe por trás do Chrome decidiu buscar uma maneira melhor de medir a capacidade de resposta das páginas da web e deu nessa nova métrica.

Em 2022, eles a introduziram de modo experimental (mas ela tem sido testada desde 2021!).

Já em 10 de maio de 2023, o Google informou que a nova métrica INP ia substituir a FID, de vez, como parte das parte das principais métricas de qualidade para páginas da web em março de 2024.

Isso significa, claro,  que o FID não será mais a métrica usada para avaliar a capacidade de resposta das páginas. 

Qual é a importância da INP na prática?

Imagine que você está navegando em um site. 

Você pode clicar em botões, preencher formulários ou fazer qualquer outra ação interativa.

Quando você faz isso, espera ver uma resposta imediata na tela, como um carrinho de compras que mostra um novo item adicionado ou um menu de navegação que aparece quando você toca nele, certo?

O que acontece é que o navegador precisa mostrar essas respostas visuais na tela.

E isso é o que chamamos de “pintura”. 

Agora, algumas ações podem levar um pouquinho mais de tempo para mostrar o resultado.

Só que é importante que, mesmo nessas situações mais complexas, o usuário receba algum tipo de sinal visual rápido.

Por que?

É a melhor forma da página mostrar que está trabalhando no que você pediu — como um aviso de que algo está acontecendo nos bastidores.

Então, o tempo que demora desde a sua ação até a próxima vez que a tela é atualizada é chamado de “tempo até a próxima pintura”. 

Essa é a primeira chance que a página tem para te dar alguma resposta visual. 

A métrica, inclusive, não conta todos os efeitos complicados que podem ocorrer depois da sua ação (como checar informações na internet ou atualizar partes específicas da página), mas o tempo em que a próxima atualização visual está demorando para acontecer.

Então, se demorar muito para ver alguma reação na tela, a pessoa pode começar a achar que a página não está funcionando direito.

E isso é, claramente, um problema de experiência.

O INP vai fazer com que esse tempo desde que você faz algo até que a tela mostre a resposta seja o mais curto possível. 

Isso vale para praticamente todas as coisas que você fizer no site.

A ideia é que a página seja ágil em responder às suas ações, deixando sua experiência mais suave e satisfatória.

Quais são os valores de INP?

Como medir o INP?

Rotular métricas de capacidade de resposta como “boa” ou “ruim” não é tão simples assim.

“Ué, como assim, Neil?”

Por um lado, o Google diz que a ideia é incentivar práticas de desenvolvimento que priorizem uma boa capacidade de resposta. 

Por outro, aponta também que é preciso levar em conta a grande variabilidade nas capacidades dos dispositivos que as pessoas usam para criar expectativas que realmente sejam realistas.

De maneira geral, então, tenha isso em mente:

• Abaixo ou igual a 200 milissegundos indica que sua página tem uma boa capacidade de resposta;
• Acima de 200 milissegundos e abaixo ou igual a 500 milissegundos aponta que a capacidade de resposta da sua página precisa melhorar; 
• Acima de 500 milissegundos indica que sua página tem uma capacidade de resposta ruim.

É uma análise sem rótulos fixos, mas que mantém o foco na melhora constante e, principalmente, nas diferentes condições de uso.

E não esqueça: tudo isso influencia diretamente no ranqueamento da sua página.

Como otimizar a INP?

Mas afinal, como otimizar a INP?

Bom, o próprio Google tem suas recomendações para isso.

Vamos entendê-las?

Encontre interações lentas em ambiente de teste

O ideal é começar os testes controlados assim que se tiver dados de uso real mostrando interações que estão bem lentas.

Mas nem sempre você vai ter esses dados.

Se essa é a sua situação, não precisa se preocupar: ainda dá pra dar um jeito nas interações, só vai ser necessário seguir uma abordagem diferente.

O Tempo Total de Bloqueio (TBT) é uma métrica que avalia a responsividade da página durante o carregamento. 

A boa notícia, claro, é que ele tem uma ligação forte com o INP.

Ele pode te dar uma ideia se existem interações que podem estar demorando enquanto a página tá carregando.

Você pode usar tanto o Lighthouse quanto o PageSpeed Insights para medir o TBT da sua página. 

Se o TBT estiver fraco ou precisando de melhorias, é sinal que existem interações que estão meio lentas durante o carregamento da página!

E botar a mão na massa quando a página está carregando — momento em que a parte principal do processamento frequentemente está ocupada— pode revelar interações lentas nessa etapa crucial da experiência do usuário.

Identifique e reduza o atraso de entrada

Quando você interage com uma página, a primeira coisa que acontece é um atrasinho. 

Dependendo da quantidade de recursos necessários para que a página funcione completamente, é bem possível que os usuários tentem interagir com ela enquanto ainda está carregando.

E a partir do que acontece na página naquele momento, esse atraso pode ser maior do que o normal. 

E o que está fazendo com que isso aconteça?

É seu papel identificar.

Pode ser por causa de atividades na linha principal de execução — carregamento, análise e compilação de scripts.

Mas também pode ser em razão da manipulação de fetch, funções de temporizador ou até mesmo de outras interações que ocorrem rapidamente e se sobrepõem umas às outras.

Não importa de onde vem esse atraso, o importante é fazer algo!

Por isso, é essencial entender o que você pode fazer para reduzir a probabilidade de tarefas longas durante o carregamento da página para que ela permaneça ágil.

Só assim sua  página vai estar responsiva à entrada do usuário durante o carregamento dela!

Minimize o atraso da apresentação

O atraso na apresentação de uma interação abrange um considerável período: desde o término dos retornos de chamada de eventos da interação até o ponto em que o navegador consegue desenhar o próximo quadro que exibe as mudanças visuais resultantes.

Uma das formas de minimizar o atraso da apresentação — mas não é o único — é minimizando o Document Object Model (DOM).

Ele representa os dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web.

Quando o tamanho do DOM de uma página é pequeno, a renderização costuma ser bem rápida.

Mas aí, à medida que o tamanho do DOM aumenta, a tarefa de renderização tende a ficar mais complexa. 

DOMs maiores demandam mais esforço para serem processados do que DOMs menores. 

E qual é o problema disso?

Durante a resposta a uma interação do usuário, um DOM grande pode tornar as atualizações de renderização bastante custosas.

Ou seja, aumenta o tempo necessário para o navegador exibir o próximo quadro.

No entanto, nem sempre vai ser possível diminuí-lo — vale dizer.

Outras maneiras de minimizar o atraso da apresentação envolvem estar ciente dos custos de desempenho ao renderizar HTML usando JavaScript e, ainda, usar a visibilidade do conteúdo para renderizar “preguiçosamente” elementos fora da tela.

Veja mais nessa explicação do Google.

Otimize retornos de chamada de eventos

O atraso de entrada é só a pontinha do iceberg.

Também é importante cuidar para que os eventos que acontecem quando você dá um toque, por exemplo, sejam rápidos.

O melhor conselho geral para otimizar os retornos de chamadas de eventos é fazer o mínimo de trabalho possível neles. 

No entanto, a lógica de interação pode ser complexa.

Ou seja, você só consegue reduzir levemente o trabalho que eles executam.

Se você notar que isso acontece no seu site, uma saída é dividir o trabalho dos eventos em tarefas separadas. 

Assim, o trabalho todo não fica acumulado e não trava a linha principal, o que dá espaço pras outras interações que estavam esperando na fila.

O “setTimeout” é uma forma de fazer essa divisão, porque o que você escreve dentro dele roda em uma tarefa à parte. 

Dá pra usá-lo sozinho ou criar uma função à parte só pra isso, para facilitar ainda mais essa pausa.

Agora antes da gente concluir esse tema, eu preciso te lembrar de novo sobre meu ebook gratuito e pronto para ajudar você. Aproveite para saber tudo que há de novo no mercado do marketing digital em 2023!

Conclusão

A importância da resposta das páginas para proporcionar uma experiência de usuário fluida e envolvente é gigantesca.

O INP vem para mostrar isso.

Principalmente por ser uma resposta às limitações do FID.

À medida que a otimização da responsividade das páginas se mantém como um imperativo na era digital, não há como deixar o Interaction to Next Paint para lá.

Nem para depois.

Portanto, fica o conselho: aproveite agora para se preparar — você tem muitos meses pela frente até  março de 2024, certo?

Busque detectar as interações lentas, identificar o atraso de entrada, minimizar o atraso da apresentação, e otimizar os retornos de chamadas.

Se você ficou com alguma dúvida ainda sobre essa mudança, me conta nos comentários!

Até a próxima!

Perguntas frequentes

O que é INP (Interaction to Next Paint)?

O INP mede o tempo entre a interação do usuário e a próxima renderização visual significativa da página. 

Quais são os valores de INP?

Em termos de avaliação, os valores se dividem entre: abaixo de 200ms (bom), 200-500ms (melhoria necessária), acima de 500ms (ruim).

Como otimizar a INP?

Para otimizar o INP, é essencial encontrar as interações lentas, reduzir os atrasos de entrada, minimizar os atrasos da apresentação e otimizar os retornos de chamada.