Interaction to Next Paint (INP): prepare-se para a nova métrica Core Web Vitals

Interaction to Next Paint (INP) é uma das métricas de desempenho em destaque que o Google em breve adicionará ao seu conjunto de métricas das Core Web Vitals. A nova métrica INP substituirá a FID em março de 2024 e sua principal função é avaliar a capacidade de resposta das páginas de um site.

Portanto, se o seu objetivo é aprimorar a classificação do seu site nas páginas de resultados de mecanismos de busca, é crucial adquirir conhecimento sobre a INP agora e entender como implementar as melhorias necessárias. Caso contrário, o posicionamento das suas páginas poderá ser afetado quando essa atualização das Core Web Vitals se tornar oficial.

Neste post, nos aprofundaremos na métrica INP, abordando tópicos como a diferença em relação a outras métricas das Core Web Vitals e métodos para medir os resultados do seu site, com o objetivo de aprimorar seu desempenho atual. Vamos lá?

Core Web Vitals

Antes de tudo, vamos relembrar: o Core Web Vitals é um conjunto de métricas que avaliam a experiência real do usuário desde o desempenho de carregamento da página, à interatividade e à estabilidade visual.

Atualmente, o Core Web Vitals possui três métricas principais:

• Largest Contentful Paint (LCP): avalia o desempenho do carregamento. Aqui, entende-se que um site que oferece uma boa experiência ao usuário precisa carregar o maior elemento em até 2,5 segundos desde o início do carregamento da página;
• First Input Delay (FID): esta métrica avalia a interatividade (e será substituida pela INP). Até então, para oferecer uma boa experiência ao usuário, a FID deve ter menos de 100 milissegundos;
• Cumulative Layout Shift (CLS): avalia a estabilidade visual. Para oferecer uma boa experiência ao usuário, esta métrica precisa ser inferior a 0,1.

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

A Interaction to Next Paint (INP) é uma métrica que será adicionada em breve aos relatórios das Core Web Vitals do Google, com o objetivo de medir o tempo de resposta das páginas de um site.

A INP vai mostrar a velocidade com que a página se atualiza quando o visitante interage com ela — por exemplo, quando o visitante clica em um link ou em um botão.

Os dados de uso do Chrome mostram que 90% do tempo de um usuário em uma página é gasto após o carregamento. Por isso, é importante medir a capacidade de resposta com cuidado em todo o ciclo de vida da página. É isso que a métrica INP avalia. (…) O objetivo do INP é garantir que o tempo entre o início da interação de um usuário e a exibição do próximo frame seja o mais curto possível para todas ou a maioria das interações do usuário. Fonte: Google Web Dev

A métrica INP, portanto, é valiosa para entender e melhorar a capacidade de resposta de um site às ações dos usuários, contribuindo para uma experiência mais eficiente e satisfatória.

Como a Interaction to Next Paint (INP) Funciona?

Mais especificamente, INP se concentra na medição de atrasos no tempo de resposta da página. Isso permite aos desenvolvedores e proprietários de sites entenderem melhor a eficácia e a agilidade das respostas do site às interações dos usuários, com o objetivo de otimizar sua experiência.

Em resumo, funciona da seguinte forma:

1. O visitante interage com a página de um site, por exemplo, clicando em um botão;
2. O navegador do visitante envia uma solicitação ao servidor, solicitando o carregamento do novo conteúdo;
3. O servidor envia o novo conteúdo de volta ao navegador do visitante;
4. O navegador realiza a renderização do novo conteúdo na página;
5. O navegador mede o tempo necessário para renderizar o novo conteúdo, e essa informação é apresentada ao proprietário do site como a pontuação de INP;
6. Quando a pontuação de INP é baixa, isso indica que o navegador renderizou o novo conteúdo rapidamente, demonstrando alta responsividade da página às interações dos visitantes.

Como INP é calculado?

O Google anunciou que a partir de 2024, a métrica Interaction to Next Paint (INP) substituirá a métrica atual conhecida como First Input Delay (FID). Embora a INP e o FID tenham algumas semelhanças, elas medem aspectos distintos.

A FID foi uma das principais métricas da Web desde 2020, oferecendo uma nova maneira de medir a capacidade de resposta das páginas de um site sob o ponto de vista da experiência do usuário. Ou seja, foi criada para avaliar como “usuários reais” interagiam com as páginas e, assim, verificar o nível de qualidade para eles.

No entanto, a FID encontrou limitações, tendo em vista que só informa a capacidade de resposta da “primeira interação” do usuário com a página, medindo o atraso da primeira resposta (tempo que o nagevador precisou aguardar).

O FID avalia a velocidade de resposta da página apenas quando um visitante abre o site pela primeira vez. Por outro lado, a nova métrica INP medirá a velocidade de resposta após cada interação do visitante, durante todo o período em que ele permanece no site.

Portanto, a métrica INP é muito mais abrangente que a FID.

Como melhorar a pontuação de Interaction to Next Paint (INP) no seu site

