O que é a Pontuação INP do Google e Como Melhorá-la no WordPress

Quando o Google introduz um novo fator de classificação como INP (Interaction to Next Paint), é fácil se sentir sobrecarregado. Você provavelmente está se perguntando o que esse termo técnico significa para o seu site WordPress e o que você precisa fazer agora.

Entendemos completamente. Com mais de uma década de experiência otimizando sites WordPress, nossa equipe começou imediatamente a testar para encontrar as maneiras mais eficazes de melhorar essa nova pontuação.

Após pesquisar o tópico, traduzimos toda a jargão complexa em etapas simples e acionáveis. Estamos animados para compartilhar os métodos comprovados que agora usamos em nosso próprio portfólio de sites.

Neste guia, vamos detalhar exatamente o que é INP e como você pode aumentar suas pontuações, mesmo que você não seja um desenvolvedor.

Aqui está um breve resumo dos tópicos que abordaremos neste guia:

1. O que são as Métricas Essenciais da Web do Google?
2. O que é o INP do Google?
3. Por que o Google Mudou a Métrica FID para INP?
4. Como Medir a Pontuação INP do Google no WordPress
5. Como Melhorar a Pontuação INP do Google no WordPress
6. Como Proprietários de Sites Podem Otimizar Seus Sites para INP
7. Como Desenvolvedores Podem Otimizar Seu Código para INP
8. Exemplos de Boas Práticas de Codificação JavaScript para Desenvolvedores
9. Perguntas Frequentes sobre o INP do Google
10. Guias de Especialistas sobre Como Melhorar o Desempenho do WordPress

O que são as Métricas Essenciais da Web do Google?

As Métricas Essenciais da Web do Google são métricas de desempenho de sites que o Google considera importantes para a experiência geral do usuário. Essas pontuações vitais da web fazem parte da pontuação geral de experiência da página do Google, que impactará seus rankings de SEO.

Essas métricas são úteis porque, mesmo que seu site WordPress carregue rapidamente, ele pode não ser totalmente funcional para os usuários. Mesmo que uma página tenha carregado, um visitante pode não ser capaz de fazer o que deseja ou acessar as informações de que precisa.

As Core Web Vitals foram projetadas para ajudar com isso. Elas permitem que você meça a rapidez com que seu site carrega, se torna visível e está pronto para seus visitantes usarem.

No passado, o Google usava três testes de qualidade:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Você pode aprender mais sobre esses testes em nosso guia definitivo sobre como otimizar Core Web Vitals para WordPress.

No entanto, o Google substituiu o FID por um novo teste chamado INP (Interaction to Next Paint) em março de 2024. Os outros dois testes continuam sendo usados.

Vamos dar uma olhada no que é o INP e por que o Google o adotou.

O que é o INP do Google?

INP significa ‘Interaction to Next Paint’ (Interação para a Próxima Pintura). É uma nova métrica do Google Core Web Vital que mede as interações do usuário que causam atrasos em seu site.

O teste INP mede quanto tempo leva entre um usuário interagindo com seu site, como clicar em algo, e seu conteúdo sendo visualmente atualizado em resposta. Essa atualização visual é chamada de ‘próxima pintura’.

Por exemplo, um usuário pode enviar um formulário de contato em seu site, clicar em um botão ou selecionar uma imagem que abre em uma lightbox. O teste INP medirá o tempo entre o usuário realizar essas interações e realmente ver o conteúdo atualizado em seu site.

O teste do Google, então, apresenta uma única pontuação INP com base na duração da maioria das interações do usuário em seu site. A pontuação será ‘Boa’, ‘Precisa de Melhoria’ ou ‘Ruim’, dependendo de quanto tempo seu site leva para atualizar visualmente.

Por que o Google Mudou a Métrica FID para INP?

O teste FID mais antigo media a rapidez com que seu site respondia à primeira entrada do usuário após o carregamento da página, como um clique do mouse ou uma tecla pressionada. Ele faz isso medindo o tempo entre a primeira entrada do usuário e quando seu site começa a agir sobre essa entrada.

Em outras palavras, mediu o quão responsivo seu site foi quando carregou pela primeira vez e a primeira impressão que ele causou aos usuários reais.

No entanto, essa métrica não foi tão útil quanto poderia ter sido. Havia duas limitações no teste FID:

1. Ele mediu apenas a primeira interação do usuário, não todas elas.
2. Ele mediu apenas até o site começar a processar a interação, não quando o usuário podia realmente ver o feedback visual na tela.

