Conheça a INP (Interaction to Next Paint), métrica das Core Web Vitals

Por Omar Montellato | Julho 29, 2023

O que é Link Building e por que é importante?

INP a novidade do Google que será implementada em definitivo em 2024 e substituirá a FID

Você já ouviu falar da INP - Interaction to Next Paint? Essa é uma nova métrica que o Google vai usar para avaliar a experiência do usuário em uma página web. Ela faz parte do relatório de Core Web Vitals do Google Search Console e vai substituir a FID - First Input Delay em março de 2024. Neste artigo, vou explicar o que é a INP, como ela funciona e como você pode otimizá-la para melhorar o desempenho do seu site.

O que é a INP?

A INP é uma métrica que mede o tempo entre uma interação do usuário e a próxima pintura da tela. Uma interação é qualquer clique, toque ou tecla pressionada em um elemento interativo da página, como um botão, um link, um menu ou um formulário. A próxima pintura é o momento em que o navegador apresenta algum feedback visual para o usuário, como uma mudança de cor, uma animação ou uma atualização de conteúdo.

A INP é uma medida de responsividade, ou seja, de quão rápido o site responde às ações do usuário. Uma boa responsividade significa que o site fornece um feedback visual imediato ou quase imediato para todas ou a maioria das interações do usuário. Uma má responsividade significa que o site demora muito para reagir às interações do usuário, causando uma impressão de lentidão ou travamento.

Qual a diferença entre INP e FID?

A INP é diferente da FID porque ela leva em conta todas as interações do usuário durante a visita à página, e não apenas a primeira. Além disso, ela usa dados tanto de laboratório quanto de campo, ou seja, tanto de testes simulados quanto de usuários reais. A INP também usa uma abordagem estatística para reportar um único valor que representa a pior interação da página.

A FID é uma métrica que mede o tempo entre o primeiro evento de interação do usuário e o tempo em que o navegador começa a processá-lo. Ela usa apenas dados de campo, ou seja, de usuários reais. A FID reporta um valor médio de todos os eventos de primeira interação da página.

A INP é considerada uma métrica mais abrangente e precisa do que a FID, pois ela reflete melhor a experiência do usuário ao longo de toda a visita à página, e não apenas no início. Ela também leva em conta o tempo até a próxima pintura, que é o momento em que o usuário recebe um feedback visual da sua interação.

Como otimizar a INP?

Para otimizar a INP, você precisa reduzir o tempo de processamento e o tempo até a próxima pintura dos eventos de interação da sua página. Isso significa que você precisa melhorar tanto o desempenho do seu código Java Script quanto o desempenho do seu navegador.

Algumas dicas para melhorar o desempenho do seu código Java Script são:

Usar menos código JavaScript ou dividir o código em partes menores e carregá-las sob demanda.

Usar técnicas de otimização de código, como compressão e eliminação de código morto.

Usar web workers ou service workers para executar tarefas pesadas em segundo plano sem bloquear a thread principal.

Usar requestAnimationFrame ou requestIdleCallback para agendar tarefas não críticas para momentos em que o navegador está ocioso.

Usar passive event listeners para evitar que os eventos bloqueiem a rolagem da página.

Usar debouncing ou throttling para limitar a frequência com que os eventos são disparados.

Algumas dicas para melhorar o desempenho do seu navegador são:

Usar menos recursos externos ou carregá-los de forma assíncrona ou adiada.

Usar técnicas de otimização de recursos, como cache, pré-carregamento e pré-conexão.

Usar técnicas de otimização de imagens, como compressão, redimensionamento e lazy loading.

Usar técnicas de otimização de CSS, como reduzir a complexidade dos seletores, eliminar regras desnecessárias e usar propriedades que não causam reflow ou repaint.

Usar técnicas de otimização de HTML, como reduzir o tamanho do documento, eliminar elementos desnecessários e usar elementos semânticos.

Como medir a INP?

Você pode medir a INP usando ferramentas como o Google PageSpeed Insights, o Google Lighthouse, o Google Search Console ou o Google Chrome DevTools. Essas ferramentas podem fornecer dados tanto de laboratório quanto de campo sobre a INP da sua página, além de sugestões de como melhorá-la.

O Google PageSpeed Insights é uma ferramenta online que analisa o desempenho da sua página e fornece um relatório com as métricas de Core Web Vitals, incluindo a INP. Você pode acessar essa ferramenta pelo link https://developers.google.com/speed/pagespeed/insights/ e digitar o endereço da sua página no campo indicado.

O Google Lighthouse é uma ferramenta integrada ao Google Chrome DevTools que permite realizar auditorias de desempenho, acessibilidade, SEO e qualidade da sua página. Você pode acessar essa ferramenta pelo menu do Google Chrome (três pontos verticais no canto superior direito) > Mais ferramentas > Ferramentas do desenvolvedor > Aba Lighthouse. Você pode selecionar as categorias que deseja auditar e clicar em Gerar relatório.

O Google Search Console é uma ferramenta online que permite monitorar e gerenciar a presença da sua página nos resultados de pesquisa do Google. Você pode acessar essa ferramenta pelo link https://search.google.com/search-console/ e verificar as métricas de Core Web Vitals na seção Experiência na Web > Relatórios principais da Web.

O Google Chrome DevTools é um conjunto de ferramentas integradas ao navegador Google Chrome que permite inspecionar e depurar a sua página. Você pode acessar essas ferramentas pelo menu do Google Chrome (três pontos verticais no canto superior direito) > Mais ferramentas > Ferramentas do desenvolvedor. Você pode usar a aba Performance para gravar e analisar o desempenho da sua página, incluindo os eventos de interação e as pinturas da tela.

A INP é calculada usando a seguinte fórmula:

INP = max(tempo de processamento + tempo até a próxima pintura)

Ou seja, a INP é o maior valor entre todos os eventos de interação da página, somando o tempo de processamento e o tempo até a próxima pintura.

Na escala divulgada pelo Google, podemos considerar:

Um valor de INP abaixo de 200 milissegundos: bom

Um valor de INP entre 200 e 500 milissegundos: precisa de melhorias

Um valor de INP acima de 500 milissegundos: ruim.

Melhorando a performance e o INP do seu site

Existem diversas práticas de otimização que podem ajudar a melhorar a performance do seu site e reduzir o INP.
Mesmo não tendo algo específico para reduzir o Interaction to Next Paint, algumas práticas de otimização podem ajudar em um melhoramento dele.

Aqui estão algumas dicas:

Hospedagem de Sites: Escolha uma hospedagem de sites confiável, que ofereça um servidor com baixo delay e alta performance.

Otimização de Imagens: Faça a compactação e redimensionamento adequados das imagens do seu site. Imagens pesadas podem impactar negativamente o tempo de resposta. Utilize ferramentas de compressão de imagens para otimizá-las sem comprometer a qualidade visual. Uma prática bem recomendada é usar arquivos webp para imagens pois são melhores carregadas pelos navegadores e também são mais leves.

Compressão de Códigos: Comprima o CSS, JS e HTML do seu site para reduzir o tamanho dos arquivos e acelerar o tempo de carregamento. Existem plugins e ferramentas disponíveis para automatizar esse processo.

Mantenha-se atualizado e esteja um passo à frente para garantir que seu site esteja preparado para os desafios de performance que o INP pode trazer.

Espero que este artigo tenha sido útil para você entender o que é a INP e como otimizá-la.
Se você gostou deste conteúdo, compartilhe com seus amigos.