Adicionar defer em scripts wordpress

Veja como adicionar defer em todos scripts do wordpress, para melhorar a velocidade de carregamento do site sem utilizar nenhum plugin.

O resultado desse snippet é imediato e o site passa a ter uma performance muito melhor, com um simples código.

Lembrando que com HTTP2 não é necessário mais concatenar scripts, apenas carregue ele corretamente com defer ou async.

Snippet PHP para adicionar defer

Esse snippet verifica arquivos com final .js e adiciona o defer neles, excluindo o arquivo jquery.js que muito provavelmente vai quebrar funções do tema.

O script frontend.js também foi excluído, esse script é do tema desse site, o seu site vai ser preciso excluir outro script.

Adicione esse script no plugin Code Snippets e selecione para carregar apenas no front-end para não quebrar o wp-admin.

Caso o site apresente algum erro, é preciso encontrar qual arquivo .js é preciso excluir, geralmente o principal do tema.

function defer_parsing_of_js($url)
{
  if (false === strpos($url, '.js')) return $url;
  if (strpos($url, 'jquery.js')) return $url;
  if (strpos($url, 'frontend.js')) return $url;
  // if (strpos($url, 'outro.js')) return $url;
  return str_replace( '></script>', ' defer></script>', $url);
  // return str_replace(' src', ' defer src', $url);
}
add_filter('script_loader_tag', 'defer_parsing_of_js', 11);

Explicação do código:

Linha1: define uma função chamada defer_parsing_of_js que recebe um parâmetro $url. Esta função será usada para filtrar as tags <script> no WordPress.

Linha3: verifica se a URL não contém a extensão .js. Se não contiver, a função retorna a URL sem fazer nenhuma alteração.

Linha4: verifica se a URL contém o nome do arquivo jquery.js. Se contiver, a função retorna a URL sem fazer nenhuma alteração. Isso significa que o arquivo jQuery não será carregado com o atributo “defer”.

Linha5: verifica se a URL contém o nome do arquivo frontend.js. Se contiver, a função retorna a URL sem fazer nenhuma alteração. Isso significa que o arquivo frontend.js não será carregado com o atributo “defer”.

Linha6: essa linha está comentada, mas basta retirar “//” para ela funcionar, e adicionar mais scripts que não deve receber defer, isso tem que ser analisado conforme o tema.

Linha7: substitui a tag </script> por defer></script> na URL do arquivo que está sendo carregado. Isso significa que esse arquivo será carregado com o atributo “defer”, que faz com que a execução do script seja adiada até que a página seja totalmente carregada.

Linha8: essa linha está comentada “//” mas é uma alternativa caso ocorra algum erro com a linha 7, nesse caso adicione // na linha 7 e retire o // da linha 8 para que a substituição seja de ’ src’, ’ defer src’.

Linha10: adiciona um filtro para alterar as tags <script> no WordPress, usando a função defer_parsing_of_js definida anteriormente. O número 11 especifica a ordem em que o filtro será executado (em relação a outros filtros que podem estar ativos).

Snippet PHP para adicionar async

Esse snippet é basicamente o mesmo, só que troca defer por async, ele é um pouco mais lento, mas pode ser mais fácil de resolver quebras do tema.

function async_parsing_of_js($url)
{
  if (false === strpos($url, '.js')) return $url;
  if (strpos($url, 'jquery.js')) return $url;
  if (strpos($url, 'frontend.js')) return $url;
  // if (strpos($url, 'outro.js')) return $url;
  return str_replace( '></script>', ' async></script>', $url);
  // return str_replace(' src', ' async src', $url);
}
add_filter('script_loader_tag', 'async_parsing_of_js', 11);

Snippet para forçar apenas 1 arquivo

Esse script pode ser interessante caso apenas 1 arquivo específico case grande degradação de performance, lembrando claro de substituir o “soessearquivo.js”.

function defer_selected_js($url) {
    if (strpos($url, 'soessearquivo.js') !== false) {
        return str_replace('></script>', ' defer></script>', $url);
    }
    return $url;
}
add_filter('script_loader_tag', 'defer_selected_js', 10);

Ou com async:

Caso tenha excluído algum script com defer e quer testar apenas ele com async esse vai ser o script, lembrando claro de substituir o “soessearquivo.js”.

function async_selected_js($url) {
    if (strpos($url, 'soessearquivo.js') !== false) {
        return str_replace('></script>', ' async></script>', $url);
    }
    return $url;
}
add_filter('script_loader_tag', 'async_selected_js', 10);