Interação com a próxima pintura: o que é e como fazer?

Você já experimentou um site ou aplicativo lento e sem resposta?

Talvez você tenha clicado em um botão e demorado muito para que algo aparecesse na tela. Essa é uma experiência frustrante, certo?

É exatamente disso que se trata “Interação com o próximo Paint” (INP).

A interação com o próximo Paint (INP) é uma métrica emergente que o Google usa para avaliar a rapidez com que seu site responde às entradas do usuário. Em 12 de março de 2024, tornou-se um dos critérios Core Web Vitals que impactam as classificações do Google.

Por que isso importa?

Na era digital de hoje, as pessoas esperam que as coisas aconteçam instantaneamente. Se um site ou aplicativo não responder rapidamente às suas ações, você provavelmente ficará insatisfeito e desistirá. Ninguém tem tempo para aplicativos lentos hoje em dia!

Otimizar o INP é crucial para fornecer uma experiência de usuário agradável e contínua que mantenha os usuários engajados e satisfeitos. Quanto menor o INP, maior será o desempenho percebido do seu site ou aplicativo.

Vamos examinar o INP em profundidade e explorar como medi-lo para melhorar sua pontuação existente.

O que é interação com a próxima pintura (INP)?

Interação com a próxima pintura (INP) é uma métrica de desempenho da web que conta o tempo entre uma interação do usuário (como um clique, toque ou rolagem) e a próxima vez que os pixels são pintados na tela como resultado dessa interação.

Em termos simples, o INP mede a rapidez com que uma página web ou aplicação responde visivelmente à interação do utilizador. Um número INP mais baixo indica uma experiência mais responsiva, enquanto um valor INP mais alto indica um atraso perceptível entre a ação do usuário e a atualização visual na tela.

Para a maioria das interações do usuário, o valor INP sugerido é inferior a 200 milissegundos (ms). Um valor INP superior a 300 ms é considerado fraco e será visto como lento pelos utilizadores

Interação com o Next Paint como um Core Web Vital

A interação com o Next Paint foi introduzida como uma das três métricas do Google Core Web Vitals em 12 de março de 2024. Ela substituiu a métrica anterior do First Input Delay.

Como uma métrica Core Web Vitals, a baixa interação com o Next Paint pode influenciar suas classificações de pesquisa no Google.

Como a interação com a próxima pintura difere do atraso da primeira entrada?

INP é a medida sucessora do First Input Delay (FID). Ambas são métricas de capacidade de resposta.

FID e INP variam de duas maneiras:

• O FID mede apenas o primeiro atraso de processamento, enquanto o INP mede todo o período de tempo entre a entrada do usuário e a atualização da IU.
• O FID simplesmente conta a interação inicial do usuário em uma página, mas o INP considera (aproximadamente) a maior latência.

O First Input Delay estima quanto tempo leva para o navegador começar a processar a entrada do usuário. O tempo real gasto respondendo a eventos ou alterando a interface do usuário não está incluído.

Como o nome indica, o FID analisa apenas a interação inicial do usuário com o site. Este contato inicial pode não refletir com precisão a experiência geral do usuário, principalmente para sites que permanecem abertos por um longo período, como aplicativos de página única.

A interação com o Next Paint normalmente avalia a pior latência de entrada na página. No entanto, se houver muitos encontros com usuários, os valores discrepantes serão descartados e o Google avaliará o percentil 98 para atraso na interação.

Portanto, se o INP de uma página for de 250 milissegundos, 2% das interações do usuário tiveram latência maior que isso.

Como funciona a interação com o próximo Paint (INP)?

INP é uma métrica de capacidade de resposta que se concentra no tempo decorrido entre as interações do usuário. Ele mede a rapidez com que um elemento de uma página web responde quando uma ação específica é executada nele.

Veja como funciona o INP:

• Um usuário interage com uma página da web clicando em um botão.
• O navegador solicita novo conteúdo do servidor web.
• O servidor web entrega conteúdo novo ao navegador.
• O navegador exibe o novo conteúdo da página.
• O navegador calcula o tempo necessário para criar o novo conteúdo e reporta-o como pontuação INP.

Uma classificação INP baixa indica que a página responde extremamente às entradas do usuário. Como parte do Core Web Vitals, o INP é significativo pelos seguintes motivos:

• Melhorou a experiência do usuário:Uma pontuação INP alta indica que os visitantes devem esperar muito tempo para que a página web responda às suas atividades, o que pode ser irritante.

• SEO (Otimização para Mecanismos de Busca):O INP e outros Core Web Vitals fazem parte dos sinais de experiência da página do Google, que influenciam a classificação de um site nas páginas de resultados de pesquisa. Isto sublinha a importância do INPMétrica de SEO.

