Descubra o que é atraso de entrada e aprenda técnicas para reduzi-lo e possibilitar a interatividade mais rápida.
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.
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.
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.
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.
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çõesfetch
enviadas. Assim, a linha de execução principal não ficará congestionada ao processar callbacksfetch
. Observação: a propriedadesignal
de uma instânciaAbortController
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.