Esta página foi traduzida pela API Cloud Translation.

Otimizar atraso de entrada

Descubra o que é o atraso de entrada e aprenda técnicas para reduzi-lo e torná-lo interativo com mais rapidez.

Jeremy Wagner

GitHub Página inicial

As interações na Web são coisas complicadas, com todos os tipos de atividade ocorrendo no navegador para impulsioná-las. No entanto, o que todos eles têm em comum é que causam algum atraso de 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 minimizar esse atraso e acelerar as interações no seu site.

O que é o atraso de entrada?

Atraso de entrada é o período que começa a partir da primeira interação do usuário com a página, como tocar em uma tela, clicar com o mouse ou pressionar uma tecla, até o momento em que os callbacks do evento para a interação começam a ser executados. Toda interação começa com um atraso na entrada.

Visualização simplificada do atraso de entrada. À esquerda, há uma arte linear de um cursor de mouse com uma explosão de estrelas atrás dele, indicando 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 entre chaves. — 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 existente.

Uma parte do atraso da entrada é inevitável: sempre leva algum tempo para o sistema operacional reconhecer um evento de entrada e transmiti-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.

Como considerar o atraso de entrada

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

Talvez você fique tentado a analisar os limites de latência na primeira entrada (FID, na sigla em inglês) para determinar uma permissão para atrasos de entrada, mas o limite "bom" para FID é de 100 milissegundos ou menos. Se você ultrapassar esse limite, vai alocar metade do seu orçamento para o INP só com relação ao atraso de entrada. Isso não é aconselhável quando você considera que uma interação também requer tempo para executar retornos de chamada de eventos e para que o navegador mostre o próximo frame.

Para atender ao limite "bom" do INP, é recomendado tentar o menor atraso de entrada possível, mas não eliminá-lo completamente, porque isso é impossível. Contanto que você evite o excesso de trabalho da linha de execução principal enquanto os usuários tentam interagir com sua página, o atraso de entrada deve ser baixo o suficiente para evitar problemas.

Como minimizar o atraso de entrada

Como dissemos anteriormente, algum atraso na entrada é inevitável, mas, por outro lado, algum atraso na entrada é evitável. Se você estiver com problemas longos em atrasos nas entradas, considere o seguinte.

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

Existem 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. Por outro lado, setInterval 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 se o usuário tenta interagir com a página quando o callback de tempo limite é executado.

Além disso, setTimeout pode ser executado em uma repetição ou de maneira recursiva, em que age mais como setInterval, mas é preferível não programar a próxima iteração até que a anterior seja concluída. Embora isso signifique que a repetição será usada para a linha de execução principal sempre que setTimeout for chamado, verifique se o callback não acaba fazendo trabalho excessivo.

O 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 uma interação do usuário, a natureza recorrente do setInterval torna muito mais provável que ele atrapalhe uma interação, aumentando assim o atraso de entrada da interação.

Captura de tela do Performance Profiler no Chrome DevTools demonstrando o atraso da entrada. Uma tarefa disparada por uma função de timer ocorre pouco antes de um usuário iniciar uma interação de clique. No entanto, o timer estende o atraso de entrada, fazendo com que os retornos de chamada do evento da interação sejam executados mais tarde do que deveriam. — Um timer registrado por uma chamada `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 retornos de chamada do evento para a interação sejam executados mais tarde do que poderiam.

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

Evitar tarefas longas

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

Uma visualização do que acontece com as interações quando as tarefas são muito longas e o navegador não consegue responder rápido o suficiente a interações, em comparação com quando tarefas mais longas são divididas em tarefas menores.

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

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

Uma parte particularmente desafiadora da otimização de 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 de a interação inicial renderizar o próximo frame.

Uma representação de quando as tarefas podem se sobrepor para produzir longos atrasos de entrada. Nessa 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 Criador de perfil de desempenho no DevTools do Chrome. O trabalho de renderização na interação de clique inicial causa um atraso de entrada para a interação subsequente 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. Isso ocorre quando os usuários digitam campos de formulários, onde muitas interações com o teclado podem ocorrer em um período muito curto. Se o trabalho em um evento de chave 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ê tem 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 as solicitações fetch de saída para que a linha de execução principal não fique congestionada com o processamento de callbacks fetch. Observação: a propriedade signal de uma instância AbortController também pode ser usada para cancelar eventos.

Outras fontes de aumento do atraso de entrada devido à sobreposição de interações podem ser animações caras. 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. Porém, se fizer isso, evite animações não compostas para que elas sejam executadas principalmente nas linhas de execução da 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 ocupa um tempo que pode ser reduzido. Se você estiver observando um longo atraso de entrada, pode reduzir esse atraso. Evitar callbacks de timer recorrentes, dividir tarefas longas e estar ciente de possíveis interações com interações pode 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.