Então o Google mudou o teste para dar uma visão mais completa da responsividade geral de uma página da web. O INP medirá todo o tempo que o usuário passa lá até sair da página.

Como Medir a Pontuação INP do Google no WordPress

A maneira mais fácil de testar sua pontuação do Google Core Web Vitals é usando a ferramenta PageSpeed Insights. Simplesmente insira a URL que você deseja testar e clique no botão ‘Analisar’.

A ferramenta analisará a página da web por alguns segundos e, em seguida, mostrará os resultados do teste.

Agora, juntamente com outros Google Core Web Vitals, você também verá a pontuação de Interaction to Next Paint (INP) da página.

Haverá pontuações diferentes para usuários de dispositivos móveis e desktop.

Na captura de tela acima, você pode ver que a pontuação INP para usuários de desktop visualizando esta página da web no WPBeginner é de 47 ms. O ponto verde significa que esta é uma boa pontuação.

Assim que você puder ver a pontuação do seu próprio site, provavelmente se perguntará como ela se compara com outros sites e se precisa ser melhorada.

O Google forneceu algumas diretrizes para interpretar sua pontuação de INP:

• Mais rápido que 200 milissegundos – boa responsividade
• 200-500 milissegundos – precisa de melhorias
• Mais lento que 500 milissegundos – má responsividade

Certifique-se de verificar sua pontuação para usuários de dispositivos móveis e desktop e mire em uma boa responsividade.

Você pode então melhorar sua pontuação de INP seguindo as diretrizes nas seções abaixo.

Estudo de Caso: Encontrando Interações Lentas nos Sites da Awesome Motive

Mas primeiro, pode ser útil olhar para um estudo de caso. Começamos a medir as pontuações de INP em nossos sites de marca, incluindo All in One SEO, MonsterInsights e WPForms.

Quando nossa equipe verificou as pontuações de INP de nosso site, os resultados iniciais mostraram que nossas páginas mais populares precisavam de melhorias.

Usando o painel Chrome User Experience (CrUX), pudemos ver que:

• 80% de nossas sessões foram classificadas como 'boas'
• 12% de nossas sessões foram classificadas como 'precisam de melhorias'
• 8% de nossas sessões foram classificadas como 'ruins'

Um relatório do PageSpeed Insights nos dá uma pontuação geral de INP, mas não nos diz quais botões ou campos de formulário específicos estão causando o atraso para usuários reais. Para descobrir isso, precisamos investigar um pouco mais a fundo usando outras ferramentas que analisam dados de sessões de visitantes reais.

Isso significa que, em seguida, precisaremos executar nossos próprios testes para encontrar interações lentas em páginas com pontuações de INP mais baixas. Esta é uma tarefa detalhada e avançada que é melhor realizada por um desenvolvedor.

Isso é feito acessando cada página que precisa de melhorias e, em seguida, testando cada interação com cliques, toques e pressionamentos de tecla reais. Estes precisam ser cronometrados e avaliados usando ferramentas.

O Chrome Developers Blog lista várias ferramentas que podem ser usadas para testes, como a extensão Web Vitals do Chrome e o novo modo de timespan no Painel Lighthouse do DevTools. Você também pode ver o artigo do Google sobre como depurar usando a extensão Web Vitals.

É importante notar que as sessões com classificações mais baixas provavelmente ocorreram em dispositivos ou conexões mais lentas. Isso significa que, durante os testes, é recomendado limitar a velocidade do seu navegador, ou você pode não identificar as interações lentas.

Você pode fazer isso usando o recurso Inspecionar Elemento do Chrome, acessando Exibir » Desenvolvedor » Inspecionar Elementos. Você pode mudar para a aba 'Rede' e selecionar uma opção de limitação no menu suspenso.

É importante testar em uma conexão mais lenta porque muitos dos seus usuários podem estar em dispositivos móveis ou ter uma internet que não é perfeita. Um problema que é invisível no seu computador rápido do escritório pode ser uma grande fonte de frustração para eles.

Depois de encontrar as pontuações de INP para suas páginas, você pode usar as dicas na próxima seção deste tutorial para melhorá-las.

Como Melhorar a Pontuação INP do Google no WordPress

A maior parte do trabalho de otimização da pontuação INP precisará ser feita por desenvolvedores. Isso inclui os autores do tema e plugins que você usa em seu site, além dos desenvolvedores de qualquer JavaScript personalizado que você esteja executando.

