Posts Recentes:

Albedo leva a observação da Terra de perto e pessoalmente a partir da órbita terrestre muito baixa

Inicialização de imagens de satélite Albedo está se...

Google Ads elimina gradualmente pagamentos com cartão

O Google está notificando alguns anunciantes de que...

Pinterest lança ferramentas de anúncios de IA

O Pinterest está lançando novas ferramentas de anúncios...

Otimizando a interação com a próxima pintura (INP): um guia passo a passo


Esta postagem foi patrocinada pela DebugBear. As opiniões expressas neste artigo são de responsabilidade do patrocinador.

Manter seu site rápido é importante para a experiência do usuário e SEO.

A iniciativa Core Web Vitals do Google fornece um conjunto de métricas para ajudá-lo a entender o desempenho do seu site.

As três métricas Core Web Vitals são:

Esta postagem se concentra na métrica INP introduzida recentemente e no que você pode fazer para melhorá-la.

Como é medida a interação com a próxima pintura?

O INP mede a rapidez com que o seu site responde às interações do usuário – por exemplo, um clique em um botão. Mais especificamente, o INP mede o tempo em milissegundos entre a entrada do usuário e quando o navegador termina de processar a interação e está pronto para exibir quaisquer atualizações visuais na página.

Seu site precisa concluir esse processo em menos de 200 milissegundos para obter uma pontuação “Boa”. Valores superiores a meio segundo são considerados “Ruim”. Uma pontuação baixa em uma métrica Core Web Vitals pode impactar negativamente as classificações do seu mecanismo de pesquisa.

O Google coleta dados INP de visitantes reais do seu site como parte do Relatório de experiência do usuário do Chrome (CrUX). Esses dados CrUX são o que impacta as classificações.

picture1 128Imagem criada por DebugBear, maio de 2024

Como identificar e corrigir tempos de INP lentos

Os fatores que causam a má interação com o Next Paint podem muitas vezes ser complexos e difíceis de descobrir. Siga este guia passo a passo para entender as interações lentas em seu site e encontrar possíveis otimizações.

1. Como identificar uma página com tempos de INP lentos

Diferentes páginas do seu site terão diferentes pontuações do Core Web Vitals. Portanto, você precisa identificar uma página lenta e investigar o que está causando sua lentidão.

Usando o Google Search Console

Uma maneira fácil de verificar suas pontuações INP é usar a seção Core Web Vitals no Google Search Console, que relata dados com base nos dados do Google CrUX que discutimos anteriormente.

Por padrão, os URLs das páginas são agrupados em grupos de URLs que abrangem muitas páginas diferentes. Tenha cuidado aqui – nem todas as páginas podem ter o problema relatado pelo Google. Em vez disso, clique em cada grupo de URLs para ver se dados específicos de URL estão disponíveis para algumas páginas e concentre-se neles.

picture2 628Captura de tela do Google Search Console, maio de 2024

Usando um serviço de monitoramento de usuário real (RUM)

O Google não relatará dados do Core Web Vitals para cada página do seu site e apenas fornecerá as medidas brutas, sem quaisquer detalhes, para ajudá-lo a entender e corrigir os problemas. Para conseguir isso, você pode usar uma ferramenta de monitoramento de usuário real como o DebugBear.

O monitoramento de usuários reais funciona instalando um snippet analítico em seu site que mede a velocidade do seu site para os visitantes. Depois de configurado, você terá acesso a um painel de interação com o Next Paint como este:

picture3 333Captura de tela do painel DebugBear Interaction to Next Paint, maio de 2024

Você pode identificar as páginas que deseja otimizar na lista, passar o mouse sobre o URL e clicar no ícone do funil para ver os dados apenas daquela página específica.

picture4 897Imagem criada por DebugBear, maio de 2024

2. Descubra quais interações entre elementos são lentas

Visitantes diferentes na mesma página terão experiências diferentes. Muito disso depende de como eles interagem com a página: se clicarem em uma imagem de fundo, não há risco de a página congelar repentinamente, mas se clicarem em um botão que inicia algum processamento pesado, isso é mais provável. E os usuários nesse segundo cenário experimentarão um INP muito mais alto.

Para ajudar com isso, os dados RUM fornecem um detalhamento de quais elementos da página os usuários interagiram e quão grandes foram os atrasos na interação.

picture5 968Captura de tela da visualização DebugBear INP Elements, maio de 2024

A captura de tela acima mostra diferentes interações INP classificadas de acordo com a frequência dessas interações do usuário. Para tornar as otimizações o mais fáceis possível, você deve se concentrar em uma interação lenta que afeta muitos usuários.

No DebugBear, você pode clicar no elemento da página para adicioná-lo aos seus filtros e continuar sua investigação.

3. Identifique qual componente do INP mais contribui para retardar as interações

Os atrasos do INP podem ser divididos em três componentes diferentes:

  • Atraso de entrada: código de segundo plano que bloqueia o processamento da interação.
  • Tempo de processamento: o tempo gasto no tratamento direto da interação.
  • Atraso de apresentação: Exibindo as atualizações visuais na tela.

