O Core Web Vitals do Google está mudando. Este conjunto de métricas, introduzido pela primeira vez em 2021 para medir a experiência do usuário, está recebendo sem dúvida a maior atualização desde o seu lançamento.
Especificamente, o Google está substituindo o First Input Delay (FID) por Interaction to Next Paint (INP) em março de 2024.
Então, o que é Interaction to Next Paint, como ele se compara ao FID e como você pode melhorá-lo? Neste post vou revelar tudo.
Se você estiver pronto para melhorar a experiência do usuário do seu site , vamos começar.
O que é interação com a próxima pintura (INP)?
Pesquisando “INP significado?” Você provavelmente não está sozinho. Vamos começar definindo exatamente o que é essa nova métrica e como ela funciona.
Interaction to Next Paint (INP) é uma métrica de capacidade de resposta do Google que mede a rapidez com que sua página responde à entrada humana. Especificamente, ele mede a quantidade de tempo que decorre entre a entrada de um usuário (ele clica em um botão, por exemplo) e quando o conteúdo da página é atualizado.
Ou, se você estiver procurando a definição do Google :
“O INP avalia a capacidade de resposta usando dados da API Event Timing. Quando uma interação faz com que uma página pare de responder, isso é uma experiência ruim para o usuário. O INP observa a latência de todas as interações que um usuário fez com a página e relata um único valor que todas (ou quase todas) as interações estavam abaixo. Um INP baixo significa que a página foi consistentemente capaz de responder rapidamente a todas – ou à grande maioria – das interações do usuário.”
O Google entende que algumas interações demoram mais para carregar do que outras, especialmente as complexas. Mas isso não significa necessariamente uma experiência ruim para o usuário. O INP, portanto, não mede o tempo de resposta de toda a interação, mas o tempo de resposta até que seu site forneça alguma forma de feedback visual (como um menu suspenso ou um ícone de carregamento aparecendo). Você não precisa completar a interação completamente, apenas provar que o processo está em andamento.
É importante que todos os sites tenham uma boa pontuação INP, mas é particularmente importante para sites interativos, como plataformas de mídia social e lojas de comércio eletrônico . Um INP ruim cria uma experiência ruim para o usuário que pode levar a uma taxa de rejeição mais alta e, em última análise, à perda de receita.
Definindo Interações
Para compreender como funciona o INP e medi-lo correctamente, precisamos de compreender o que significa uma “interacção”.
O Google define uma interação como um grupo de eventos que ocorrem durante “o mesmo gesto lógico do usuário”.
Em outras palavras, não é apenas um único evento. Tocar em um botão em um dispositivo com tela sensível ao toque, por exemplo, pode incluir vários eventos, incluindo eventos de ponteiro para cima (quando o mouse não está ativo) e ponteiro para baixo (quando o mouse clica em um botão), todos agrupados em um. O Google conta o evento com maior duração como a latência da interação.
Quando se trata de medir o INP, o Google observa apenas as seguintes interações:
Clique com um mouse
Tocar em uma tela sensível ao toque
Pressionando uma tecla em um teclado
O Google mede três componentes para fornecer uma pontuação INP: o atraso de entrada, o tempo de processamento e o atraso de apresentação.
O atraso de entrada é o tempo entre o clique do usuário em um botão e a obtenção de uma resposta visual do botão. Dependendo da quantidade de código que seu site está executando, isso pode levar de alguns a cem milissegundos.
O tempo de processamento é o tempo necessário para executar o código em resposta à interação de um usuário. Isso pode levar milissegundos se apenas pequenas alterações forem feitas.
O atraso na apresentação é o tempo que seu navegador gasta pensando onde o novo conteúdo deve aparecer. Esse período de tempo pode variar significativamente dependendo da complexidade do seu site.
Comparando FID com INP
Caso você tenha perdido na introdução, Interaction to Next Paint está substituindo o First Input Delay (FID).
O FID também é uma medida da capacidade de resposta do seu site, mas mede apenas a primeira interação do usuário e apenas o atraso até que o evento seja tratado, e não até que o usuário veja os resultados.
Isso é diferente do Interaction to Next Paint, que mede o atraso de cada interação que um usuário tem com uma página.
O que é uma boa pontuação INP?
O Google oferece algumas orientações sobre o que constitui uma boa pontuação INP.
Em primeiro lugar, o Google reconhece que é difícil definir a capacidade de resposta como boa ou ruim quando existe tanta variabilidade nas capacidades do dispositivo de um usuário. É por isso que eles recomendam usar como guia o percentil 75 de carregamento de páginas em dispositivos móveis e desktop.
Quanto aos seus tempos de atraso:
Se o seu INP for igual ou inferior a 200 milissegundos, sua página terá boa capacidade de resposta.
Se o INP estiver entre 200 milissegundos e 500 milissegundos, a capacidade de resposta da sua página precisa ser melhorada.
Se o INP estiver acima de 500 milissegundos, sua página terá baixa capacidade de resposta.
Por que o Google está mudando para o INP?
O INP substituirá o FID como uma das três métricas Core Web Vitals do Google em março de 2024. As outras duas métricas são Largest Contentful Paint (uma medida de quão rápido o conteúdo principal de uma página aparece) e Cumulative Layout Shift (uma medida de se o o layout da página fica estável após o carregamento).
O Google afirma que os dados de uso do Chrome mostram que a grande maioria (90%) do tempo de um usuário em uma página é gasto após o carregamento. Isso significa que não adianta apenas medir o atraso até o primeiro evento em uma página (FID); precisamos medir o atraso de cada interação realizada (INP).
Resumindo, o FID não era tão bom em identificar experiências ruins do usuário porque parou de medir atrasos.
ATENÇÃO - DAQUI PARA FRENTE O TEXTO É DIRECIONADO A ESPECIALISTAS
Como otimizar o INP
Dada a importância do Core Web Vitals para a experiência do usuário e SEO , é importante medir e melhorar o INP do seu site. Veja como recomendo fazer isso:
1. Meça seu INP
O primeiro passo para otimizar o INP é medir o desempenho do seu site. É melhor fazer isso em campo, usando dados de visitantes reais do site. O uso de dados de campo não fornecerá apenas uma medida do seu INP; também fornecerá informações contextuais sobre qual interação foi responsável pelo atraso.
O Relatório UX do Chrome é uma das maneiras mais rápidas e fáceis de obter dados de campo, desde que seu site esteja qualificado. Caso contrário, você pode usar um provedor de monitoramento de usuário real (RUM) como Pingdom ou Raygun para gerar dados de campo.
Se você não tiver tempo ou orçamento para coletar dados de campo, recomendo usar a ferramenta PageSpeed Insights . A grande vantagem do PageSpeed Insights é que ele usa dados de campo coletados pelo Google e dados do Lab para medir seu INP.
Basta inserir seu URL, pressionar Enter e você verá uma pontuação INP
2. Otimize as interações
Conforme discuti, cada interação pode ser dividida em três estágios diferentes:
O atraso de entrada
O tempo de processamento
O atraso na apresentação
Como cada estágio de uma interação contribui para o atraso, você pode otimizar seu INP reduzindo o processamento da CPU necessário em cada estágio.
Otimizando o atraso de entrada
Existem algumas estratégias que você pode usar para reduzir o tempo necessário para registrar uma entrada.
Otimizar o JavaScript é o primeiro. A execução lenta do JavaScript pode causar atrasos na entrada, mas você pode corrigir isso minimizando os arquivos JavaScript, ativando a compactação GZip, usando uma estrutura JavaScript como jQuery e usando uma Content Delivery Network ( CDN ) para entregar arquivos JavaScript de um servidor mais próximo do seu público. .
Minimizar a atividade do thread é o segundo. Quando há muita atividade em sua página (imagens, vídeos, etc.), isso pode atrasar a capacidade de resposta da entrada. Mas você pode usar um web trabalhador para executar de forma independente, fora do thread principal do seu site.
Evitar a sobreposição de interações é outra estratégia que você pode usar para reduzir o atraso de entrada. A sobreposição de interação acontece quando um visitante interage com um elemento e depois com outro elemento antes que a interação inicial seja renderizada. É uma ocorrência comum quando os usuários digitam em campos de formulário com sugestão automática.
Corrija o problema eliminando as entradas para que os retornos de chamada sejam reduzidos e usando AbortController para cancelar solicitações de busca de saída.
Otimizando o tempo de processamento
Você pode otimizar o tempo de processamento de suas interações fazendo com que os retornos de chamada de eventos (os processos executados em resposta a uma entrada do usuário) façam o mínimo de trabalho possível. Sempre que possível, exclua completamente os retornos de chamada de eventos desnecessários.
Quando os retornos de chamada forem necessários, divida o trabalho envolvido em tarefas separadas e certifique-se de que apenas os processos essenciais necessários para atualizações visuais sejam executados primeiro. A melhor maneira de fazer isso é usar setTimeout para executar retornos de chamada em uma tarefa separada. Se você não tem certeza de como fazer isso na prática, o Google tem um guia detalhado para otimizar tarefas longas .
Otimizando o atraso na apresentação
Reduzir o tamanho do DOM é uma forma eficaz de acelerar a velocidade de apresentação. DOM ou Document Object Model conecta páginas da web a scripts e linguagens de programação. Quando os tamanhos do DOM são pequenos, os eventos são renderizados rapidamente. Quando os tamanhos do DOM são grandes, a renderização demora muito mais.
Você pode reduzir o tamanho do DOM de várias maneiras:
Remova códigos e plug-ins inchados
Evite usar construtores de páginas
Transforme um site de uma página em várias páginas
Evite declarações CSS complexas
Você deseja atingir uma profundidade de DOM de no máximo 1.400 nós.
Perguntas frequentes sobre INP
Como otimizar para INP?Você pode otimizar a interação com a próxima pintura (INP) reduzindo o atraso de entrada, o tempo de processamento ou o atraso de apresentação da interação. Isso pode ser feito minimizando e otimizando arquivos JavaScript, reduzindo tamanhos de DOM e adicionando dicas de feedback imediato.
Onde encontrar métricas INP?Como a Interaction to Next Paint (INP) em breve fará parte do Core Web Vitals, você pode encontrar métricas relevantes usando a ferramenta PageSpeed Insights do Google. Basta inserir seu URL e você obterá o tempo em milissegundos que é o seu INP.
O que é uma pontuação INP “boa”?Uma boa pontuação INP de acordo com o Google é igual ou inferior a 200 milissegundos. Qualquer coisa entre 200 e 500 milissegundos precisa ser melhorada e qualquer coisa acima de 500 milissegundos é considerada ruim.
Conclusão
Interaction to Next Paint (INP) é uma métrica pendente do Core Web Vitals que substituirá o First Interaction Delay (FID) em 2024. É uma medida do tempo que leva para seu site responder a uma interação do usuário. Quanto menor o atraso, melhor será o seu desempenho.
Como Core Web Vitals faz parte do algoritmo de classificação do Google , recomendo fortemente que você otimize seu INP reduzindo o processamento da CPU em seu site usando as estratégias listadas acima.
Enquanto você faz isso, também recomendo ler Core Web Vitals e meus outros conselhos para aumentar a velocidade e melhorar a experiência do usuário em seu site.
CRÉDITOS: Neil Patel (Blog)
Comments