Isso ocorre porque a pontuação INP está principalmente relacionada ao tempo necessário para realizar interações de JavaScript em seu site.

Por exemplo, quando um usuário clica em um botão, algum código JavaScript é executado para realizar a função esperada ao clicar no botão. Esse código é baixado para o computador do usuário e executado em seu navegador da web.

Para otimizar sua pontuação INP, os atrasos que ocorrem durante as interações do usuário com JavaScript devem ser reduzidos. Existem três componentes para esse atraso:

1. Atraso de entrada, que ocorre quando seu site está aguardando tarefas em segundo plano nessa página que impedem a execução do manipulador de eventos.
2. Tempo de processamento, que é o tempo necessário para executar manipuladores de eventos em JavaScript.
3. Atraso de apresentação, que é o tempo necessário para recalcular a página e exibir o conteúdo da página na tela.

Como proprietário de um site, há medidas que você pode tomar para melhorar o primeiro e o terceiro atrasos. Mostraremos como na próxima seção.

No entanto, para fazer melhorias reais em sua pontuação INP, você precisará melhorar o segundo atraso, que é o tempo de processamento do próprio código. Isso não é algo que você possa fazer sozinho.

Os desenvolvedores do seu tema WordPress, plugins e JavaScript personalizado podem precisar otimizar seu código para fornecer feedback imediato aos seus usuários. A boa notícia é que eles provavelmente já estão trabalhando nisso para cumprir o prazo de março de 2024.

Oferecemos algumas dicas específicas para desenvolvedores com exemplos mais adiante neste artigo.

Como Proprietários de Sites Podem Otimizar Seus Sites para INP

Embora o impacto mais significativo na pontuação INP do seu site venha de desenvolvedores otimizando seu código, existem algumas coisas que os proprietários de sites podem fazer.

Em particular, você pode garantir que os cliques do mouse e as teclas digitadas pelos seus usuários sejam reconhecidos o mais rápido possível, otimizando os processos em segundo plano do seu site. Além disso, você pode garantir que a resposta à entrada deles seja exibida na tela o mais rápido possível.

Embora essas etapas possam não reescrever diretamente o código que causa uma interação lenta, elas melhoram a saúde geral do seu site. Um site mais rápido e enxuto dá ao navegador mais recursos para lidar com interações do usuário rapidamente, o que definitivamente pode ajudar sua pontuação INP.

Aqui estão algumas etapas que você pode seguir para conseguir isso.

1. Certifique-se de que você está executando a versão mais recente do WordPress

A primeira coisa que você deve fazer é garantir que você está executando a versão mais recente do WordPress.

Isso ocorre porque as versões 6.2 e 6.3 do WordPress introduziram melhorias significativas de desempenho. Isso melhorará o desempenho do seu site no lado do servidor e no lado do cliente, o que melhorará sua pontuação INP.

Para instruções detalhadas, você pode consultar nosso guia sobre como atualizar o WordPress com segurança.

2. Otimize Processos em Segundo Plano no WordPress

Processos em segundo plano são tarefas agendadas no WordPress que são executadas em segundo plano. Eles podem incluir a verificação de atualizações do WordPress, a publicação de posts agendados e o backup do seu site.

Se o seu site ficar muito ocupado executando essas tarefas em segundo plano, ele pode não perceber imediatamente que o usuário clicou com o mouse ou pressionou uma tecla, resultando em uma pontuação INP ruim.

Você pode ser capaz de configurar seus scripts e plugins em segundo plano para reduzir a quantidade de trabalho que eles estão fazendo, colocando menos pressão em seu site. Caso contrário, você pode executá-los apenas quando forem necessários, em vez de deixá-los em execução em segundo plano.

Para instruções detalhadas, você pode consultar a seção Otimizar Processos em Segundo Plano do nosso guia definitivo sobre como aumentar a velocidade e o desempenho do WordPress.

3. Verifique as Recomendações de Desempenho do PageSpeed Insights

Após executar o teste PageSpeed Insights no seu site, você pode rolar para baixo até a seção Desempenho dos resultados do teste.

Aqui, você encontrará algumas oportunidades para melhorar o desempenho do seu site, juntamente com a economia de tempo estimada se você seguir os conselhos.

Por exemplo, você pode ver recomendações para eliminar recursos que bloqueiam a renderização. Você pode fazer isso seguindo nosso guia sobre como corrigir JavaScript e CSS que bloqueiam a renderização no WordPress.

