Defer vs Async JavaScript e como isso afeta os Core Web Vitals
Aprenda quando usar async em JavaScript e quando usar defer para obter os melhores resultados de Core Web Vitals
Defer vs Async JavaScript e como isso afeta os Core Web Vitals
Neste artigo vou mostrar a diferença entre defer vs async JavaScript e por que isso afeta os Core Web Vitals
Sempre que faço uma auditoria dos Core Web Vitals de um cliente, frequentemente percebo que há pouca distinção em uma página entre JavaScript bloqueante do parser (sync), assíncrono ou diferido. Isso é uma pena porque scripts diferentes têm tempos ideais diferentes.
Table of Contents!
Em Resumo:
JavaScript 'Normal' no head da página é executado antes do início do parsing do HTML, scripts async não bloqueiam o início do parsing mas são executados assim que são baixados. Scripts diferidos são executados após a página ter sido analisada.
Em geral, o atributo async é uma boa escolha para scripts que não precisam interagir com o DOM, como scripts que carregam imagens ou vídeos. O atributo defer é uma boa escolha para scripts que precisam interagir com o DOM, como scripts que inicializam widgets ou adicionam event listeners. Omita ambos se seu script faz alterações massivas na viewport visível.
1. JavaScript Síncrono (Sync):
Por padrão, JavaScripts no head da página são scripts síncronos. Quando o código JavaScript é executado de forma síncrona, ele imediatamente bloqueia a main thread do navegador até que o script seja totalmente executado. Isso significa que o navegador deve esperar que o código JavaScript termine antes de prosseguir com outras tarefas, como renderizar o DOM. Como resultado, JavaScript síncrono pode impactar significativamente a velocidade e responsividade da página, especialmente para scripts maiores e complexos. Quando uma página contém JavaScript síncrono, o navegador não pode carregar outros recursos ou renderizar a página até que o JavaScript seja executado, levando a possíveis atrasos no carregamento da página.
<!DOCTYPE html>
<html>
<head>
<title>Sync JavaScript Example</title>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
2. JavaScript Assíncrono (Async):
JavaScript assíncrono permite que o navegador continue executando outras tarefas enquanto o script está sendo baixado em segundo plano. Ao usar o atributo async na tag <script>, os desenvolvedores indicam que o script não depende do DOM e pode ser executado independentemente. O navegador não espera que o script async termine de carregar antes de continuar com a renderização da página. Como resultado, scripts async têm o potencial de melhorar a velocidade da página, especialmente em conexões mais lentas, pois não bloqueiam o caminho crítico de renderização.
<!DOCTYPE html>
<html>
<head>
<title>Async JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
É importante notar que scripts async podem ser executados em uma ordem imprevisível, pois são executados assim que ficam disponíveis, independentemente da sua ordem no documento HTML. Se os scripts dependem uns dos outros, usar async pode causar erros de dependência.
3. JavaScript Diferido:
JavaScript diferido, indicado pelo atributo defer na tag <script>, permite que os scripts sejam baixados em segundo plano enquanto o navegador continua analisando o documento HTML. Semelhante ao async, scripts diferidos não bloqueiam o caminho crítico de renderização, resultando em um carregamento mais rápido da página. No entanto, a diferença principal é que scripts diferidos mantêm sua ordem de execução, executando na ordem em que aparecem no documento HTML. Scripts diferidos são executados após o DOM ser totalmente analisado e logo antes do evento DOMContentLoaded ser disparado.
<!DOCTYPE html>
<html>
<head>
<title>Defer JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Usar defer é benéfico para scripts que dependem do DOM e precisam ser executados em uma ordem específica, pois garante que os elementos DOM necessários estejam disponíveis quando o script é executado. Isso pode ser vantajoso para scripts que realizam manipulação do DOM ou têm dependências de outros scripts.
| Atributo | Quando o script é carregado | Quando o script é executado |
|---|---|---|
none | Em segundo plano | Antes de construir o DOM |
async | Em segundo plano | Imediatamente após o carregamento |
defer | Em segundo plano | Após o restante da página ter sido analisado, na ordem em que aparece no HTML |
Como async e defer melhoram a velocidade da página?
JavaScript síncrono (Sync) pode desacelerar significativamente o carregamento da página e tornar o site menos responsivo, especialmente se os scripts são grandes ou demoram muito para executar.
JavaScript assíncrono (Async) pode melhorar a velocidade da página permitindo que scripts independentes sejam carregados em paralelo com outros recursos. No entanto, é preciso ter cuidado para gerenciar dependências corretamente e evitar comportamento inesperado.
JavaScript diferido também pode melhorar a velocidade da página ao não bloquear o caminho crítico de renderização. Ele garante que o DOM esteja pronto antes de executar scripts que dependem dele, resultando em uma ordem de execução mais previsível e controlada.
Melhores Práticas:
- Use assíncrono (async) para scripts independentes que não dependem do DOM e podem ser executados fora de ordem.
- Use diferido (defer) para scripts que dependem do DOM e precisam ser executados em uma ordem específica, especialmente ao realizar manipulação do DOM.
- Evite usar JavaScript síncrono sempre que possível, pois ele impacta negativamente a velocidade da página e a user experience.
Ao usar a técnica de carregamento adequada para arquivos JavaScript, você pode otimizar a velocidade da página, melhorar a user experience e garantir interações mais suaves em seus sites. Entender as diferenças entre sync, async e defer e suas implicações no carregamento da página é essencial para construir aplicações web performáticas.
Note que a eficácia do uso dos atributos sync, async ou defer pode variar com base no contexto específico e no conteúdo do site. Testes regulares e análise de desempenho são cruciais para ajustar a estratégia de carregamento da página e garantir resultados ótimos para diferentes cenários.
Indo além, carregue scripts sob demanda
Async e defer podem acelerar uma página ao não bloquear o parser, mas é importante notar que 'adiar scripts' não resolverá todos os seus problemas. Por exemplo, o Largest Contentful Paint é vulnerável à competição de rede e CPU causada por scripts diferidos e async. O Interaction to Next Paint também é afetado por scripts que executam cedo durante o carregamento da página. Por isso, sempre que possível, você deve carregar scripts sob demanda para ter mais controle sobre seu impacto no desempenho da página. Curioso? Leia como carregamos scripts sob demanda
Compare your segments.
Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.
- Device filtering
- Route Analysis
- Connection Types