• Reduza a taxa de rejeição:Tempos de carregamento lentos podem fazer com que os clientes saiam da página, reduzindo os resultados financeiros da sua empresa.

Como o INP é medido?

O INP monitora o tempo que passa entre a entrada do usuário, como cliques e pressionamentos de teclas, e a próxima atualização da IU. Este atraso tem três componentes:

um. Atraso de entrada

Aguardando operações em segundo plano no site para impedir a execução do manipulador de eventos.

b. Tempo de processamento

Executando manipuladores de eventos em JavaScript.

c. Atraso na apresentação

Lidar com outras operações pendentes, recalcular o layout da página e pintar o conteúdo da página. Os INPs são medidos em milissegundos (ms). Um bom benchmark é inferior a 200 ms, e qualquer valor entre isso e 500 ms é considerado que precisa de melhorias. Uma latência de 500 ms ou superior é considerada ruim.

Diversas variáveis ​​podem influenciar um valor INP, incluindo o tamanho e a complexidade de uma página web, bem como o número de arquivos JavaScript e CSS carregados.

Você pode usar muitas ferramentas para avaliar a interação com a próxima pintura, como:

• Teste de velocidade do site do DebugBear
• Informações sobre velocidade de página do Google
• Nossa extensão do Chrome para velocidade do site
• Depurador INP
• Google Search Console
• A Biblioteca Web Vitals

As ferramentas de teste de velocidade do site podem ajudá-lo a determinar o valor INP de um site. Esse tipo de aplicativo pode fornecer informações sobre o desempenho de suas métricas Core Web Vitals e oferecer orientação sobre como otimizá-las.

Google PageSpeed ​​​​Insights é uma ferramenta popular para análise de INP edesempenho do site. Ele avaliará um site e fará recomendações sobre as melhores práticas a serem aplicadas. Você também pode examinar a velocidade de carregamento do seu site em dispositivos móveis e desktop.

O PageSpeed ​​​​Insights apresenta dois tipos de descobertas. A parte superior exibe as métricas Core Web Vitals de um site do relatório Chrome UX, uma coleção de métricas de desempenho do mundo real de usuários do Chrome.

Os valores mostrados no relatório abaixo são de uma configuração de laboratório controlada que usa o Google Lighthouse. Esses dados podem ser usados ​​para testar novos recursos antes de serem lançados.

Se os dados INP do site não estiverem disponíveis, verifique seu Tempo Total de Bloqueio (TBT). Esta métrica avalia uma nova forma de capacidade de resposta. Ele se concentra em quanto tempo um site não consegue responder à interação do usuário durante o carregamento.

Na parte inferior, há ideias sobre como aprimorar as métricas Core Web Vitals, como segue:

Como otimizar a interação com a próxima pintura (INP)?

Portanto, para otimizar o INP, você deseja simplificar e priorizar ao máximo a lista de tarefas do thread principal. Aqui estão algumas estratégias e maneiras principais de otimizar para melhorar os valores de interação com a próxima pintura (INP) e aumentar a capacidade de resposta:

um. Melhore o desempenho do JavaScript

JavaScripté um componente chave de muitos sites. Oferece muitos elementos interativos; no entanto, também pode diminuir a velocidade do site.

Quando o JavaScript é executado, ele é executado no thread principal, responsável por renderizar uma página web. Se o código for ineficiente, o thread poderá parar e impedir que o site responda à entrada do usuário.

Para melhorar a capacidade de resposta, otimize seu JavaScript. Você pode conseguir isso:

• Minimizando arquivos JavaScriptreduz a quantidade de JavaScript, permitindo carregar maisrapidamente.

• Ative a compactação GZip.Outra forma comum de compactar arquivos e dados de sites.

• Usando uma estrutura JavaScript.Esta ferramenta pode ajudá-lo a organizar seu código JavaScript e torná-lo mais eficiente. AngularJS e jQuery são exemplos bem conhecidos.

• Usando CDN.Essa tecnologia, conhecida como rede de entrega de conteúdo, distribuirá seus arquivos JavaScript de servidores localizados próximos ao seu público-alvo, resultando em tempos de carregamento mais rápidos.

JavaScript ineficiente pode bloquear o thread principal, causando atrasos na renderização. Divisão de código, carregamento lento, uso de web workers e evitar operações de longa execução no thread principal são opções para diminuir o atraso do JavaScript.

b. Use trabalhadores da Web

Web Workers são um serviço que permite que o JavaScript seja executado independentemente do thread principal. Eles são úteis para executar tarefas complicadas em segundo plano.