Você também pode ver uma recomendação para reduzir o JavaScript não utilizado. Você encontrará uma configuração para fazer isso em muitos dos melhores plugins de cache do WordPress, como o WP Rocket.

4. Minificar JavaScript no WordPress

O JavaScript precisa ser baixado para o computador do usuário antes de poder ser executado. Ao tornar seus arquivos JavaScript o menor possível, você pode obter alguns pequenos ganhos de desempenho.

Minificar seu JavaScript torna os arquivos menores, removendo espaços em branco, linhas e caracteres desnecessários do código-fonte.

Isso não terá um efeito drástico em seu desempenho, mas se você estiver procurando reduzir alguns milissegundos extras em sua pontuação INP, poderá achar que vale a pena.

Para saber como, você pode ver nosso guia sobre como minificar arquivos CSS e JavaScript no WordPress.

Como Desenvolvedores Podem Otimizar Seu Código para INP

Se você é um desenvolvedor, os maiores ganhos na pontuação INP virão da otimização do seu código. Aqui estão algumas coisas que você pode fazer.

1. Reconheça visualmente a entrada do usuário imediatamente

Aqui está a única coisa que fará a maior diferença ao otimizar a pontuação INP do seu código: você precisa fornecer feedback visual para toda a entrada do usuário imediatamente.

O usuário deve ver imediatamente que sua entrada foi reconhecida e que você está agindo sobre ela. Isso fará com que seu código pareça mais responsivo ao usuário e resulte em uma ótima pontuação de INP.

Aqui estão alguns exemplos:

• Se um usuário clicar em um elemento, você deverá exibir algo que mostre que o elemento foi clicado.
• Se um usuário enviar um formulário, você precisará exibir imediatamente algo para reconhecer isso, como uma mensagem ou um spinner.
• Se um usuário clicar em uma imagem para abri-la em uma lightbox, não espere apenas o carregamento da imagem. Em vez disso, você deve mostrar uma imagem de demonstração ou um spinner imediatamente. Em seguida, quando a imagem for carregada, você poderá exibi-la na lightbox.

Mais do que qualquer outra coisa, isso melhorará sua pontuação de INP, especialmente se você precisar fazer um processamento pesado de JavaScript em resposta à entrada do usuário.

Apenas certifique-se de atualizar a interface do usuário antes de iniciar a tarefa.

Depois disso, você pode agendar o trabalho pesado para ser executado um pouco mais tarde usando um callback setTimeout. Isso dá ao navegador um momento para atualizar a tela antes que ele fique ocupado com a tarefa intensiva.

Assim que você acertar isso, há algumas outras coisas que você pode fazer para otimizar seu código.

2. Otimize Onde o Navegador Gasta a Maior Parte do Seu Tempo

A próxima coisa que você deve fazer é investigar onde o navegador está gastando a maior parte do seu tempo e, em seguida, otimizar essas partes.

No Google Chrome, ao navegar para Exibir » Desenvolvedor » Ferramentas do Desenvolvedor » Desempenho, é possível inspecionar as funções JavaScript e os manipuladores de eventos que estão bloqueando a próxima renderização.

Com esse conhecimento, você pode ver o que pode ser otimizado para reduzir o tempo até a próxima renderização após a interação do usuário.

3. Reduza seus Layouts

Às vezes, muita atividade da CPU consiste em trabalho de layout.

Quando isso acontece, você deve verificar se seu código está fazendo com que o navegador recalcule repetidamente o layout da página. Isso é frequentemente chamado de ‘layout thrashing’, e fornecemos um exemplo de como evitá-lo mais adiante neste guia.

4. Mostre o Conteúdo Acima da Dobra Primeiro

Se a renderização do conteúdo da página for lenta, sua pontuação INP poderá ser afetada.

Você pode considerar mostrar apenas o conteúdo importante ‘acima da dobra’ primeiro para entregar o próximo quadro mais rapidamente.

Exemplos de Boas Práticas de Codificação JavaScript para Desenvolvedores

Pode ser útil mostrar alguns exemplos de como um código ruim pode resultar em uma pontuação INP baixa.

Reunimos um projeto de exemplo no CodePen com o qual você pode experimentar. Você pode examinar nosso código de exemplo, ler nossas breves explicações e ver a diferença que ele faz clicando nos botões.

