Otimizar atraso de entrada

Descubra o que é atraso de entrada e aprenda técnicas para reduzi-lo e possibilitar a interatividade mais rápida.

Jeremy Wagner

As interações na Web são complicadas. Todo tipo de atividade ocorre no navegador para impulsioná-las. No entanto, o que todos eles têm em comum é que causam algum atraso na entrada antes que os callbacks de eventos comecem a ser executados. Neste guia, você vai aprender o que é o atraso de entrada e o que fazer para minimizá-lo e fazer com que as interações no seu site sejam mais rápidas.

O que é atraso de entrada?

O atraso de entrada é o período que começa após o usuário interagir com a página pela primeira vez, como tocar em uma tela, clicar com o mouse ou pressionar uma tecla, até o momento em que os callbacks do evento da interação começam a ser executados. Toda interação começa com um atraso nas entradas.

Visualização simplificada do atraso de entrada. À esquerda, há um desenho de um cursor de mouse com uma explosão de estrelas atrás dele, representando o início de uma interação. À direita está a arte linear de uma engrenagem, que significa quando os manipuladores de eventos de uma interação começam a ser executados. O espaço no meio é o atraso de entrada com uma chave.
A mecânica por trás do atraso de entrada. Quando uma entrada é recebida pelo sistema operacional, ela precisa ser transmitida ao navegador antes do início da interação. Isso leva um certo tempo e pode ser aumentado pelo trabalho da linha de execução principal.

Uma parte do atraso de entrada é inevitável: sempre leva algum tempo para o sistema operacional reconhecer um evento de entrada e passá-lo ao navegador. No entanto, essa parte do atraso de entrada muitas vezes nem é perceptível, e outras coisas acontecem na própria página que podem causar atrasos de entrada longos o suficiente para causar problemas.

Como considerar o atraso de entrada

De modo geral, mantenha todas as partes de uma interação o mais curtas possível para que seu site tenha mais chance de atender ao limite "bom" da métrica Interação com a próxima exibição (INP), independentemente do dispositivo do usuário. Verificar o atraso de entrada é apenas uma parte do cumprimento desse limite.

Consequentemente, você precisa buscar o menor atraso de entrada possível para atingir o limite "bom" do INP. Você deve estar ciente, porém, não pode esperar eliminar completamente os atrasos de entrada. Contanto que você evite o excesso de trabalho na linha de execução principal enquanto os usuários tentam interagir com a página, o atraso da entrada será baixo o suficiente para evitar problemas.

Como minimizar o atraso de entrada

Como mencionado anteriormente, algum atraso na entrada é inevitável, mas, por outro lado, algum atraso na entrada é evitável. Aqui estão algumas coisas a considerar se você estiver com problemas longos atrasos nas entradas.

Evite timers recorrentes que iniciam o trabalho excessivo da linha de execução principal

Há duas funções de timer usadas com frequência em JavaScript que podem contribuir para o atraso de entrada: setTimeout e setInterval. A diferença entre os dois é que setTimeout programa um callback para ser executado após um horário especificado. setInterval, por outro lado, programa um callback para ser executado a cada n milissegundos permanentemente ou até que o timer seja interrompido com clearInterval.

A setTimeout não é problemática por si só. Na verdade, ela pode ser útil para evitar tarefas longas. No entanto, isso depende de quando o tempo limite ocorre e de se o usuário tenta interagir com a página quando esse callback é executado.

Além disso, setTimeout pode ser executado em uma repetição ou de maneira recursiva, em que age mais como setInterval, embora, de preferência, não programe a próxima iteração até que a anterior seja concluída. Embora isso signifique que a repetição vai ceder à linha de execução principal sempre que a setTimeout for chamada, tome cuidado para garantir que o callback não acabe fazendo trabalho excessivo.

setInterval executa um callback em um intervalo e, portanto, tem muito mais chances de atrapalhar as interações. Isso ocorre porque, ao contrário de uma única instância de uma chamada setTimeout, que é um callback único que pode atrapalhar a interação do usuário, a natureza recorrente do setInterval torna muito mais provável que ele atrapalhe, aumentando o atraso de entrada da interação.

Captura de tela do Performance Profiler no Chrome DevTools, demonstrando o atraso na entrada. Uma tarefa disparada por uma função de timer ocorre logo antes de um usuário iniciar uma interação de clique. No entanto, o timer estende o atraso de entrada, fazendo com que os callbacks de evento da interação sejam executados mais tarde do que deveriam.
Um timer registrado por uma chamada de setInterval anterior que contribui para o atraso de entrada, conforme mostrado no painel de desempenho do Chrome DevTools. O atraso de entrada adicionado faz com que os callbacks de eventos para a interação sejam executados mais tarde do que poderiam.

