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 uma vez que 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 detença universal de interação de uma página ao longo da jornada do usuário.

Por exemplo, quando você clica no juntar ao carrinho botão em uma página de resultado, ele mede quanto tempo leva para o estado visual do botão ser atualizado, uma vez que 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 uma vez que parece na vida real:

Observe uma vez que 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 detença de ingresso 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 harmonia 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á.

Uma vez que o INP é medido?

O Google mede o INP dos navegadores Chrome anonimamente a partir de uma modelo 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 detença de ingresso. 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 detenç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 uma vez que 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, uma vez que 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).

Uma vez que solucionar problemas de INP?

Primeiro, leia nosso guia sobre uma vez que 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 cimalha, é cá que o relatório “Performance” do navegador Chrome (ou, melhor, Canary) pode ajudar.

• Acesse a página da web que você deseja indagar.
• 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 uma vez que 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 formato, 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 verosímil 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 cláusula 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 nessas URLs de script, serão abertas as linhas de código JavaScript responsáveis ​​pelo detença, que você pode usar para otimizar seu código.

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

• Delonga de ingresso: 207 ms.
• Duração do processamento: 102 ms.
• Delonga de apresentação: 12 ms.

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

Inferior 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 detenç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 risca por risca, 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 detenç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 mal 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 cimalha TBT?

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

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, é precípuo 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 uma vez que 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, gerar 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