Aqui está uma animação desse projeto CodePen. Você pode ver que o código de exemplo não otimizado resulta em uma pontuação INP baixa de 965 milissegundos. A pressão do botão parecerá lenta para os usuários.

Em contraste, o código otimizado atualiza o texto do botão imediatamente, resultando na melhor pontuação INP possível.

Continue lendo para ver quatro exemplos de como você pode melhorar seu código para otimizar a pontuação INP.

Exemplo 1: Atualize a Tela Antes de Executar uma Tarefa Pesada de CPU

Tarefas pesadas de CPU levam tempo, e isso pode levar a pontuações INP baixas, a menos que você escreva um bom código. Neste caso, é melhor atualizar a tela antes de executar essa tarefa.

Aqui está um mau exemplo onde a interface do usuário é atualizada após uma tarefa pesada de CPU. Isso resulta em um INP alto:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

Neste exemplo aprimorado, a interface do usuário é atualizada imediatamente quando o botão é clicado.

Depois disso, a tarefa pesada de CPU é movida para um callback de setTimeout:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Isso permite que o navegador atualize a tela antes de iniciar a tarefa lenta, resultando em uma boa pontuação de INP.

Exemplo 2: Agendar Processamento Não Urgente

Você também deve garantir que não execute trabalho não urgente ou não essencial em um script imediatamente, pois isso pode atrasar a resposta que o usuário espera.

Você deve começar atualizando a página imediatamente para reconhecer a entrada do usuário. Depois disso, você pode usar requestIdleCallback para agendar o restante do script quando houver tempo livre no final de um frame ou quando o usuário estiver inativo.

Aqui está um exemplo:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Isso fará com que a página da web pareça mais responsiva ao usuário e lhe renderá uma pontuação de INP melhor.

Exemplo 3: Agendar uma Função para Executar Antes da Próxima Pintura

Você também pode usar requestAnimationFrame para agendar uma função para ser executada antes da próxima repintura:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Isso pode ser útil para animações ou atualizações visuais em resposta a interações do usuário.

Novamente, você deve dar feedback ao usuário reconhecendo sua entrada imediatamente.

Exemplo 4: Evitar Layout Thrashing

Layout thrashing ocorre quando você lê e escreve repetidamente no DOM (Document Object Model), fazendo com que o navegador recalcule o layout várias vezes.

Aqui está um exemplo de layout thrashing:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Isso pode ser evitado agrupando suas leituras e gravações.

Este é um exemplo melhor:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Perguntas Frequentes sobre o INP do Google

Entendemos que um tópico técnico como INP pode gerar muitas dúvidas. Para ajudar, respondemos a algumas das perguntas mais comuns que recebemos de nossos leitores.

O que é a métrica Interaction to Next Paint (INP) do Google?

Interaction to Next Paint (INP) é uma métrica do Google Core Web Vitals que mede a responsividade geral de um site às interações do usuário. Ela calcula o tempo desde o momento em que um usuário clica, toca ou digita em uma página até a próxima atualização visual aparecer na tela.

Isso oferece uma visão mais ampla da experiência do usuário do que a métrica FID anterior.

Por que o Google substituiu o First Input Delay (FID) pelo INP?

O Google substituiu o FID pelo INP porque ele fornece uma medida mais abrangente da responsividade de uma página. O FID media apenas o atraso da primeira interação.

Em contraste, o INP avalia a latência de todas as interações do usuário durante uma visita, oferecendo um quadro mais completo da experiência do usuário.

O que é uma boa pontuação INP?

De acordo com as diretrizes do Google, uma boa pontuação INP é de 200 milissegundos ou menos. Uma pontuação entre 200 e 500 milissegundos 'precisa de melhorias', e qualquer coisa acima de 500 milissegundos é considerada 'baixa responsividade'.

Como posso melhorar minha pontuação INP no WordPress?

Melhorar sua pontuação INP no WordPress envolve várias etapas. Proprietários de sites podem otimizar processos em segundo plano, minificar JavaScript e garantir que seu site esteja atualizado.

Desenvolvedores podem ter um impacto significativo otimizando o código para fornecer feedback visual imediato para ações do usuário, como mostrar um spinner de carregamento, e adiando tarefas pesadas.

Guias de Especialistas sobre Como Melhorar o Desempenho do WordPress

Esperamos que este tutorial tenha ajudado você a aprender como melhorar sua pontuação INP do Google no WordPress. Você também pode querer ver alguns outros artigos relacionados à melhoria do desempenho do WordPress:

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.