Adiar o jQuery no WordPress

Por que adiar o jQuery?

O jQuery ainda é fornecido com todas as instalações do WordPress e a maioria dos temas o carrega sem adiá-lo. Isso significa que ele bloqueia a análise de HTML em cada carregamento de página. Veja como corrigir isso.

Última revisão por Arjen Karel em março de 2026

O jQuery aparece em 74% de todas as páginas da web, de acordo com o Web Almanac 2024, impulsionado em grande parte pelo WordPress. No entanto, apenas 47% das páginas para dispositivos móveis usam o atributo defer em algum script. Isso significa que a maioria dos sites WordPress ainda está carregando o jQuery de forma síncrona, bloqueando a análise de HTML e atrasando todas as métricas de pintura na página, especialmente a Largest Contentful Paint.

Dê uma olhada na imagem abaixo. Ela mostra a diferença na análise de HTML entre scripts normais, diferidos (deferred) e assíncronos (async). Se o jQuery não for adiado, o navegador bloqueará a análise de HTML até que o script seja executado. Se o jQuery for adiado, o navegador não precisará bloquear o analisador. E isso vai economizar muito do seu tempo. Para uma comparação completa, veja async vs defer e como isso afeta os Core Web Vitals.

O motivo pelo qual os criadores de temas não estão adiando o jQuery por padrão é devido a um legado. Alguns plugins adicionam scripts (inline) que dependem do jQuery. Se o jQuery for carregado com defer, mas o script que precisa do jQuery não for adiado, haverá um conflito (e um erro).

Método 1: Adiar o jQuery manualmente

Passo 1: Descubra onde o jQuery é enfileirado

Primeiro, encontre onde o jQuery está incluído no seu tema WordPress. Geralmente, está no arquivo functions.php do tema ou diretamente no arquivo header.php. Procure por linhas como:

wp_enqueue_script('jquery');    

Agora sabemos que o handle para o jQuery é chamado 'jquery'.

Passo 2: Use um tema filho

Se você estiver modificando um tema pai, crie um tema filho primeiro. Caso contrário, suas alterações serão substituídas na próxima atualização do tema.

Passo 3: Enfileire o jQuery com o atributo 'defer'

No arquivo functions.php do seu tema filho, adicione o seguinte código e modifique-o para corresponder à localização do arquivo e ao handle do jQuery. Estamos usando a estratégia de defer do WordPress 6.3:

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Vamos analisar:

• wp_deregister_script('jquery'): Cancela o registro do script jQuery padrão.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);: Registra o jQuery com a estratégia 'defer'.
• wp_enqueue_script('jquery'): Enfileira o script jQuery modificado.

Et voila: você adiou com sucesso o jQuery no seu site WordPress. E como bônus, você agora sabe como adiar qualquer script, pois o processo é exatamente o mesmo! Para mais técnicas de adiamento além do WordPress, consulte 16 métodos para adiar JavaScript.

Cuidado com os scripts inline. O WordPress 6.3 removerá silenciosamente a estratégia de defer se o seu script tiver scripts inline anexados na posição after via wp_add_inline_script(). Se você adiar o jQuery, mas ele ainda carregar de forma síncrona, verifique se algum plugin está adicionando scripts inline ao handle do jQuery.

Método 2: use um plugin

Plugins como o WP Core Web Vitals tornam super fácil adiar o jQuery e muitos plugins podem até lidar com as complicações que podem surgir, adiando também as dependências e realizando alguns outros truques, como armazenar eventos em cache até que o jQuery tenha sido executado.

Método 3: CloudFlare

Outra maneira super simples de adiar o jQuery é usar o Rocket Loader da CloudFlare. O Rocket Loader funciona desativando todos os seus scripts durante o carregamento da página e ativando-os rapidamente em seguida. Esse truque imita o adiamento de scripts, mas tem algumas desvantagens:

• O Rocket Loader da CloudFlare quebra um recurso do navegador chamado verificador de pré-carregamento (preload scanner). Com o Rocket Loader, os scripts não são pré-carregados e pode demorar um pouco mais para que seus scripts sejam baixados e executados.
• O Rocket Loader da CloudFlare é um instrumento um tanto agressivo. Ele não discrimina entre scripts importantes, menos importantes e interessantes de se ter. Ele simplesmente adia tudo sem qualquer consideração e deixa você sem nenhum controle sobre o tempo de execução do script.

Os sites WordPress têm uma taxa de aprovação de 45% nos Core Web Vitals em dispositivos móveis, de acordo com o Web Almanac 2025, com a LCP sendo a métrica mais fraca, com apenas 53%. O jQuery bloqueador de renderização é uma das causas mais comuns. Adiá-lo não corrigirá tudo, mas removerá um dos maiores bloqueadores entre o seu site e uma pontuação de LCP aprovada.

Teste suas alterações

Após adiar o jQuery, verifique o seu site. Abra o console do navegador e procure por erros. Clique nos seus menus, sliders, formulários e qualquer coisa que use JavaScript. Se algo quebrar, a seção de solução de problemas abaixo o ajudará a consertar.

Solução de problemas

Se você encontrar algum problema, ele provavelmente se enquadrará em uma de 3 categorias. A maioria dos problemas pode ser encontrada abrindo o inspetor e navegando até a aba do console. Se houver algum problema, você provavelmente encontrará avisos parecidos com este e lerá 'Uncaught ReferenceError: jQuery is not defined':

Corrigi-los não é tão difícil de fazer. Ao lado do erro, há uma referência à origem do erro. Se for (index), o mais provável é que seja originado de um script inline. Se for outro arquivo, pode ser um problema de tempo ou você se esqueceu de adiar esse arquivo também.

Scripts dependentes

Scripts Inline

$(function(){
 // do something
})

• Use o truque type="module". A versão mais recente <script type="module"> também adiará o JavaScript inline.
• Coloque os scripts inline em um arquivo externo. Se você precisar de variáveis, poderá adicioná-las em um script inline diretamente na página, mas as principais funções dependentes do jQuery devem estar em um arquivo externo que também seja adiado.

Problemas de tempo

Outro problema menos comum se origina do tempo. Se o jQuery não for adiado, ele será executado antes dos eventos DOMContentLoaded e load. Você pode depender disso. Se for adiado, um script pode ser executado após o evento DOMContentLoaded. Isso significa que, se você anexou um manipulador de eventos ao evento DOMContentLoaded, ele não será executado de forma confiável. Se você se deparar com problemas como esses, tente alterar o gatilho ou envolver a função com jQuery().

Em todos os sites WordPress monitorados pelo CoreDash, os sites que adiam todos os scripts, incluindo o jQuery, têm um LCP p75 de 2,1 segundos em comparação com 3,4 segundos em sites que carregam o jQuery de forma síncrona. Essa é uma melhoria de 38% a partir de uma única alteração de configuração. Após implantar suas alterações, verifique a melhoria com Real User Monitoring. As pontuações do Lighthouse informam se o atributo defer está funcionando, mas os dados de campo de visitantes reais informam se o seu LCP realmente melhorou. Para saber mais sobre como o posicionamento do script afeta os Core Web Vitals, consulte o guia do Core Web Vitals para WordPress. E como sempre, se você estiver com dificuldades, não hesite em me contatar!