Tudo o que você precisa saber #ÚltimasNotícias

O campo de SEO não tem escassez de siglas.

De SEO a FID e INP – esses são alguns dos mais comuns que você encontrará quando se trata de velocidade de página.

Há uma novidade métrica na mistura: INP, que significa Interaction to Next Paint. Ela se refere a porquê a página responde a interações específicas do usuário e é medida pelos dados de laboratório e de campo do Google Chrome.

O que é exatamente a interação com a próxima pintura?

Interaction to Next Paint, ou INP, é uma novidade métrica do Core Web Vitals projetada para simbolizar o tardança universal de interação de uma página ao longo da jornada do usuário.

Por exemplo, quando você clica no aditar ao carrinho botão em uma página de resultado, ele mede quanto tempo leva para o estado visual do botão ser atualizado, porquê mudar a cor do botão ao clicar.

Se você tiver scripts pesados ​​em realização que demoram muito para serem concluídos, eles podem fazer com que a página congele temporariamente, impactando negativamente a métrica INP.

Cá está o vídeo de exemplo ilustrando porquê parece na vida real:

Observe porquê o primeiro botão responde visualmente instantaneamente, enquanto leva alguns segundos para o segundo botão atualizar seu estado visual.

Qual é a diferença entre INP e FID?

A principal diferença entre INP e First Input Delay, ou FID, é que o FID considera unicamente a primeira interação na página. Ele mede unicamente a métrica de tardança de ingressão e não considera quanto tempo leva para o navegador responder à interação.

Em contraste, o INP considera todas as interações de página e mede o tempo que os navegadores precisam para processá-las. O INP, no entanto, leva em conta os seguintes tipos de interações:

• Qualquer clique do mouse em um elemento interativo.
• Qualquer toque em um elemento interativo em qualquer dispositivo que inclua uma tela sensível ao toque.
• O pressionamento de uma tecla em um teclado físico ou na tela.

O que é um bom valor INP?

De entendimento com o Google, um bom valor INP é em torno de 200 milissegundos ou menos. Ele tem os seguintes limites:

O Google também observa que o INP ainda é experimental e que a orientação que ele recomenda em relação a essa métrica provavelmente mudará.

Porquê o INP é medido?

O Google mede o INP dos navegadores Chrome anonimamente a partir de uma exemplar das interações mais longas que acontecem quando um usuário visitante a página.

Cada interação tem algumas fases: tempo de apresentação, tempo de processamento e tardança de ingressão. O retorno de chamada de eventos associados contém o tempo totalidade envolvido para todas as três fases executarem.

Se uma página tiver menos de 50 interações no totalidade, o INP considera a interação com o pior tardança inteiro; se tiver mais de 50 interações, ele ignora as interações mais longas por 50 interações.

Quando o usuário sai da página, essas medições são enviadas para o Relatório de experiência do usuário do Chrome, chamado CrUX, que agrega os dados de desempenho para fornecer insights sobre experiências reais do usuário, conhecidos porquê dados de campo.

Quais são os motivos comuns que causam altos níveis de INP?

Entender as causas subjacentes de INPs altos é crucial para otimizar o desempenho do seu site. Cá estão as causas comuns:

• Tarefas longas que podem bloquear o thread principal, atrasando as interações do usuário.
• Ouvintes de eventos síncronos em eventos de clique, porquê vimos no vídeo de exemplo supra.
• Alterações no DOM causam múltiplos refluxos e repinturas, o que geralmente acontece quando o tamanho do DOM é muito grande (> 1.500 elementos HTML).

Porquê solucionar problemas de INP?

Primeiro, leia nosso guia sobre porquê medir métricas de CWV e tente as técnicas de solução de problemas oferecidas lá. Mas se isso ainda não ajudar você a deslindar quais interações causam INP eminente, é cá que o relatório “Performance” do navegador Chrome (ou, melhor, Canary) pode ajudar.

• Acesse a página da web que você deseja examinar.
• Abra o DevTools do seu navegador Canary, que não tem extensões de navegador (geralmente pressionando F12 ou Ctrl+Shift+I).
• Mudar para o Desempenho aba.
• Desabilitar cache do Rede aba.
• Escolha o emulador traste.
• Clique no Registro botão e interaja com os elementos da página porquê faria normalmente.
• Pare a gravação quando tiver tomado a interação de seu interesse.

Acelere a CPU em 4x usando o menu suspenso “slowdown” para simular dispositivos móveis médios e escolha uma rede 4G, que é usada em 90% dos dispositivos móveis quando os usuários estão ao ar livre. Se você não mudar essa feição, executará sua simulação usando a CPU poderosa do seu PC, o que não é equivalente a dispositivos móveis.

