O Google substituiu o First Input Delay (FID) por uma nova métrica Core Web Vitals chamada Interaction to Next Paint (INP). Essa mudança visa medir melhor a capacidade de resposta de um site e a experiência geral do usuário.
Este artigo explica o que é o INP, por que substituiu o FID, como verificar a pontuação INP do seu site e várias técnicas para melhorar o INP e aumentar a capacidade de resposta do site.
O que é interação com a próxima pintura (INP)?
O Google usa o INP para avaliar a capacidade de resposta geral do seu site. Se você clicar em um menu suspenso e houver um atraso na sua abertura, essa latência mostra uma capacidade de resposta fraca e está relacionada ao INP.
Se houver problemas com o INP, a experiência do usuário será prejudicada, pois ele poderá continuar clicando no menu do seu site, aguardando uma resposta.
INP é o tempo que leva desde a interação inicial do usuário até o momento em que o próximo quadro do site é pintado.
Por que o INP substituiu o FID?
O Google anunciou anteriormente que o INP substituiria o FID porque este último era uma métrica que tinha suas limitações, que os SEOs conheciam. O INP é a “nova iteração” do FID, pois medirá a capacidade de resposta de um site de forma mais completa.
Seu relatório do Google Search Console não mostrará mais o FID. Os proprietários de sites devem, como já fazem há muito tempo, concentrar-se em melhorar a experiência do usuário.
Seus Core Web Vitals são apenas uma pequena parte do SEO de um site, mas é uma das áreas que você deve dedicar tempo para otimizar porque pode fazer uma grande diferença (por exemplo, conversões).
Um site que funcione bem, que carregue e responda rapidamente, terá desempenho superior ao de um site semelhante onde a experiência do usuário é ruim.
Como verificar o INP do seu site
Você pode verificar o INP de um site de duas maneiras:
- Console de pesquisa do Google
- Informações do PageSpeed
Navegar para Search Console > Experiência > Core Web Vitals. Se você deseja executar o PageSpeed Insights por conta própria, vá para PageSpeed Insights. Digite o URL ou domínio que deseja verificar e clique no botão Analisar botão.
Navegue até o Área de Trabalho guia e você verá o INP do site listado. O INP é de 50 ms, então ainda está verde e não precisa de otimização.
Você pode avaliar se o INP precisa de otimização em seu site com base em sua pontuação:
- > 200 ms é “Bom”.
- 200 ms a 500 ms “Precisa melhorar”.
- < 500 ms é “Ruim”.
O PageSpeed Insights permitirá que você visualize relatórios que você pode filtrar para encontrar recomendações para melhorar o INP do seu site. Se você se concentrou no FID no passado, descobrirá que muitas das melhorias feitas também ajudarão o INP do site.
Siga as recomendações do relatório para tentar melhorar o INP do seu site.
Você também pode implementar algumas otimizações básicas de INP que todos os sites devem incorporar para focar mais na capacidade de resposta e garantir que a experiência do usuário permaneça alta.
Otimização INP: como começar
Concentre-se no que falta em seu site no relatório e na correção de problemas conhecidos antes de adotar uma abordagem “tamanho único para todos”. Se o JavaScript do seu site não for um problema no momento, concentre-se no que está impactando seus usuários.
Resolver problemas relacionados ao JavaScript
JavaScript é quantos sites passam de estáticos a interativos. Se o seu site usa JavaScript intensamente, você deve começar otimizando-o. Você pode querer trabalhar com sua equipe de desenvolvimento porque consertar scripts pode se tornar complexo.
Algumas tarefas básicas que certamente ajudarão são:
- Use uma rede de entrega de conteúdo (CDN) para melhorar o tempo de carregamento de arquivos e reduzir seu INP em alguns milissegundos.
- Minimize todos os seus arquivos JavaScript e CSS também. Arquivos menores carregam mais rápido e ajudam a acelerar o INP.
Tarefas longas
São consideradas tarefas longas aquelas que levam mais de 50 ms para serem processadas. Seu navegador possui uma “tarefa principal”, que só pode processar uma única tarefa por vez. Se o seu JavaScript demorar mais de 50 ms para ser processado, todas as outras tarefas serão colocadas em espera até que o processo seja interrompido.
O que você pode fazer?
Divida essas tarefas longas em execuções muito menores para que levem menos tempo para serem executadas e processadas.
Web.dev tem um ótimo guia sobre este longo tópico, mas a ideia é simples:
- Divida chamadas para vários métodos em várias funções. JavaScript trata todas as funções como uma única tarefa, portanto, se você tiver 10 subfunções em uma função principal, a função principal rapidamente se transformará em uma tarefa longa.
- Adie a execução do código, o que exigirá a ajuda de um desenvolvedor caso você ainda não saiba como fazer isso.
- Crie um agendador de API dedicado, descrito no guia com link acima.
Se você usar setTimeout e solicitaçãoIdleCallbackvocê também pode dividir tarefas longas em tarefas mais curtas.
Prontidão de entrada
Você deseja que seu site esteja pronto para a entrada do usuário e responda o mais rápido possível. Uma maneira de fazer isso é adiar o código como na última seção ou usar ouvintes de eventos passivos.
Restringindo o que está causando problemas de INP
Os problemas de INP são difíceis de identificar, mas existem ferramentas que você pode usar para ajudar no diagnóstico de problemas. Ainda estou experimentando novas ferramentas para identificar problemas com o INP, mas as seguintes funcionam bem:
Monitoramento de usuário real (RUM)
RUM é algo que você deve usar a seu favor, especialmente se você administra sites de comércio eletrônico. As interações lentas parecem ser muito maiores na esfera do comércio eletrônico do que nos sites de conteúdo.
As ferramentas que podem ajudar com o RUM são:
- DebugBear
- Akamai mPulse
DevTools do Chrome
Se você é usuário do Chrome, o DevTools (pressione F12 no PC) pode ajudar. Você vai querer ir para Desempenho e Comece a gravar. A partir daqui, navegue até um elemento interativo no site e o desempenho será registrado.
A ferramenta pode ajudá-lo a entender melhor o que está causando o atraso no site e determinar como corrigi-lo.
Monitore o Search Console do seu site ou o PageSpeed Insights periodicamente para ficar por dentro do seu INP.
Como é necessária uma otimização extensiva de JavaScript, se o site em que você está trabalhando usa JavaScript extensivo, trabalhe com um desenvolvedor para otimizá-lo.
