Aprenda a diagnosticar trabalhos custosos impedindo a interação do usuário.
Tarefas longas podem manter a linha de execução principal ocupada, atrasando a interação do usuário. Agora o Chrome DevTools pode visualizar tarefas longas, facilitando a visualização das tarefas a serem otimizadas.
Se você usa o Lighthouse para auditar suas páginas, provavelmente já conhece o tempo até a interação da página, uma métrica que representa quando os usuários podem interagir com a página e receber uma resposta. Mas você sabia que as tarefas longas (JavaScript) podem contribuir muito para um TTI ruim?
O que são tarefas longas?
Uma Tarefa longa é um código JavaScript que monopoliza a linha de execução principal por longos períodos, fazendo com que a IU "congele".
Enquanto uma página da Web está sendo carregada, as tarefas longas podem amarrar a linha de execução principal e fazer com que a página não responda à entrada do usuário, mesmo que pareça pronta. Cliques e toques geralmente não funcionam porque listeners de eventos, manipuladores de cliques, entre outros, ainda não foram anexados.
Tarefas longas com uso intenso de CPU ocorrem devido a trabalhos complexos que levam mais de 50 ms. Por que 50 ms? O modelo RAIL sugere que você processe eventos de entrada do usuário em 50 ms para garantir uma resposta visível em até 100 ms. Caso contrário, a conexão entre ação e reação será rompida.
Existem tarefas longas na minha página que podem atrasar a interatividade?
Até agora, você precisava procurar manualmente por "blocos amarelos longos" de script com mais de 50 ms no Chrome DevTools ou usar a API Long Tasks para descobrir quais tarefas estavam atrasando a interatividade. Isso pode ser um pouco complicado.
Para facilitar o fluxo de trabalho de auditoria de desempenho, o DevTools agora visualiza tarefas longas. Tarefas (mostradas em cinza) têm sinalizações vermelhas se forem tarefas longas.
- Registre um rastro no painel Desempenho de carregamento de uma página da Web.
- Procure uma sinalização vermelha na visualização da linha de execução principal. Agora, você verá que as tarefas estão cinza ("Task").
- Passe o cursor sobre uma barra para saber a duração da tarefa e se ela foi considerada "longa".
O que está causando minhas tarefas longas?
Para descobrir o que está causando uma tarefa longa, selecione a barra cinza Task. Na gaveta abaixo, selecione Bottom-Up e Group by Activity. Isso permite que você veja quais atividades contribuíram mais (no total) para a tarefa que levou tanto tempo para ser concluída. Abaixo, parece haver um conjunto caro de consultas DOM.
Quais são as maneiras comuns de otimizar as tarefas longas?
Scripts grandes costumam ser uma das principais causas de tarefas longas. Portanto, divida-os. Além disso, fique de olho nos scripts de terceiros. As tarefas longas podem atrasar a interação do conteúdo principal.
Divida todo o trabalho em pequenos fragmentos (que funcionam em menos de 50 ms) e execute-os no lugar e momento certos. O local certo pode até estar fora da linha de execução principal em um worker. Idle Even Urgent, de Phil Walton, é uma boa leitura sobre esse tópico. Consulte também o artigo sobre como otimizar tarefas longas para conhecer estratégias gerais de gerenciamento e divisão de tarefas longas.
Mantenha suas páginas responsivas. Minimizar tarefas longas é uma ótima maneira de garantir que os usuários tenham uma boa experiência ao visitar seu site. Para mais informações sobre tarefas longas, confira Métricas de desempenho centradas no usuário.