Como combinar JavaScript externo no WordPress
Publicados: 2022-04-22A linguagem de programação javascript ajuda as páginas da Web a exibir conteúdo dinâmico. Em sites WordPress, por exemplo, o Javascript é usado para incorporar áudio e vídeo. Também é usado para exibir galerias de imagens, menus interativos, cronômetros de contagem regressiva e muito mais.
Os arquivos Javascript usam a extensão de arquivo .js e em um site WordPress típico, os arquivos Javascript são inseridos nas páginas pelo tema WordPress e pelos plugins do WordPress que são ativados. Por exemplo, o controle deslizante da página inicial do seu tema pode exigir um arquivo chamado slider.js para funcionar corretamente, enquanto a página do formulário de contato pode exigir um arquivo chamado form.js.
Acredito que o Javascript é essencial para sites modernos do WordPress. Infelizmente, também pode tornar um site lento se não for otimizado corretamente.
Nas primeiras versões do Hypertext Transfer Protocol, o Javascript pode tornar os sites mais lentos, pois cada arquivo Javascript precisava ser baixado e executado para que a página fosse exibida corretamente. Uma técnica de otimização popular para resolver esse problema é combinar vários arquivos Javascript para reduzir o número de solicitações HTTP que um navegador precisa fazer. A técnica às vezes é chamada de agregação Javascript.
Neste artigo, explicarei por que muitos proprietários de sites combinam Javascript externo no WordPress e compartilham alguns plugins úteis do WordPress que podem ser usados para realizar essa tarefa. Também falarei sobre por que a combinação de arquivos JavaScript externos não é mais necessária para a maioria dos proprietários de sites.
Por que combinar arquivos JavaScript externos no WordPress?
Embora as funções Javascript possam ser adicionadas diretamente ao HTML usando a tag SCRIPT, é uma prática comum salvar o código Javascript em um arquivo externo. É mais prático fazer isso, pois separa o código e permite que funções Javascript sejam chamadas por muitas páginas.
Cada arquivo Javascript exigido por uma página da Web deve ser baixado pelo navegador durante o processo de renderização da página.
| Renderização de página | Quando alguém visualiza uma página da Web, o navegador cria a página processando cada linha de código em ordem. Isso é conhecido como renderização de página. |
| Solicitações HTTP | Uma solicitação para acessar um arquivo em um servidor é chamada de solicitação HTTP. O navegador, portanto, precisa fazer uma solicitação HTTP para cada arquivo Javascript necessário para a página. |
Quando os arquivos são baixados em ordem sequencial, um grande número de solicitações HTTP pode aumentar o tempo necessário para carregar uma página da Web. Portanto, combinando arquivos JavaScript externos no WordPress, você pode reduzir bastante o número de solicitações HTTP feitas durante a renderização da página.
Alguns mecanismos de pesquisa recomendam combinar JavaScript externo em dois arquivos.
| Funções Javascript importantes (Arquivo 1) | O primeiro arquivo Javascript contém funções importantes que são necessárias para renderizar o carregamento inicial da página corretamente. |
| Funções Javascript menos importantes (Arquivo 2) | O segundo arquivo Javascript contém funções menos importantes que podem ser chamadas assim que a página for carregada. |
Se uma página da Web requer nove arquivos Javascript para ser exibida corretamente, a combinação de arquivos JS externos no WordPress pode ajudar a reduzir o número total de solicitações HTTP para código Javascript de nove para apenas dois. Arquivos CSS externos também podem ser combinados, reduzindo ainda mais o número de solicitações HTTP de uma página.
Meu site WordPress será mais rápido se eu combinar arquivos JavaScript externos?
Devido a melhorias no Hypertext Transfer Protocol, não é mais essencial combinar arquivos Javascript e arquivos CSS, a menos que sua empresa de hospedagem não tenha suporte para HTTP/2.
Em HTTP/1.0 e HTTP/1.1, cada arquivo Javascript e CSS tinha que ser baixado em ordem sequencial. Isso significava que um arquivo tinha que ser baixado completamente antes que o próximo arquivo pudesse começar a ser baixado. O protocolo HTTP/2, lançado em 2015, resolveu esse problema ao permitir downloads paralelos. Como todos os recursos externos podem ser baixados ao mesmo tempo, não há mais nenhum benefício em combinar arquivos se o HTTP/2 estiver disponível.
Atualmente, o HTTP/2 é suportado por 95,6% dos navegadores da Internet. A partir de 6 de janeiro de 2022, o HTTP/2 é usado por 46,9% de todos os sites online, embora você possa ver no gráfico abaixo que esse número é significativamente maior entre os sites mais populares da Internet.
Se o seu host da Web tiver suporte para HTTP/2, a combinação de arquivos pode tornar seu site mais lento, pois os arquivos Javascript combinados são maiores do que os arquivos agregados. Isso ocorre porque leva mais tempo para um navegador baixar dois arquivos Javascript grandes do que muitos arquivos Javascript pequenos baixados ao mesmo tempo.
Duas técnicas que eu recomendo usar com Javascript são minificação e adiar a análise.
| Minimizar | A minificação envolve a remoção de caracteres desnecessários, como espaços em branco e comentários. Isso faz com que o arquivo Javascript seja menor. |
| Adiar análise | O código Javascript retarda o processo de renderização da página. Duas técnicas chamadas Defer e Async podem ser usadas para resolver esse problema. |
Por favor, leia meu artigo sobre como adiar a análise de Javascript no WordPress para entender melhor por que o Javascript diminui o processo de renderização da página.
Como combinar JavaScript externo no WordPress
Se sua empresa de hospedagem ainda usa HTTP 1.1, ainda é recomendável combinar arquivos JavaScript externos e arquivos CSS no WordPress.
Certifique-se de executar testes de desempenho antes e depois de combinar os arquivos para saber como os tempos de carregamento da página foram afetados. Você pode fazer isso usando GTmetrix, Google PageSpeed Insights e o Pingdom Website Speed Test.
Otimizar automaticamente
Autoptimize é um dos plugins de otimização mais eficazes disponíveis para usuários do WordPress. Ele suporta minificação para HTML e combinação de arquivos e minificação para Javascript e CSS. Os arquivos Javascript também podem ser adiados em vez de agregados para evitar o bloqueio de renderização e também há opções de otimização para o Google Fonts.
Eu usei o Autoptimize em muitos sites WordPress, pois sempre melhora o tempo de carregamento da página.
Limpeza de ativos
Asset CleanUp é um plugin WordPress de otimização altamente configurável que suporta minificação, combinação e adiamento de Javascript e CSS. Ele também permite que você limpe o HTML e fornece muitas ferramentas para gerenciar fontes e reduzir seu efeito nos tempos de carregamento da página.
Um recurso do Asset Cleanup que se destaca é o gerenciador de Javascript e CSS. Isso permite que você especifique exatamente em quais páginas os arquivos Javascript e CSS são carregados em seu site.
WP Super Minify
O WP Super Minify faz as coisas de maneira um pouco diferente, oferecendo apenas a opção de compactar Javascript e compactar CSS. Quando selecionado, o WP Super Minify combinará, reduzirá e armazenará seus arquivos em cache.
Se você está procurando uma solução de otimização simples que simplesmente funcione, este pode ser o plugin para você.
Combinando arquivos JavaScript externos usando um plug-in de cache do WordPress
Os melhores plugins de cache do WordPress incluem muitas ferramentas de otimização adicionais para ajudá-lo a melhorar o desempenho do site. Há, portanto, uma grande chance de que sua solução de cache WordPress existente permita que você combine arquivos JavaScript e CSS externos.
No WP Rocket, por exemplo, existem opções para minimizar e combinar arquivos Javascript e CSS. Arquivos Javascript também podem ser adiados para evitar o bloqueio de renderização.
Minha recomendação é testar os tempos de carregamento da página usando a combinação de arquivos usando seu plug-in de cache WordPress preferido e, em seguida, comparar os resultados com soluções de otimização Javascript independentes, como Autoptimize e Asset CleanUp.
Pensamentos finais
Espero que você tenha gostado deste olhar sobre a combinação de arquivos JavaScript externos. Como você viu, não é mais necessário agregar arquivos Javascript se seu host da Web suportar HTTP/2, pois o download de arquivos em paralelo é mais eficaz.
Se o seu host oferece suporte apenas para HTTP/1.1, você pode combinar javascript externo no WordPress para reduzir o tempo de carregamento da página.
Leitura recomendada: Remover CSS não utilizado no WordPress
Obrigado por ler.
Kevin