Você deve se concentrar em qual componente INP é o que mais contribui para o tempo lento do INP e garantir que você tenha isso em mente durante sua investigação.

picture6 656Captura de tela dos componentes DebugBear INP, maio de 2024

Nesse cenário, o tempo de processamento é o que mais contribui para o tempo lento de INP do conjunto de páginas que você está visualizando, mas é necessário se aprofundar para entender o porquê.

O alto tempo de processamento indica que há código interceptando a interação do usuário e executando código de desempenho lento. Se, em vez disso, você observar um alto atraso de entrada, isso sugere que há tarefas em segundo plano bloqueando o processamento da interação, por exemplo, devido a scripts de terceiros.

4. Verifique quais scripts estão contribuindo para o INP lento

Às vezes, os navegadores relatam scripts específicos que contribuem para uma interação lenta. Seu site provavelmente contém scripts próprios e de terceiros, os quais podem contribuir para diminuir os tempos de INP.

Uma ferramenta RUM como o DebugBear pode coletar e revelar esses dados. A principal coisa que você deseja verificar é se você vê principalmente o código do seu próprio site ou o código de terceiros.

picture7 102Captura de tela do agrupamento de domínios de script primário INP no DebugBear, maio de 2024

Dica: Quando você vê um script ou função de código-fonte marcado como “N/A”, isso pode indicar que o script vem de uma origem diferente e tem restrições de segurança adicionais que impedem que as ferramentas RUM capturem informações mais detalhadas.

Isso agora começa a contar uma história: parece que scripts analíticos/de terceiros são os maiores contribuintes para os tempos lentos de INP.

5. Identifique por que esses scripts estão sendo executados

Neste ponto, você tem uma forte suspeita de que a maior parte do atraso do INP, pelo menos nas páginas e elementos que você está visualizando, se deve a scripts de terceiros. Mas como saber se esses são scripts de rastreamento gerais ou se eles realmente têm uma função no tratamento da interação?

O DebugBear oferece um detalhamento que ajuda a ver por que o código está em execução, chamado de detalhamento do Invocador de Script Primário INP. Isso é um pouco complicado – vários scripts diferentes podem estar envolvidos na desaceleração de uma interação, e aqui você vê apenas o maior contribuidor. O “Invoker” é apenas um valor que o navegador informa sobre o que causou a execução desse código.

picture8 52Captura de tela do agrupamento de invocadores de script primário INP no DebugBear, maio de 2024

Os seguintes nomes de invocadores são exemplos de manipuladores de eventos em toda a página:

  • ao clicar
  • ao mouse para baixo
  • onpointerup

Você pode ver muitos deles na captura de tela acima, que informa que o script de análise está rastreando cliques em qualquer lugar da página.

Por outro lado, se você visse nomes de invocadores como estes, indicariam manipuladores de eventos para um elemento específico na página:

  • .load_more.onclick
  • #logo.onclick

6. Revise as visualizações de páginas específicas

Muitos dos dados que você viu até agora são agregados. Agora é hora de olhar para os eventos INP individuais, para chegar a uma conclusão definitiva sobre o que está causando a lentidão do INP neste exemplo.

Ferramentas reais de monitoramento de usuários, como o DebugBear, geralmente oferecem uma maneira de revisar experiências específicas do usuário. Por exemplo, você pode ver qual navegador eles usaram, qual é o tamanho da tela e qual elemento levou à interação mais lenta.

picture9 814Captura de tela de uma visualização de página no DebugBear Real User Monitoring, maio de 2024

Como mencionado antes, vários scripts podem contribuir para um INP geral lento. A seção Scripts INP mostra os scripts que foram executados durante a interação INP:

picture10 366Captura de tela do detalhamento do script DebugBear INP, maio de 2024

Você pode revisar cada um desses scripts com mais detalhes para entender por que eles são executados e o que está fazendo com que demorem mais para serem concluídos.

7. Use o DevTools Profiler para obter mais informações

Ferramentas reais de monitoramento de usuários têm acesso a muitos dados, mas por razões de desempenho e segurança elas não conseguem acessar nem perto de todos os dados disponíveis. É por isso que é uma boa ideia usar também o Chrome DevTools para medir o desempenho da sua página.

Para depurar o INP no DevTools você pode medir como o navegador processa uma das interações lentas que você identificou antes. O DevTools então mostra exatamente como o navegador está gastando seu tempo lidando com a interação.

picture11 347Captura de tela de um perfil de desempenho no Chrome DevTools, maio de 2024

Como você pode resolver este problema

Neste exemplo, você ou sua equipe de desenvolvimento poderiam resolver esse problema:

  • Trabalhar com o provedor de script terceirizado para otimizar seu script.
  • Remover o script se não for essencial para o site ou encontrar um fornecedor alternativo.
  • Ajustando como seu próprio código interage com o script

Como investigar alto atraso de entrada

No exemplo anterior, a maior parte do tempo INP foi gasto executando código em resposta à interação. Mas muitas vezes o navegador já está ocupado executando outro código quando ocorre uma interação do usuário. Ao investigar os componentes INP, você verá um alto valor de atraso de entrada.

