Recentemente, um de nossos leitores nos perguntou como eles podem mover os JavaScripts para o final no WordPress para aumentar sua pontuação de velocidade de página do Google. Ficamos felizes que perguntaram, porque honestamente queríamos escrever sobre isso. Anteriormente, falamos sobre como adicionar JavaScripts e estilos CSS corretamente no WordPress. Neste artigo, mostraremos como mover os JavaScripts para o final no WordPress, para que você possa melhorar o tempo de carregamento do seu site e sua pontuação de velocidade de página do Google.
Benefícios de Mover JavaScripts para o Final
JavaScript é uma linguagem de programação do lado do cliente. Ela é executada e rodada pelo navegador web de um usuário e não pelo seu servidor web. Quando você coloca JavaScript no topo, os navegadores podem executar ou processar o JavaScript antes de carregar o resto da sua página. Quando os JavaScripts são movidos para o final, seu servidor web renderizará a página rapidamente e então o navegador do usuário executará os JavaScripts. Como toda a renderização do lado do servidor já foi feita, o JavaScript será carregado em segundo plano, tornando o carregamento geral mais rápido.
Isso melhorará sua pontuação de velocidade ao testar com o Google Page Speed ou Yslow. O Google e outros motores de busca agora consideram a velocidade da página como uma das métricas de desempenho ao exibir resultados de pesquisa. Isso significa que sites que carregam mais rápido aparecerão de forma mais proeminente nos resultados de pesquisa.
A Maneira Correta de Adicionar Scripts no WordPress
O WordPress possui um poderoso sistema de enfileiramento que permite aos desenvolvedores de temas e plugins adicionar seus scripts em fila e carregá-los conforme necessário. Enfileirar scripts e estilos corretamente pode melhorar significativamente a velocidade de carregamento da sua página.
To show you a basic example, we will add a little JavaScript into a WordPress theme. Save your JavaScript in a .js file and place that .js file in your theme’s js directory. If your theme does not have a directory for JavaScripts, then create one. After placing your script file, edit your theme’s functions.php file and add this code:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
In this code, we have used wp_register_script() function. This function has the following parameters:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
To add the script in the footer or bottom of a WordPress page, all you need to do is set the $in_footer parameter to true.
We have also used another function get_template_directory_uri() which returns the URL for the template directory. This function should be used for enqueuing and registering scripts and styles in WordPress themes. For plugins we will be using plugins_url() function.
The Problem:
The problem is that some times WordPress plugins add their own JavaScript to pages inside <head> or inside page body. In order to move those scripts to the bottom you need to edit your plugin files and properly move the scripts to the bottom.
Finding The JavaScript Source
Open your site in the web browser and view page source. You will see the link to the JavaScript file indicating the location and the origin of the file. For example, the screenshot below tells us that our script belongs to a plugin called ‘test-plugin101’. The script file is located in the js directory.
Sometimes you will see JavaScript added directly into the page and not linked through a separate .js file. In that case, you would need to deactivate all your plugins one by one. Refresh the page after deactivating each plugin until you find the one adding the script to your pages. If the JavaScript does not disappear even after deactivating all the plugins, then try to switch to another theme to see if the JavaScript is added by your theme.
Register and Enqueue Scripts
Assim que você encontrar o plugin ou tema que está adicionando JavaScript na seção do cabeçalho, o próximo passo é descobrir onde o plugin faz uma chamada para o arquivo. Em um dos arquivos PHP do seu tema ou plugin, você verá uma chamada para aquele arquivo .js específico.
Se o plugin ou tema já estiver usando enfileiramento para adicionar o arquivo JavaScript, tudo o que você precisa fazer é alterar a função wp_register_script no seu plugin ou tema e adicionar true para o parâmetro $in_footer. Assim:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Vamos supor que seu plugin ou tema esteja adicionando JavaScript bruto no cabeçalho ou entre o conteúdo. Encontre o código JavaScript bruto nos arquivos do plugin ou tema, copie o JavaScript e salve-o em um arquivo .js. Em seguida, use a função wp_register_script() conforme mostrado acima, para mover o JavaScript para o final.
Nota do editor: É importante entender que, ao fazer alterações nos arquivos principais e atualizar o plugin, suas alterações não serão substituídas. Uma maneira melhor de fazer isso seria desregistrar o script e registrá-lo novamente a partir do arquivo functions.php do seu tema. Veja este tutorial.
Além de mover os scripts para o rodapé, você também deve considerar usar um plugin de mídia social mais rápido e fazer lazy load de imagens. Além disso, você também deve usar W3 Total Cache e MaxCDN para melhorar a velocidade do seu site.
Esperamos que este artigo tenha ajudado você a mover JavaScripts para o final no WordPress e a melhorar a velocidade da sua página. Para perguntas e feedback, por favor, deixe um comentário abaixo.
Ravi
Meus plugins serão atualizados normalmente quando eu mover seus js para um único arquivo? Sou novato.
Equipe WPBeginner
Existem várias maneiras de fazer isso. Uma das mais comuns é colar os arquivos JavaScript carregados de diferentes fontes em um único arquivo JS e, em seguida, enfileirá-lo.
Catharine
Ótimo, obrigado!
Catharine
Oi Syed, obrigado pelo tutorial. No entanto, sou um completo novato e tenho uma pergunta muito básica. Para aquele trecho de código que você postou (toda a função, etc.), precisamos adicioná-lo ao arquivo functions.php para cada pedaço de javascript que queremos enfileirar? Acho que o que estou perguntando é, como você formataria esse código se tivesse mais de um pedaço de javascript sendo carregado nos cabeçalhos de mais de uma página?
Sua ajuda seria muito apreciada!
Marc Jacobs
Olá, ótimo tutorial. Tenho uma pergunta. Executei meu site no Google Page Speed Insights e recebi o aviso de que precisava eliminar JavaScript (e CSS) que bloqueia a renderização para aumentar a velocidade da minha página. Li as informações neste site (ótima leitura!), mas não consigo encontrar os arquivos php onde o plugin "chama" os arquivos js que causam a lentidão do meu site. Descobri qual plugin está causando a maior parte do atraso (Google-maps-ready), mas não tenho ideia de como proceder a partir daí. Procurei em todos os arquivos php na pasta do plugin, mas não consigo encontrar um arquivo js com um nome remotamente semelhante aos arquivos mencionados no teste de velocidade do Google:
…
Como descubro qual arquivo php editar? A ajuda seria muito apreciada!
Saudações,
Marc.
WPBeginner Support
Um plugin no seu site Google Maps Ready está adicionando esses arquivos.
Admin
Basavaraj Tonagatti
Olá, recentemente mudei para o Genesis Framework + Eleven 40 Child Theme. Também estou enfrentando o mesmo problema ao executar o teste de velocidade da página do Google. Mas como não sei a maneira exata de fazer isso, acho difícil fazer as alterações. Alguém pode me guiar sobre qual é a causa exata no meu site e como remover esse problema de JavaScript? (Não conheço nenhuma linguagem de estilo e estou totalmente alheio a essas linguagens de código.)
Joseph Stanley-Hunt
Muito obrigado, eu estava me perguntando como fazer isso e alguns outros truques (que também encontrei respostas aqui).
Uma pergunta, porém, vejo que não há 'in-head' nos parâmetros. isso significa que se 'in_footer' for definido como falso, ele é registrado no cabeçalho automaticamente?
WPBeginner Support
Sim, o valor padrão para 'in_footer' é falso. Portanto, você precisa adicionar explicitamente 'in_footer' como verdadeiro, caso contrário, ele aparecerá no cabeçalho.
Admin
Mike
A atualização do plugin também me veio à mente imediatamente. Aguardo mais conselhos sobre isso.
Jason
Ótimo artigo! Tenho feito essa pergunta há muito tempo porque muitos temas são penalizados no teste de velocidade do Google devido a scripts Java carregando primeiro. Talvez outros saibam como colocar esses scripts no rodapé.
Novamente, obrigado e vou tentar isso e dizer como funciona.
Jeremy Myers
Ótimo tutorial.
Mas assim que atualizarmos o plugin, teremos que fazer isso novamente, certo? E toda vez que o plugin atualizar?
É possível desregistrar o js em functions.php e depois simplesmente registrá-lo novamente no rodapé de alguma forma?
adam
Olá, obrigado por essas dicas úteis. Mas, como mover o .js da minificação do W3 Total Cache para o head?
Essa é a localização do js no cache em wp content, não em wp plugin.
Lucca
Obrigado pelo conhecimento valioso – continue com o excelente trabalho.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Boa dica. Obrigado por compartilhar!