Suponha que você tenha um site WordPress carregado com fotos, vídeos e dados. Os trabalhadores da Web podem transferir essas caras operações JavaScript para um thread em segundo plano, evitando que sua interface fique paralisada.

Outra maneira de evitar o atraso do thread principal é dividir grandes trabalhos de JavaScript em trabalhos menores.

c. Dividindo tarefas longas

Dividir tarefas grandes permite que o navegador da Web as lide em partes menores de cada vez. Como resultado, o thread principal fica livre para realizar tarefas mais importantes.

Como você sabe, tarefas demoradas bloqueiam o thread principal, impedindo que o navegador execute eventos de interação. Paramelhore a capacidade de resposta do seu site, reduza a pressão no thread principal e tente dividir grandes operações.

Ao dividir atividades grandes em partes menores, o thread principal pode realizar outras tarefas e responder às interações do usuário mais rapidamente.

Além disso, dividir tarefas longas ajuda a minimizar o efeito “jank”, no qual as animações e transições no site ficam irregulares ou gaguejam devidopara um thread principal sobrecarregado. Ao garantir que cada atividade seja concluída em um prazo mais curto, o site pode fornecer uma experiência visual mais integrada para o usuário.

d. Priorizar a prontidão de entrada

A prontidão de entrada refere-se à capacidade de uma página da web de responder à interação do usuário. Quando não está, normalmente significa que o thread principal do navegador está ocupado com outras tarefas.

Veja como priorizar a prontidão de entrada e aumentar o INP:

1. JavaScript não crítico será adiado

Algum JavaScript não é necessário para o carregamento inicial da página e pode ser executado após o principalconteúdo. Isso permite que o thread principal priorize as interações do usuário e aumente a capacidade de resposta geral da página.

2. Estrangulamento

Esta estratégia determina a frequência com que uma função é executada. Por exemplo, à medida que um usuário rola para baixo, o mesmo código pode ser executado centenas de vezes por segundo. A limitação permite que ele seja executado apenas uma vez por milissegundo, independentemente de quantas vezes o evento for acionado.

3. Debate

Isso proíbe que uma função seja executada novamente até que um determinado período tenha passado. Por exemplo, quando os usuários redimensionam a janela do navegador, esse evento pode iniciar o mesmo procedimento várias vezes. O debouncing pode ser usado para adiar a execução até que o usuário pare de redimensionar por um período predeterminado.

4. Ouvintes de eventos que não participam ativamente

Ouvintes de eventos são construções de computador que detectam determinados eventos, como rolagem e toque. Torná-los passivos instrui o navegador a pular a espera pela conclusão de uma função específica e, em vez disso, prosseguir com outras atividades.

e. Fornecer feedback imediato

Certas atividades, como o preenchimento de um formulário com diversas entradas de dados, podem resultar em grandes atrasos nas respostas.

É aí que entra o feedback instantâneo. Essa estratégia fornece aos clientes uma indicação visível de que o site recebeu e está processando sua solicitação.

Os usuários não ficarão se perguntando se o site registrou suas contribuições se receberem um feedback rápido. Pode dar a impressão de desempenho mais rápido, mesmo que na verdade não reduza o tempo de processamento.

Confira estes exemplos de dicas de feedback rápido:

1. Indicadores de carga

Exiba um botão giratório ou uma barra de progresso quando um processo estiver em execução, especialmente ao apresentar dados ou mudar para uma nova página.

2. Mensagens pop-up de confirmação

É uma boa ideia exibir uma mensagem confirmando que uma operação, como adicionar um item ao carrinho, foi concluída com sucesso.

3. Validação dos campos do formulário

Por exemplo, se um usuário inserir um endereço de e-mail formado incorretamente, exiba um aviso de erro imediatamente, em vez de esperar até que o formulário seja enviado.

Conclusão

No final do dia, apresentando umótima experiência do usuáriona web se resume a uma coisa: capacidade de resposta. A velocidade com que seu site ou aplicativo responde aos eventos do usuário, como cliques, toques e navegação, pode determinar se é uma experiência agradável ou frustrantemente lenta.

É por isso que otimizar o tempo de interação com a próxima pintura (INP) é tão importante. O INP monitora os minutos importantes entre o momento em que alguém interage com seu site e o momento em que recebe a confirmação visual em sua tela. Quanto menor o INP, mais rápido e responsivo tudo parece.

Então vá em frente e desbloqueie o poder do INP otimizado!

Descubra a capacidade de resposta rápida que distingue os sites comuns daqueles que parecem luxuosamente rápidos e suaves. A satisfação dos seus usuários e o sucesso das suas experiências digitais dependem disso.

Perguntas frequentes