Isso pode acontecer por vários motivos, por exemplo:

  • O usuário interagiu com o site enquanto ele ainda estava carregando.
  • Uma tarefa agendada está em execução na página, por exemplo, uma animação contínua.
  • A página está carregando e renderizando novo conteúdo.

Para entender o que está acontecendo, você pode revisar o nome do invocador e a seção de scripts INP das experiências individuais do usuário.

picture12 278Captura de tela do detalhamento do componente INP no DebugBear, maio de 2024

Nesta captura de tela, você pode ver que um cronômetro está executando um código que coincide com o início de uma interação do usuário.

O script pode ser aberto para revelar o código exato que é executado:

picture13 322Captura de tela dos detalhes do script INP no DebugBear, maio de 2024

O código-fonte mostrado na captura de tela anterior vem de um script de rastreamento de usuário de terceiros em execução na página.

Nesta fase, você e sua equipe de desenvolvimento podem continuar com o fluxo de trabalho INP apresentado anteriormente neste artigo. Por exemplo, depurando com DevTools do navegador ou entrando em contato com o fornecedor terceirizado para obter suporte.

Como investigar o alto atraso na apresentação

O atraso de apresentação tende a ser mais difícil de depurar do que o atraso de entrada ou o tempo de processamento. Freqüentemente, isso é causado pelo comportamento do navegador, e não por um script específico. Mas, como antes, você ainda começa identificando uma página específica e uma interação específica.

Você pode ver um exemplo de interação com alto atraso de apresentação aqui:

picture14 526Captura de tela de uma interação com alto atraso de apresentação, maio de 2024

Você vê que isso acontece quando o usuário insere texto em um campo de formulário. Neste exemplo, muitos visitantes colaram grandes quantidades de texto que o navegador teve que processar.

Aqui a solução foi atrasar o processamento, mostrar uma mensagem “Aguardando…” ao usuário e concluir o processamento posteriormente. Você pode ver como a pontuação do INP melhora a partir de 3 de maio:

picture15 20Captura de tela de uma interação com a linha do tempo do Next Paint no DebugBear, maio de 2024

Obtenha os dados necessários para melhorar a interação com a próxima pintura

Configurar o monitoramento de usuários reais ajuda você a entender como os usuários experimentam seu site e o que você pode fazer para melhorá-lo. Experimente o DebugBear agora inscrevendo-se para um teste gratuito de 14 dias.

picture16 209Captura de tela do painel DebugBear Core Web Vitals, maio de 2024

Os dados CrUX do Google são agregados ao longo de um período de 28 dias, o que significa que demorará um pouco até você notar uma regressão. Com o monitoramento de usuários reais, você pode ver imediatamente o impacto das alterações no site e ser alertado automaticamente quando houver uma grande mudança.

DebugBear monitora dados de laboratório, dados CrUX e dados reais de usuários. Dessa forma, você tem todos os dados necessários para otimizar seus Core Web Vitals em um só lugar.

Este artigo foi patrocinado pela DebugBear e as opiniões aqui apresentadas representam a perspectiva do patrocinador.

Pronto para começar a otimizar seu site? Inscreva-se no DebugBear e obtenha os dados necessários para oferecer ótimas experiências ao usuário.


Créditos da imagem

Imagem em destaque: Imagem de Redesign.co. Usado com permissão.

Últimas

Albedo leva a observação da Terra de perto e pessoalmente a partir da órbita terrestre muito baixa

Inicialização de imagens de satélite Albedo está se...

Google Ads elimina gradualmente pagamentos com cartão

O Google está notificando alguns anunciantes de que...

Pinterest lança ferramentas de anúncios de IA

O Pinterest está lançando novas ferramentas de anúncios...

O que você precisa para gerar leads com conteúdo

Este é um trecho do e-book B2B Lead...

Assine

spot_img

Veja Também

Albedo leva a observação da Terra de perto e pessoalmente a partir da órbita terrestre muito baixa

Inicialização de imagens de satélite Albedo está se...

Google Ads elimina gradualmente pagamentos com cartão

O Google está notificando alguns anunciantes de que...

Pinterest lança ferramentas de anúncios de IA

O Pinterest está lançando novas ferramentas de anúncios...

O que você precisa para gerar leads com conteúdo

Este é um trecho do e-book B2B Lead...

Chefe da Pesquisa Google: erros de IA não impedirão o progresso

O Google continuará desenvolvendo recursos de IA, apesar...
spot_img

Albedo leva a observação da Terra de perto e pessoalmente a partir da órbita terrestre muito baixa

Inicialização de imagens de satélite Albedo está se preparando para sua estreia de perto e pessoal.O primeiro satélite da Albedo entrará em órbita...

Google Ads elimina gradualmente pagamentos com cartão

O Google está notificando alguns anunciantes de que eles devem deixar de pagar pelo Google Ads com cartão de crédito ou débito até...

Pinterest lança ferramentas de anúncios de IA

O Pinterest está lançando novas ferramentas de anúncios baseadas em IA e parcerias de medição para melhorar o desempenho e a segurança da...