A estrutura Pagespeed do Google, com a qual estamos acostumados há anos, é construída para garantir que os sites carreguem e sejam veiculados rapidamente. Ao produzir parâmetros mensuráveis e aproveitar os dados anônimos coletados da participação de mercado do Chrome, o Google usa essas métricas como indicadores de SEO. Com a introdução do Interaction to Next Paint (INP) em 2022, o foco mudou da mera velocidade de carregamento da página para uma perspectiva mais ampla de desempenho da web. O INP não mede apenas a rapidez com que uma página carrega, mas também a rapidez com que as interações do usuário na página são processadas. Essencialmente, transforma a experiência de navegação do site em uma métrica Pagespeed.
No blog de Kerem, o termo “Atraso de interação geral” é sugerido como uma boa opção para esse conceito, que o Google também explica bem em seu próprio vídeo. No entanto, para compreender totalmente essa métrica, nos aprofundaremos no assunto nas seções a seguir.
Qual é a explicação da duração do INP?
A duração do INP inclui:
- O tempo entre a interação do usuário com a página e a execução do manipulador de eventos.
- O tempo de execução do script.
- O tempo desde a execução do código até a exibição da saída ao usuário.
Esses processos normalmente ocorrem em milissegundos, mas em dispositivos móveis, especialmente em telefones Android mais antigos com baixo consumo de CPU, esses atrasos (latência) muitas vezes podem ser perceptíveis. Vale ressaltar que os dados do INP, assim como outros dados do Lighthouse, são coletados anonimamente e avaliados com base no Percentil 75. Portanto, o objetivo é criar aplicativos que tenham bom desempenho em dispositivos médios, e não apenas em dispositivos de última geração.
Exemplos da vida real de duração do INP
Aqui estão alguns exemplos reais das páginas da Internet que visitamos diariamente para explicar este conceito:
Inserindo endereço em um site de comércio eletrônico
Ao fazer compras em um site de comércio eletrônico e inserir o endereço para envio, primeiro você seleciona a província. Então, ao clicar na caixa de seleção para escolher o distrito, você espera um pouco o carregamento do resultado do Ajax e, após um certo tempo, as informações do distrito são carregadas. Este é um bom exemplo de INP. Melhorar a experiência do usuário neste exemplo poderia envolver a adição de um "indicador de carregamento" para informar o usuário sobre o processo Ajax.
Seleção de classificação
Ao usar filtros nas páginas de listagem de produtos, se os produtos filtrados não forem gerenciados adequadamente após clicar em uma caixa de seleção, isso aumentará o INP. Usar JS menos complexo e considerar a experiência do usuário durante as operações de filtro pode ajudar a manter o valor INP o mais alto possível.
Galerias de fotos de produtos
O tempo que os usuários aguardam o carregamento da galeria de fotos após clicar na foto de um produto nas páginas de detalhes do produto pode afetar potencialmente o INP.
Botão de reserva
O atraso de interação entre o clique no botão “Fazer Reserva” e a página seguinte é um exemplo de INP.
Botão Adicionar ao carrinho
Os milissegundos de atraso ao clicar no botão “Adicionar ao carrinho” e se perguntar se o item foi adicionado ao carrinho ou não definem perfeitamente o INP.
Conforme visto nesses exemplos, as armadilhas INP estão presentes em cenários que afetam tanto o SEO quanto as taxas de conversão direta.
Como melhorar o INP?
- Use bibliotecas JS Frontend atualizadas: Melhorar o desempenho usando bibliotecas front-end JS modernas, como Vue, React e Angular, é benéfico, pois oferecem vantagens de desempenho e capacidade de reutilização.
- Minimize a complexidade das bibliotecas JS: É aconselhável usar bibliotecas JS menos complexas. Pessoalmente, recomendo evitar o jQuery tanto quanto possível.
Níveis de métricas INP aceitáveis
Os valores limite para níveis de INP bons, médios e ruins são 200 milissegundos e 500 milissegundos. Manter o INP abaixo desses limites é crucial para manter uma boa experiência do usuário e desempenho geral da web.
