Adiar o jQuery no WordPress

Um guia para adiar o jQuery no WordPress

Saudações, colegas aficionados por performance! Estou animado para compartilhar dicas sobre como otimizar seu site WordPress e melhorar os Core Web Vitals. Hoje vou mostrar como adiar o carregamento do jQuery, melhorando a velocidade do seu site e, consequentemente, a experiência do usuário.

Por que adiar o jQuery?

O jQuery, uma biblioteca JavaScript robusta, é sem dúvida uma ferramenta poderosa, mas seu carregamento síncrono pode às vezes atrasar o carregamento inicial da página. Muitos temas disponíveis nos vários marketplaces dependem do jQuery. O jQuery não foi criado para ser adiado, mas infelizmente muitos temas não adiam o jQuery. 

Então, qual é a principal vantagem de adiar o jQuery, você deve se perguntar? Bem, dê uma olhada nesta imagem abaixo. Ela mostra a diferença na análise do HTML entre scripts normais, adiados e assíncronos. Se o jQuery não for adiado, o navegador bloqueará a análise do 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 tempo, especialmente quando se trata do Largest Contentful Paint. 

A razão pela qual as compilações de temas não adiam o jQuery por padrão é por causa de sistemas legados. Alguns plugins adicionam scripts (inline) que dependem do jQuery. Se o jQuery estiver carregando de forma adiada, 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: Identificando a inclusão do jQuery no seu tema

Para iniciar o processo de otimização, precisamos identificar onde o jQuery está incluído no seu tema do WordPress. Comumente encontrado no arquivo functions.php do tema ou diretamente no arquivo header.php, procure por linhas semelhantes a:

wp_enqueue_script('jquery');    

Agora sabemos que o handle para o jQuery é chamado 'jquery'. Entender onde o jQuery é enfileirado estabelece as bases para nossa jornada de otimização.

Passo 2: Criando um tema filho para estabilidade a longo prazo

Antes de fazer qualquer alteração, considere criar um tema filho para proteger suas modificações contra atualizações futuras. Isso garante que seu trabalho duro não será substituído quando o tema pai receber uma atualização. Criar um tema filho é um pouco como adicionar uma camada extra de armadura à estrutura do seu site.

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

Agora, vamos mergulhar nos detalhes técnicos. No arquivo functions.php do seu tema filho, adicione o seguinte código e modifique-o para corresponder à localização do arquivo jQuery e ao handle. Vamos usar a nova estratégia defer

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 padrão do jQuery.
• 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: agora 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!

Método 2: usar um plugin

Plugins como 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 executando alguns outros truques, como armazenar em cache eventos do jQuery 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, em seguida, ativando-os rapidamente. Esse truque imita o adiamento de scripts, mas tem algumas desvantagens

• O CloudFlare Rocket Loader quebra um recurso do navegador chamado 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 bons de se ter. Ele apenas adia tudo sem qualquer consideração e deixa você sem controle sobre o tempo do script.
  

Teste, Teste, Teste!

Após implementar essas alterações, teste exaustivamente a funcionalidade do seu site. Preste muita atenção aos elementos interativos, animações e recursos dependentes do jQuery para garantir que funcionem perfeitamente. Testes rigorosos garantem que a otimização não introduza inadvertidamente nenhum problema na sua interface de usuário.

Solução de problemas

Se você encontrar algum problema, eles provavelmente se enquadrarão em uma das 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), é mais provável que seja originado de um script inline. Se for outro arquivo, pode ser um problema de tempo ou você também se esqueceu de adiar esse arquivo.

Scripts dependentes

Scripts Inline

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

• Use o truque type="module". O mais recente <script type="module"> também adiará o JavaScript inline.
• Coloque scripts inline em um arquivo externo. Se você precisar de variáveis, você 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ê anexou 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 em jQuery(). 

E como sempre, se você estiver preso, não hesite em me contratar para uma sessão de 2 horas!