Como defer me ajudou a equilibrar performance e acessibilidade

#javascript #html #performance #webdev

Olá, pessoal!

Quero compartilhar uma solução simples que resolveu um dilema comum: como garantir acessibilidade sem prejudicar a performance?

Na empresa onde trabalho, é comercializado um plugin de acessibilidade. E como é padrão no desenvolvimento web, o script dele era inserido no final da página dos clientes, o famoso joga no final do <body>.

Mas aí surgiu um problema.

Usuários de leitores de tela precisavam percorrer todo o conteúdo da página até finalmente encontrarem o plugin. E como esses leitores seguem a ordem do DOM, o plugin só era lido lá no fim da navegação, o que tornava a experiência cansativa.

Alguns clientes, tentando melhorar a acessibilidade, moveram o script para o <head> do HTML. Isso de fato resolveu a ordem de leitura, mas acabou gerando outro problema: o site passou a demorar mais para carregar, já que o script bloqueava o carregamento da página.

Foi aí que, depois de alguns testes, encontrei uma solução simples e eficaz que pode ser útil para vários cenários parecidos: o atributo defer.

O que é o `defer`?

defer é um atributo HTML que você coloca na tag <script> para otimizar o desempenho do carregamento da página.

Na prática, ele diz ao navegador: "Pode baixar esse script agora, mas só executa depois que o HTML estiver todo carregado."

Ou seja:

O script é baixado em paralelo com o HTML;
Mas só é executado no final, quando o DOM já estiver pronto.

Exemplo:

<script defer src="script.js"></script>

Assim, você pode colocar seus scripts no <head> sem se preocupar com bloqueios ou com a ordem de carregamento do DOM.

Sem `defer`, o que acontece?

<script src="script.js"></script>

Se estiver no <head>, o navegador pausa o carregamento do HTML para baixar e executar o script. Isso pode prejudicar a performance, especialmente em conexões mais lentas, e causar a sensação de que o site está travando.

Com `defer`, o fluxo muda:

1. O HTML carrega normalmente;
2. O script é baixado ao mesmo tempo, em segundo plano;
3. Só roda depois que o HTML estiver 100% carregado.

Ou seja: você não precisa mais se preocupar com eventos como DOMContentLoaded ou ficar jogando script pro fim do HTML só pra evitar bloqueio.

`defer` vs `<body>`

Colocar o script no final do <body> também funciona (é o clássico, né?), mas se você tem múltiplos scripts ou quiser centralizar suas importações, o defer é uma ótima solução.

Com ele, você mantém os scripts no <head>, deixando o HTML mais limpo e o carregamento mais previsível.

Resumo

Onde e como?	Comportamento
`<script>` no `<head>`	❌ Bloqueia o carregamento da página
`<script defer>` no `<head>`	✅ Baixa em paralelo e executa depois do HTML
`<script>` no final do `<body>`	✅ Executa após o HTML, mas exige mais atenção com organização