Interaction to Next Paint - Input Delay

Problemas de Interaction to Next Paint (INP) causados por input delay

No nosso artigo anterior, falamos sobre o interaction to next paint e sobre como identificar problemas de interaction to next paint. Se você quiser ler sobre os conceitos básicos, este é um ótimo ponto de partida!

Neste artigo, vou focar no 'Input Delay'. Como isso afeta os problemas de Interaction to Next Paint e depois explicar como minimizar os input delays para melhorar o interaction to next paint.!

DICA INP: na maioria das vezes o input delay ocorre durante os estágios iniciais de carregamento da página web!

O que é input delay?

Input delay refere-se ao tempo que o navegador leva para começar a processar um callback de evento após o usuário interagir com uma página web (por exemplo, clicar em um botão ou pressionar uma tecla). Embora sempre exista algum input delay (até os navegadores precisam de tempo para agendar os callbacks), o input delay ocorre quando o navegador está ocupado executando outras tarefas agendadas e não consegue agendar imediatamente os callbacks solicitados pela interação.

Input delay e o INP

O Interaction to Next Paint (INP) pode ser dividido em 3 subpartes: 'Input Delay', 'Processing Time' e 'Presentation Delay'

Você pode notar que existem semelhanças de nomenclatura entre o Input Delay e o antigo Core Web Vital 'First Input Delay'. Para quem não sabe: O Interaction to Next Paint é o sucessor do aposentado 'First Input Delay'. O First Input Delay media o tempo entre a primeira interação e o callback do evento. Embora o First Input Delay tenha sido aposentado, o 'Input Delay' ainda desempenha um papel importante na melhoria da responsividade web porque o Input Delay está na base de cada Interaction to Next Paint.

A importância do input delay

Como muitos desenvolvedores pensam em melhorar o INP em termos de otimização de funções callback (otimizando o tempo de processamento), o 'Input Delay' é frequentemente ignorado. É verdade que o Input Delay normalmente não é a maior parte do INP, mas mesmo assim, se otimizarmos o INP delay, frequentemente otimizaremos todas as interações INP de uma só vez!

No CoreDash coletamos milhões de pontos de dados de Core Web Vitals a cada hora. Com base nesses dados, o Input Delay representa apenas 18% do Interaction to Next Paint. E embora isso não seja nem perto do Presentation Delay ou do Processing Time, ainda é uma porção significativa.

Causas do Input Delay:

O input delay ocorre quando a thread principal está ocupada executando outras tarefas. Essas tarefas podem ter origem em:

1. Tarefas iniciais. Scripts normais, diferidos e assíncronos que são enfileirados no início criarão tarefas iniciais
   
2. Tarefas agendadas. Algumas tarefas não são executadas no início do carregamento da página, mas podem ser agendadas para após o carregamento completo. Essas tarefas também podem interferir no INP e causar input delay. Por exemplo, scripts que são executados após o evento window.onload ou scripts que são atrasados por plugins de otimização.
   
3. Tarefas repetidas. Tarefas recorrentes via setInterval() que levam relativamente muito tempo para executar e coincidem com o INP
4. Callbacks sobrepostos: Callbacks sobrepostos são uma causa comum de input delay. Múltiplos callbacks agendados próximos uns dos outros podem criar uma fila, atrasando o processamento da próxima interação.

Minimizar o input delay

