Vários plugins do WordPress® optam pela abordagem mais simples ao enfileirar seus scripts CSS e JavaScript globalmente, garantindo que suas funcionalidades funcionem em todas as páginas. Embora essa prática seja segura para os desenvolvedores, ela não é a mais adequada para o desempenho do site. Cada byte de JavaScript não utilizado aumenta o tempo de execução do navegador, impactando negativamente métricas como Total Blocking Time (TBT) e Largest Contentful Paint (LCP).
Neste guia, abordaremos como superar o registro básico de scripts, analisando como inspecionar a fila interna de scripts do WordPress e remover cirurgicamente os recursos desnecessários para os visitantes.
A Importância do Carregamento Contextual
A primeira medida de defesa consiste em garantir que seu próprio código seja carregado apenas quando necessário. É importante lembrar que o gancho wp_enqueue_scripts é apenas uma ação, e você pode envolver seus enfileiramentos em lógicas que os restrinjam a contextos específicos.
Utilizar Tags Condicionais impede que scripts sejam carregados em locais desnecessários. Por exemplo, se você possui um script pesado que só é utilizado na página “Contato”, não faz sentido carregá-lo em todas as outras páginas.
add_action( ‘wp_enqueue_scripts’, function() { // Carregar o script pesado do Map somente na página de Contato if ( is_page( ‘contact’ ) ) { wp_enqueue_script( ‘google-maps-api’, ‘https://maps.googleapis.com/…’, array(), null, true ); } });
Empregar funções como is_page(), is_single() ou até mesmo has_block() permite implementar o carregamento “Just-in-Time”, mantendo o peso inicial da página baixo.
Investigando o $wp_scripts Global
O verdadeiro gargalo de desempenho geralmente vem de plugins de terceiros. Para solucioná-lo, é necessário identificar os handles deles. Embora você possa gastar um tempo considerável revisando os arquivos de origem dos plugins, é mais eficiente observar o estado interno do gerenciador de scripts do WordPress.
O WordPress utiliza a classe WP_Scripts para gerenciar a fila. Durante o ciclo de vida da página, uma variável global chamada $wp_scripts contém todos os scripts registrados e enfileirados.
Identificando os Excessos
Você pode inspecionar esse objeto global para verificar exatamente quais handles estão enfileirados para a solicitação atual. Para usar o seguinte trecho de código, adicione-o a um plugin personalizado em um site de staging ou em um ambiente de desenvolvimento local.
É essencial utilizar o gancho wp_print_scripts. Esse gancho é acionado imediatamente antes do WordPress começar a imprimir os scripts no cabeçalho, garantindo que todos os plugins tenham concluído sua lógica de enfileiramento, oferecendo uma visão completa da fila final.
Execução em Ambientes Locais ou de Staging
Esse código deve ser executado apenas em ambientes não produtivos, como uma instalação local ou um site de staging.
- Local vs. Staging: Enquanto um site local é “seguro”, um site de staging é muitas vezes superior para essa auditoria, pois espelha perfeitamente a configuração de plugin e o estado do banco de dados da sua produção.
- Por que Não em Produção? Este trecho retorna dados diretamente no código-fonte HTML do seu site. Em um site ao vivo, isso pode parecer pouco profissional para os visitantes e expor sua pilha de plugins a potenciais atacantes. Além disso, executar lógica de depuração em cada carregamento de página adiciona sobrecarga desnecessária ao desempenho do servidor.
add_action( ‘wp_print_scripts’, function() { // Executar apenas se estamos logados como admin para adicionar uma camada extra de privacidade if ( ! current_user_can( ‘manage_options’ ) ) { return; } global $wp_scripts; // Verificar se a classe WP_Scripts tem handles enfileirados if ( ! empty( $wp_scripts->queue ) ) { // Exibir os handles enfileirados no console JavaScript do navegador echo ‘console.log(“Auditoria Delicious Brains – Handles enfileirados: ‘ . implode( ‘, ‘, $wp_scripts->queue ) . ‘”);’; } });
Ao inspecionar a propriedade queue do objeto $wp_scripts, você pode encontrar as strings exatas necessárias para direcionar ativos de plugins específicos.
Desenfileiramento Programático: A Ação Cirúrgica
Depois de identificar os handles-alvo, você pode usar wp_dequeue_script() para removê-los. No entanto, o sucesso depende muito da prioridade.
No WordPress, as prioridades dos ganchos funcionam como uma lista de espera, onde um número maior é executado mais tarde. Como a maioria dos plugins enfileira ativos com a prioridade padrão de 10, você deve conectar-se ao wp_enqueue_scripts com um número bem maior (como 100) para garantir que sua lógica de remoção seja executada após a lógica de carregamento do plugin.
Exemplo: Eliminando o Bloat de Plugins
Suponha que um plugin de “Avaliações” esteja carregando um arquivo JavaScript de 150KB na sua página inicial. Se as avaliações só existem nas páginas de produtos, você pode remover esse script de todos os outros locais.
add_action( ‘wp_enqueue_scripts’, function() { // Se estivermos na página inicial, remover o ativo de Avaliações if ( is_front_page() ) { wp_dequeue_script( ‘plugin-reviews-js’ ); wp_dequeue_style( ‘plugin-reviews-css’ ); } }, 100 ); // Número alto = executa mais tarde
Para plugins mais agressivos que ainda conseguem carregar, você pode optar por wp_deregister_script(). Esta é uma opção mais permanente que remove completamente o handle de seu arquivo fonte para aquela solicitação específica.
A Armadilha das Dependências
Antes de começar a desativar todos os scripts que você encontrar, é preciso verificar as dependências. A função wp_enqueue_script() permite definir uma lista de outros scripts que devem ser carregados primeiro.
Desativar um script do qual outros scripts enfileirados dependem pode prejudicar a funcionalidade do site. O navegador exibirá erros de “não definido” no console. Sempre verifique a propriedade registered dentro do global $wp_scripts para ver o array de dependências de um handle específico antes de removê-lo.
Considerações Finais
A gestão avançada de ativos é um jogo de subtração. Ao auditar o global WP_Scripts e implementar desenfileiramentos condicionais de alta prioridade, você pode reduzir significativamente o peso de sua interface. Essa abordagem cirúrgica assegura que seu site permaneça ágil e leve, sem sacrificar a funcionalidade dos plugins necessários.
Fonte: Delicious Brains