Se os timers estão ocorrendo em código próprio, você tem controle sobre eles. Avalie se você precisa deles ou faça o possível para reduzir o trabalho neles o máximo possível. No entanto, os timers em scripts de terceiros são uma história diferente. Muitas vezes, você não tem controle sobre o que um script de terceiros faz. Além disso, corrigir problemas de desempenho no código de terceiros geralmente envolve trabalhar com as partes interessadas para determinar se um determinado script de terceiros é necessário e, em caso afirmativo, entrar em contato com um fornecedor de script de terceiro para determinar o que pode ser feito para corrigir problemas de desempenho que eles podem causar no seu site.

Evitar tarefas longas

Uma maneira de reduzir atrasos de entradas longos é evitar tarefas longas. Quando há excesso de trabalho da linha de execução principal que bloqueia a linha de execução principal durante as interações, isso aumenta o atraso de entrada para elas antes que as tarefas longas sejam concluídas.

Visualização de quanto tempo as tarefas estendem o atraso de entrada. Na parte superior, uma interação ocorre logo após a execução de uma única tarefa longa, causando um atraso significativo na entrada que faz com que os callbacks de eventos sejam executados muito mais tarde do que deveriam. No final, uma interação ocorre aproximadamente ao mesmo tempo, mas a tarefa longa é dividida em várias menores ao produzir, permitindo que os callbacks de evento da interação sejam executados muito antes.
Visualização do que acontece com as interações quando as tarefas são muito longas e o navegador não consegue responder com rapidez suficiente às interações e quando tarefas mais longas são divididas em tarefas menores.

Além de minimizar a quantidade de trabalho em uma tarefa e você sempre se esforçar para fazer o mínimo possível na linha de execução principal, divida tarefas longas para melhorar a capacidade de resposta à entrada do usuário.

Esteja atento às sobreposições de interação

Uma parte particularmente desafiadora da otimização do INP pode ser se você tiver interações que se sobrepõem. A sobreposição de interação significa que, depois de interagir com um elemento, você faz outra interação com a página antes que a interação inicial renderize o próximo frame.

Representação de quando as tarefas podem se sobrepor para produzir longos atrasos nas entradas. Nesta representação, uma interação de clique se sobrepõe a uma interação de keydown para aumentar o atraso de entrada para a interação de keydown.
Visualização de duas interações simultâneas no Performance Profiler no DevTools do Chrome. O trabalho de renderização na interação de clique inicial causa um atraso na entrada para a interação seguinte do teclado.

As fontes de sobreposição de interação podem ser tão simples quanto os usuários que fazem muitas interações em um curto período de tempo. Isso pode ocorrer quando os usuários digitam em campos de formulário, onde muitas interações do teclado podem ocorrer em um período muito curto. Se o trabalho em um evento principal for especialmente caro, como no caso comum de campos de preenchimento automático em que as solicitações de rede são feitas para um back-end, você terá algumas opções:

  • Considere devolver as entradas para limitar a quantidade de vezes que um callback de evento é executado em um determinado período.
  • Use AbortController para cancelar solicitações fetch enviadas. Assim, a linha de execução principal não ficará congestionada ao processar callbacks fetch. Observação: a propriedade signal de uma instância AbortController também pode ser usada para cancelar eventos.

Outra fonte de aumento do atraso de entrada devido à sobreposição de interações podem ser animações caras. Especificamente, as animações em JavaScript podem disparar muitas chamadas requestAnimationFrame, o que pode atrapalhar as interações do usuário. Para contornar isso, use animações CSS sempre que possível para evitar o enfileiramento de frames de animação potencialmente caros. No entanto, se você fizer isso, evite animações não compostas para que elas sejam executadas principalmente nos threads de GPU e do compositor, e não na linha de execução principal.

Conclusão

Embora os atrasos de entrada possam não representar a maior parte do tempo que as interações levam para serem executadas, é importante entender que cada parte de uma interação leva um tempo que pode ser reduzido. Se você estiver observando um longo atraso de entrada, poderá reduzir esse atraso. Evitar callbacks de timer recorrentes, dividir tarefas longas e estar ciente de possíveis sobreposições de interação podem ajudar a reduzir o atraso de entrada, levando a uma interatividade mais rápida para os usuários do seu site.

Imagem principal do Unsplash, de Erik Mclean.