1. Divida tarefas longas iniciais em múltiplas tarefas menores. Durante tarefas longas, o navegador não consegue responder à entrada do usuário, enquanto após cada tarefa curta o navegador pode responder à entrada do usuário. Portanto, divida tarefas longas com scheduler.yield() (experimental) ou envolvendo cada função em um timeout de 0 com setTimeout(callback,0)
2. Gerencie elementos interativos. Considere não apresentar elementos interativos (como uma barra de pesquisa) antes que o código JavaScript que os controla esteja totalmente carregado. Isso prevenirá cliques prematuros em elementos que não estão prontos para receber cliques. Para otimizar o UX para esse padrão, você pode priorizar o carregamento do JavaScript necessário ou temporariamente ocultar/desativar o elemento até que esteja funcional.
3. Execução de Scripts em Tempo Ocioso: Agende scripts não críticos para serem executados durante períodos ociosos do navegador com requestIdleCallback(). O requestIdleCallback é executado quando o navegador está ocioso e não precisa processar entrada do usuário.
4. Use web workers para executar JavaScript fora da thread principal do navegador. Os web workers permitem que scripts sejam executados fora da thread principal. Isso prevenirá o bloqueio da thread principal e evitará problemas de input delay no INP.
5. Verifique entradas pendentes durante tarefas repetidas. Antes de executar um conjunto de tarefas agendadas, verifique se há entradas pendentes antes de iniciar as tarefas. Se houver alguma entrada pendente, ceda para a thread principal primeiro.
6. Remova código desnecessário. Audite regularmente seus scripts e remova qualquer código desnecessário ou até scripts inteiros, porque cada linha de código pode potencialmente causar um input delay que afeta o interaction to next paint.

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

Implicações Práticas

Vamos à pergunta mais importante: 'O que tudo isso significa para o meu site'. Vamos analisar para WordPress & REACT.

WordPress

O WordPress, por sua natureza, frequentemente vem com um tema e um grande número de plugins. Tanto os plugins quanto os temas frequentemente dependem de JavaScript para funcionalidade. Como esses plugins e temas são mantidos por desenvolvedores terceiros, não temos controle sobre o conteúdo. Isso significa que não podemos alterar os arquivos e otimizar 'código ruim'. Mesmo que os scripts se comportem bem, não há garantia de que continuarão assim no futuro.

Portanto, para minimizar o input delay e otimizar o Interaction to Next Paint (INP), faça o seguinte:

• Evite usar plugins sempre que possível. Embora plugins sejam uma maneira fácil de adicionar funcionalidade, eles frequentemente adicionam scripts à página. Esses scripts causarão um input delay que impacta o INP. Para cada plugin, pergunte-se: Consigo alcançar a mesma funcionalidade com código personalizado?
• Escolha Temas Leves. Muitos temas WordPress 'oferecem tudo'. Embora isso pareça uma ótima ideia, significa que provavelmente estão cheios de funcionalidade que não é utilizada, mas consome tempo valioso de CPU.
• Evite construtores de página. Construtores de página como Elementor ou WPBakery oferecem uma interface visual e amigável para construir layouts. Infelizmente, eles frequentemente dependem de scripts para apresentar esse layout aos visitantes.
• Carregue scripts apenas quando necessários. O WordPress tem a tendência de carregar todos os scripts em todas as páginas. Para corrigir isso, simplesmente crie um tema filho e desregistre scripts desnecessários por tipo de página. Por exemplo:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) { 
    // Example: Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

REACT / NextJS

Sites React ou NextJS são majoritariamente alimentados por JavaScript. Executar esses scripts levará tempo e causará input delay no Interaction to Next Paint (INP)

• Use server components. Server components são renderizados no servidor e não no cliente, o que resulta em uma quantidade reduzida de JavaScript
• Carregue scripts de terceiros com a estratégia correta. Carregue scripts de terceiros após a hidratação ou até durante o tempo ocioso do navegador
• Implemente um padrão idle until urgent: Este padrão prioriza as interações do usuário sobre tarefas em segundo plano e cria estados temporários enquanto o navegador usa requestIdleCallback para executar tarefas não críticas durante períodos ociosos do navegador.
• Carregamento lazy de componentes. Faça carregamento lazy de componentes que não são imediatamente necessários usando React.lazy() ou dynamic() do NextJS
• Use suspense para componentes interativos. Considere renderizar apenas no lado do cliente componentes interativos que precisam de hidratação para se tornarem interativos.