Até que ponto as tarefas do JavaScript afetam o desempenho dos sites – e o que fazer a respeito

A execução das tarefas do JavaScript é geralmente a fonte dos problemas de desempenho mais comuns dos sites. Evitar as chamadas tarefas longas e bloquear o thread principal do JavaScript (JS) é uma das estratégias mais importantes para melhorar o desempenho. Neste artigo, vamos ver até que ponto as tarefas longas podem impactar o desempenho dos sites, bem como as etapas que você pode seguir para resolvê-las.

Resumo

• O que é uma tarefa longa do JavaScript?
• Por que as tarefas longas do JavaScript prejudicam os Core Web Vitals?
• Como encontrar e medir tarefas longas do JavaScript?
• Recomendações gerais para eliminar tarefas longas de JavaScript
• Como resolvemos o problema de tarefas longas do JavaScript no Prism

O que é uma tarefa longa do JavaScript?

Os navegadores desempenham operações de exibição de página em um único thread, por isso é essencial que o tempo de execução da tarefa em JS não ultrapasse 50 ms. Se este indicador for excedido, o fenômeno é chamado de tarefa longa. Quando isto acontece, o usuário percebe um aumento de carga no navegador. Neste caso, cliques nos elementos da página são atrasados, a rolagem fica irregular ou a página simplesmente não responde.

Além do código do site (execução do JS), a formação de tarefas longas também pode ser influenciada pela velocidade da rede e pelo poder de processamento. Por exemplo, se tarefas de longa execução bloqueiam o thread principal do navegador devido a um baixo poder de processamento, o navegador não poderá processar os dados do usuário com rapidez suficiente, levando a um atraso na resposta da página.

Vale mencionar que tarefas longas podem ocorrer ao alterar o estilo de um elemento via JS, por exemplo, quando a altura de um bloco muda, forçando um recálculo das coordenadas da página: recalculate style => reflow, repaint.

Por que as tarefas longas do JavaScript prejudicam os Core Web Vitals?

A métrica FID (First Input Delay ou tempo de espera antes da primeira interação com o conteúdo) é a mais afetada pelas tarefas longas. O thread principal do navegador não é ocupado de maneira uniforme ao longo da vida útil de uma página, então o FID pode variar muito, dependendo de quando exatamente o usuário interage pela primeira vez com a página. Como resultado, alguns usuários podem não experimentar nenhuma latência, enquanto outros imediatamente percebem os sintomas de sobrecarga que já discutimos. É por isso que é importante entender como buscar as tarefas longas e otimizar o código para melhorar o FID do seu site.

O FID depende diretamente do comportamento de usuários reais e, como já mencionamos antes, é único para cada um deles. O segredo aqui é o monitoramento de comportamento, que pode ser feito com uma ferramenta de monitoramento Core Web Vitals  para a otimização do desempenho baseada em dados reais.

Como encontrar e medir tarefas longas do JavaScript?

Os serviços a seguir vão nos ajudar com isso:

Chrome DevTools

No painel Performance, registre o rastreamento de carregamento da página web.

[1] 

Procure as bandeiras vermelhas na área de fluxo. “Tarefas” aparecem em cinza.

 Passe o cursor sobre a barra para ver quanto tempo a tarefa levou para ser executada e se ela é considerada “longa”.

Para descobrir a origem de uma tarefa longa, selecione a barra de tarefas cinza. No painel da parte inferior, selecione as opções Bottom-Up e Group by Activity. Você verá quais foram as ações que mais contribuíram para a execução da tarefa.

Webpagetest.org

O bloqueio do thread principal por 50 ms é mostrado no diagrama usando blocos vermelhos. Este evento também bloqueia a entrada do usuário. A cor verde significa que a linha não está bloqueada.

Tarefas longas API

 Podemos medir tarefas longas em qualquer aplicativo após assinar a interface PerformanceObserver com o seguinte código:

var observer = new PerformanceObserver(function(list) {

var perfEntries = list.getEntries();

for (var i = 0; i < perfEntries.length; i++) {

     // Process long task notifications:

     // report back for analytics and monitoring

     // …

}

});

// register observer for long task notifications

observer.observe({entryTypes: [“longtask”]});

// Long script execution after this will result in queueing

// and receiving “longtask” entries in the observer.

Recomendações gerais para eliminar tarefas longas de JavaScript

• Execute o código Web Workers em um thread separado, permitindo que o thread principal se concentre em outras tarefas importantes, como analisar HTML, preparar a árvore de renderização, renderizar pixels, responder à entrada do usuário, etc.
• Quebre o código JavaScript marcado como tarefas longas em tarefas menores, usando as funções “setTimeout/requestidlecallback/requestAnimationFrame”. Isto fará com que o thread principal seja executado da maneira mais eficiente possível e desempenhe todas as operações sem atrasos.
• Facilite a carga da rede ao carregar uma página (faça o menor número possível de solicitações de rede, carregue-as o mais tarde possível, preferencialmente após o evento FID).
• Atrase o JavaScript não utilizado usando async ou defer.

Como resolvemos o problema de tarefas longas do JavaScript no Prism

Clickio Prism usa tecnologia avançada para criar uma versão de carregamento rápido e otimizada para dispositivos móveis de um site. Ao desenvolver o Prism, era importante garantir que as páginas fossem carregadas rapidamente, sem nenhum impacto negativo na experiência do usuário, por isso tomamos as seguintes providências para eliminar as tarefas longas do JavaScript:

• Dividimos as tarefas longas em menores usando a função requestidlecallback/requestAnimationFrame.
• Temos big data que não interage com o DOM (usando Web Workers).
• Criamos uma fila de scripts de widget de carregamento.
• Reduzimos a carga da CPU dos processos ao carregar a página (reduzindo o número de solicitações e transferindo dados durante a renderização da página).
• Carregamos alguns rastreadores de terceiros com a biblioteca partytown.js.

Ao incorporar ajustes técnicos como esses, juntamente com outros recursos, como um global CDN e carregamento lento inteligente, o Prism pode fazer uma diferença significativa no desempenho do site e na experiência do usuário. De fato, em média, os editores que usam o Prism veem os visitantes passando 45% mais tempo em seu site e um aumento de 59% em seu RPM de sessão.

Para saber mais sobre o Prism e fazer uma avaliação gratuita, clique aqui.