Adiar o jQuery no WordPress

Por que adiar o jQuery?

O jQuery ainda é enviado com todas as instalações do WordPress e a maioria dos temas o carrega sem adiá-lo (defer). 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 de 2024, impulsionado em grande parte pelo WordPress. No entanto, apenas 47% das páginas mobile usam o atributo defer em qualquer script. Isso significa que a maioria dos sites WordPress ainda carrega 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, com defer e async. Se o jQuery não for adiado, o navegador bloqueará a análise de HTML até que o script tenha sido executado. Se o jQuery for adiado, o navegador não precisará bloquear o analisador. E isso vai poupar muito tempo. Para uma comparação completa, veja async vs defer e como isso afeta as Core Web Vitals.

O motivo pelo qual os criadores de temas não estão adiando o jQuery por padrão é devido a código 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: Encontre onde o jQuery é enfileirado

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

wp_enqueue_script('jquery');    

Agora sabemos que o identificador para o jQuery é chamado de '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 ao local do arquivo jQuery e ao seu identificador. 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 detalhar:

• 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, agora você sabe como adiar qualquer script, porque o processo é exatamente o mesmo! Para mais técnicas de adiamento além do WordPress, veja 16 métodos para adiar JavaScript.

Cuidado com 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 identificador 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 disso, adiando também as dependências e executando alguns outros truques, como armazenar eventos jQuery 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 desabilitando todos os seus scripts durante o carregamento da página e depois os habilitando rapidamente. Esse truque imita o adiamento de scripts, mas tem algumas desvantagens:

• O Cloudflare Rocket Loader quebra um recurso do navegador chamado scanner 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 Cloudflare Rocket Loader é um instrumento bastante contundente. 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 controle sobre o tempo de execução do script.

Sites WordPress têm uma taxa de aprovação nas Core Web Vitals de 45% em dispositivos móveis, de acordo com o Web Almanac de 2025, com a LCP sendo a métrica mais fraca, com apenas 53%. O jQuery com bloqueio de renderização é uma das causas mais comuns. Adiá-lo não corrigirá tudo, mas remove um dos maiores bloqueios que impedem o seu site de obter uma pontuação de aprovação na LCP.

Teste suas alterações

Depois de 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 ajudará você a consertá-lo.

Solução de problemas

Se você tiver algum problema, eles provavelmente se enquadrarão em uma de 3 categorias. A maioria dos problemas pode ser encontrada abrindo o inspetor e navegando até a guia do console. Se houver algum problema, é provável que você encontre avisos parecidos com este e que dizem '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), muito provavelmente se origina 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 do type="module". A tag mais recente <script type="module"> também adiará o JavaScript inline.
• Coloque scripts inline em um arquivo externo. Se você precisar de variáveis, pode 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 do evento DOMContentLoaded e load. Você pode depender disso. Se ele for adiado, um script pode ser executado após o evento DOMContentLoaded. Isso significa que, se você tiver anexado um manipulador de eventos no 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 no jQuery().

Em todos os sites WordPress monitorados pela CoreDash, sites que adiam todos os scripts incluindo o jQuery têm uma LCP de 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 mudança 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 dados de campo de visitantes reais informam se sua LCP realmente melhorou. Para mais detalhes sobre como o posicionamento do script afeta as Core Web Vitals, veja o guia do WordPress sobre Core Web Vitals. E, como sempre, se você estiver com dificuldades, não hesite em entrar em contato comigo!