Vamos agora destacar maneiras de aprimorar a pontuação de INP no seu site segundo as orientações do Google. É importante observar que a maioria dos métodos descritos requer algum conhecimento técnico. Antes de efetuar quaisquer alterações no seu site, certifique-se de realizar um backup dos seus arquivos.

1. Descubra o que está causando uma INP ruim

Se a INP está ruim ou precisa de melhorias (vide como o INP é calculado acima, neste artigo), você precisa de dados antes de partir para a ação de tentar corrigir as interações lentas. Com essas informações, você pode encontrar uma solução. Vamos a elas:

2. Encontrar interações lentas

O ideal é que você comece com os dados de campo para otimizar o INP. Os dados de campo de um provedor de monitoramento de usuários reais fornecem o valor de INP e também dados que destacam qual interação específica foi responsável pelo valor de INP em si. Com isso, é possível saber, ao menos, se a interação ocorreu durante ou após o carregamento da página e qual o tipo de interação a melhorar.

3. Otimizar interações

Depois de identificar uma interação lenta, a próxima etapa é a otimização. Essas interações podem ser divididas em três fases que, somadas, correspondem à latência total de interação:

1. O atraso de entrada, que inicia quando o usuário começa uma interação com a página e só termina quando os callbacks do evento da interação começam a ser executados;
2. O tempo de processamento, que significa o tempo para que os callbacks sejam executados até sua conclusão;
3. O atraso da apresentação, que é o tempo que o navegador leva para apresentar o próximo frame que contém o resultado visual da interação.

4. Identificar e reduzir o atraso de entrada

Os atrasos de entrada podem ser consideráveis devido a atividades que ocorrem na linha de execução principal como análise e compilação de scripts, processamento de busca, funções de timer ou apor outras interações que ocorrem em rápida sucessão e sobreposição entre si.

Seja qual for a origem do atraso de entrada de uma interação, reduza isso ao mínimo para que os callbacks de eventos sejam executados o mais rápido possível.

5. Evitar a troca frequente de layouts

A troca frequente de layouts, é um problema de renderização em que o layout ocorre de forma síncrona. Isso ocorre quando você atualiza estilos em JavaScript e os lê na mesma tarefa. Há várias propriedades no JavaScript que podem causar esse problema:

Todas as propriedades ou métodos abaixo, quando solicitados/chamados em JavaScript, acionarão o navegador para calcular de forma síncrona o estilo e o layout. Isso também é chamado de refluxo e é um gargalo de desempenho comum:

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth,elem.clientHeight
• elem.getClientRects(),elem.getBoundingClientRect()
• elem.scrollBy(),elem.scrollTo()
• elem.scrollIntoView(),elem.scrollIntoViewIfNeeded()
• elem.scrollWidth,elem.scrollHeight
• elem.scrollLeft, elem.scroll
• elem.focus()
• elem.computedRole,elem.computedName
• elem.innerText
• window.scrollX,window.scrollY
• window.innerHeight,window.innerWidth
• window.visualViewport.height/largura/offsetTop/offsetLeft
• document.scrollingElement
• document.elementFromPoint
• inputElem.focus()
• inputElem.select(),textareaElem.select()
• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY
• window.getComputedStyle()
• window.getComputedStyle()
• range.getClientRects(),range.getBoundingClientRect()
• SVGLocalizável: computeCTM(),getBBox()
• SVGTextConteúdo: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(),selectSubString()

A lista completa e mais informações sobre os itens acima podem ser vistas aqui (Github).

6. Otimização da execução do JavaScript

O JavaScript é um componente fundamental em muitas páginas de site, permitindo a incorporação de elementos interativos. No entanto, ele também pode impactar negativamente o desempenho da página.

Quando o JavaScript é executado, ele é processado na thread principal, que é responsável pela renderização das páginas. Se o código JavaScript for ineficiente, pode bloquear a thread e impedir que a página responda às interações dos visitantes.

Para melhorar a responsividade da sua página, é fundamental otimizar o JavaScript. Isso pode ser feito de várias maneiras:

• Minificação de arquivos JavaScript: Reduza o tamanho dos arquivos JavaScript para acelerar o carregamento;
• Ativação da compactação GZip: Este método reduz o tamanho dos arquivos e dados do site;
• Uso de um framework JavaScript: Frameworks como AngularJS e jQuery podem ajudar a organizar e otimizar o código JavaScript;
• Utilização de uma Rede de Distribuição de Conteúdo (CDN): As CDNs armazenam arquivos JavaScript em servidores próximos ao público-alvo, melhorando o tempo de carregamento das páginas.

7. Divida processos longos em tarefas menores

Dividir tarefas extensas de JavaScript em tarefas menores é uma estratégia eficaz para evitar o bloqueio da thread principal do navegador.

Considere um exemplo: um visitante está explorando as páginas de uma loja virtual. Se as tarefas longas de JavaScript não forem divididas, a thread principal será sobrecarregada, tendo que buscar, processar e renderizar grandes volumes de dados e imagens de produtos simultaneamente. Isso consome tempo e recursos significativos.