É uma nuance muito importante, já que o Google usa dados de campo coletados de dispositivos de usuários reais. Você pode não enfrentar problemas de INP com um dispositivo potente – esse é um ponto complicado que dificulta a depuração de INP. Ao escolher essas configurações, você traz o estado do seu emulador o mais próximo provável do estado do dispositivo real.

Cá está um guia em vídeo que mostra todo o processo. Eu recomendo fortemente que você tente isso enquanto lê o item para lucrar experiência.

O que observamos no vídeo é que tarefas longas fazem com que a interação demore mais e uma lista de arquivos JavaScript que são responsáveis ​​por essas tarefas.

Se você expandir o Interações seção, você pode ver uma estudo detalhada da longa tarefa associada a essa interação e, ao clicar nesses URLs de script, serão abertas as linhas de código JavaScript responsáveis ​​pelo tardança, que você pode usar para otimizar seu código.

Uma interação totalidade de 321 ms de duração consiste em:

• Delongado de ingressão: 207 ms.
• Duração do processamento: 102 ms.
• Delongado de apresentação: 12 ms.

Aquém, na risco do tempo do tópico principal, você verá uma longa barra vermelha representando a duração totalidade da tarefa longa.

Aquém da longa barra de tarefas vermelha, você pode ver uma barra amarela chamada “Julgar script”, indicando que a longa tarefa foi causada principalmente pela realização do JavaScript.

Na primeira tomada de tela, a intervalo de tempo entre (ponto 1) e (ponto 2) é um tardança causado por uma tarefa longa em vermelho devido à avaliação do script.

O que é avaliação de roteiro?

A avaliação de script é uma lanço necessária para a realização do JavaScript. Durante esse estágio crucial, o navegador executa o código risco por risco, o que inclui atribuir valores a variáveis, definir funções e registrar ouvintes de eventos.

Os usuários podem interagir com uma página parcialmente renderizada enquanto os arquivos JavaScript ainda estão sendo carregados, analisados, compilados e avaliados.

Quando um usuário interage com um elemento (clica, toca, etc.) e o navegador está no estágio de avaliação de um script que contém um ouvinte de eventos anexado à interação, ele pode atrasar a interação até que a avaliação do script seja concluída.

Isso garante que o ouvinte do evento esteja devidamente registrado e possa responder à interação.

Na tomada de tela (ponto 2), o tardança de 207 ms provavelmente ocorreu porque o navegador ainda estava avaliando o script que continha o ouvinte de eventos para o clique.

É cá que entra o Tempo Totalidade de Bloqueio (TBT), que mede a quantidade totalidade de tempo que tarefas longas (maiores que 50 ms) bloqueiam o thread principal até que a página se torne interativa.

Se esse tempo for longo e os usuários interagirem com o site logo que a página for renderizada, o navegador pode não conseguir responder prontamente à interação do usuário.

Não faz secção das métricas CWV, mas frequentemente se correlaciona com INPs altos. Logo, para otimizar a métrica INP, você deve tentar diminuir seu TBT.

Quais são os JavaScripts comuns que causam eminente TBT?

Scripts de estudo – porquê Google Analytics 4, pixels de rastreamento, Google Re-Captcha ou anúncios do AdSense – geralmente causam eminente tempo de avaliação de script, contribuindo assim para o TBT.

Um exemplo de um site onde anúncios e scripts de estudo causam eminente tempo de realização de JavaScript.

Uma estratégia que você pode implementar para reduzir o TBT é atrasar o carregamento de scripts não essenciais até que o teor da página inicial termine de carregar.

Outro ponto importante é que ao atrasar scripts, é forçoso priorizá-los com base no impacto deles na experiência do usuário. Scripts críticos (por exemplo, aqueles essenciais para interações importantes) devem ser carregados antes dos menos críticos.

Melhorar seu INP não é uma solução mágica

É importante observar que melhorar seu INP não é uma solução mágica que garante sucesso momentâneo em SEO.

Em vez disso, é um item entre muitos que podem precisar ser concluídos porquê secção de um lote de mudanças de qualidade que podem ajudar a fazer a diferença no seu desempenho universal de SEO.

Isso inclui otimizar seu teor, fabricar backlinks de subida qualidade, aprimorar meta tags e descrições, usar dados estruturados, melhorar a arquitetura do site, emendar erros de rastreamento e muitos outros.

Mais recursos:

Imagem em destaque: BestForBest/Shutterstock