Durante esse processo, a thread principal fica ocupada, resultando em um carregamento lento e na incapacidade de responder à próxima interação do usuário. Ao dividir essas tarefas longas em tarefas menores, o navegador pode lidar com elas de forma sequencial, garantindo que a thread principal fique desocupada para priorizar tarefas mais críticas.

Existem dois métodos principais para dividir tarefas longas em tarefas menores:

• setTimeout: Esta função nativa do JavaScript permite programar a execução de tarefas após um atraso específico em milissegundos, evitando que a thread principal seja bloqueada por um longo período.
• requestIdleCallback: Esta API oferece uma abordagem mais eficiente, assegurando que funções sejam executadas durante períodos ociosos e permitindo o controle do prazo para a conclusão da tarefa, sem prejudicar processos críticos.

8. Priorize a agilidade de resposta do site

A agilidade de resposta, também conhecida como “input readiness”, descreve o estado de uma página quando ela está pronta para responder às interações do usuário. Isso ocorre quando a thread principal do navegador não está ocupada com outras tarefas.

Aqui estão estratégias para priorizar a agilidade de resposta nas páginas e, consequentemente, aprimorar a INP:

• Adiar tarefas de JavaScript não essenciais: Algumas tarefas de JavaScript não são críticas para o carregamento inicial da página e podem ser adiadas para execução após o carregamento do conteúdo principal. Isso permite que a thread principal dê prioridade às interações do usuário, melhorando a capacidade geral de resposta da página.
• Throttling: Esta técnica controla a frequência de execução de uma função. Por exemplo, quando os visitantes rolam a página, a mesma função pode ser acionada várias vezes por segundo. O throttling garante que a função seja executada com menos frequência, como uma vez a cada milissegundo, independentemente de quantas vezes o evento seja acionado.
• Debounce: O debounce garante um período de espera entre duas execuções da mesma função. Por exemplo, quando os visitantes redimensionam a janela do navegador, essa ação pode acionar o mesmo processo repetidamente. O debounce atrasa a execução da função até que tenha ocorrido um intervalo específico após a conclusão do redimensionamento.
• Utilização de Listeners de Eventos (Passivos): Os listeners são construções de programação que identificam eventos, como rolagens de página e toques. Quando um listener é configurado como passivo, ele instrui o navegador a continuar processando outras tarefas enquanto uma função específica está em execução.

6 motivos para manter o WordPress atualizado (a começar pela segurança)

5. Informe ao usuário que a ação está sendo processada enquanto ele aguarda

É comum que um site leve um tempo para responder a certas interações do usuário, o que pode fazer com que o visitante pense que a página parou de funcionar. Nesse contexto, é essencial comunicar ao visitante que a página está ativa e que a ação solicitada está em processo.

Uma abordagem eficaz é exibir uma mensagem na tela, como “Aguarde, por favor” ou “Estamos processando sua solicitação”. Essa informação imediata tranquiliza o usuário, indicando que a página recebeu a solicitação e que o processamento está em andamento.

Surpreendentemente, a exibição desse tipo de mensagem pode criar a percepção de que o site é mais ágil, mesmo que a mensagem em si não reduza o tempo real de processamento.

Aqui estão algumas maneiras de mostrar ao visitante que a solicitação está sendo processada:

• Indicadores de Carregamento: Você pode utilizar um indicador de carregamento, como um spinner (o círculo que gira enquanto aguardamos o carregamento de uma página ou vídeo) ou uma barra de progresso. Isso funciona especialmente bem quando o usuário está à espera de ser redirecionado para outra página ou aguarda o carregamento de conteúdo de mídia.
• Pop-ups de Confirmação de Ação: Se a ação solicitada pelo visitante envolve, por exemplo, a adição de um produto ao carrinho, é uma boa prática exibir uma mensagem na tela confirmando que a ação foi concluída com sucesso.
• Avisos de Erro em Formulários: Quando um usuário está preenchendo um formulário, é benéfico mostrar avisos de erro imediatamente. Por exemplo, se o usuário insere um endereço de e-mail no formato incorreto, a página deve exibir uma mensagem de erro à medida que ele digita as informações, em vez de esperar até que o formulário seja enviado. Isso proporciona feedback imediato e melhora a experiência do usuário.

Essas estratégias ajudam a manter os visitantes informados sobre o andamento das ações que eles desencadearam, reduzindo a frustração e melhorando a impressão geral da velocidade do site.

Concluindo, melhorar a métrica Interaction to Next Paint (INP) é crucial para proporcionar uma experiência positiva aos visitantes do site, melhorar a classificação nos resultados de pesquisa e alcançar um desempenho web excepcional.

Portanto, a compreensão e a implementação adequada dessa métrica são essenciais para proprietários de sites que desejam atender às expectativas dos usuários e atingir seus objetivos de tráfego e conversão.

Gostou deste artigo? Deixe-nos a sua opinião nos comentários! Não esqueça de se inscrever na nossa newsletter gratuita para receber conteúdos que te manterão sempre atualizado sobre marketing e SEO.