Adiar análise de Javascript no WordPress [usando Defer e Async]

Os sites WordPress de carregamento rápido oferecem sérios benefícios quando se trata de aprimorar a experiência do usuário para os visitantes, melhorar a visibilidade do site nos mecanismos de pesquisa e aumentar o tráfego orgânico do site.

Uma página da web contém HTML, CSS, Javascript e imagens, e cada um deles deve ser otimizado para reduzir o tempo de carregamento da página. As imagens têm um dos maiores efeitos no tamanho da página, por isso é importante reduzir o tamanho dos arquivos de imagem usando um plug-in de otimização de imagem do WordPress.

Para melhorar ainda mais o desempenho da página, você pode adiar a análise do javascript no WordPress , o que significa que você pode aconselhar os navegadores a carregar o conteúdo e as imagens da página antes que o Javascript seja carregado. Tomar essa medida significa que os elementos Javascript, como formulários e controles deslizantes, podem levar alguns segundos a mais para carregar, mas esse é um pequeno preço a pagar, pois os tempos de carregamento da página são significativamente aprimorados.

O código Javascript pode ser executado posteriormente usando duas técnicas chamadas Defer e Async . Ambos os métodos são suportados pelos populares plug-ins de cache do WordPress, embora soluções dedicadas lhe dêem um pouco mais de controle sobre quais arquivos Javascript são carregados posteriormente.

Neste artigo, explicarei quais são os benefícios de adiar o carregamento de arquivos Javascript e mostrarei cinco plugins WordPress úteis que irá simplificar o processo para você.

Encorajo você a ler todo o artigo para obter uma compreensão completa do assunto, mas se você for iniciante, a única coisa que deve aprender com este artigo é que Defer e Async podem melhorar significativamente os tempos de carregamento da página do seu site.

Diferentes maneiras de adiar a análise de Javascript no WordPress (com Defer & Async)

O Javascript se estabeleceu como um importante bloco de construção de sites WordPress, sendo usado para exibir botões, formulários, galerias de mídia, áudio, vídeo, cronômetros de contagem regressiva, cronogramas de mídia social e muito mais.

Infelizmente, o Javascript também é um dos principais motivos pelos quais as páginas da Web carregam lentamente, pois o navegador precisa parar, baixar e executar cada script antes de continuar analisando a marcação HTML da página.

A análise é o processo no qual o navegador analisa e converte o código da página em um formato que ele pode executar. Qualquer código que interrompa esse processo é chamado de “Bloqueio de renderização”, pois atrasa o processo de renderização da página para os visitantes.

Os recursos de bloqueio de renderização são um motivo comum para o carregamento lento de um site WordPress. O CSS crítico pode ser exibido em linha para impedir o bloqueio de renderização, mas é melhor adiar o carregamento do Javascript posteriormente usando Defer ou Async para evitar que o código Javascript bloqueie a renderização da página.

Também é uma boa prática remover o código Javascript não utilizado e reduzir o tempo de execução do Javascript. Uma maneira de fazer isso é reduzindo o tamanho de arquivos Javascript grandes por meio de um processo chamado Minificação , que remove espaços em branco e códigos desnecessários de cada arquivo Javascript.

Uma das métricas mais importantes que os serviços de benchmarking de sites, como Google PageSpeed ​​Insights e GTmetrix, consideram é a primeira pintura de conteúdo, que é o tempo que leva para o primeiro conteúdo ser exibido aos visitantes. O Google afirma que um tempo de FCP de 0 a 1,8 segundos é bom e de 1,8 a 3 segundos é moderado. Qualquer coisa acima de 3 segundos é considerada lenta.

Tudo o que você precisa fazer é inserir a URL de uma página em um serviço de benchmarking de sites para ver os arquivos Javascript e CSS que estão bloqueando a renderização da página. Como você pode ver na captura de tela abaixo, os arquivos CSS e Javascript de bloqueio de renderização podem levar segundos para serem baixados, portanto, se você puder eliminar esses recursos, suas páginas carregarão significativamente mais rápido.

A maneira mais eficaz de eliminar arquivos JavaScript de bloqueio de renderização é usar os atributos defer e async . Esses atributos booleanos só podem ser usados ​​com o elemento script HTML quando o atributo SRC é usado para chamar arquivos externos.

 <script src="javascript.js"></script>

 <script defer src="javascript.js"></script>

 <script async src="javascript.js"></script>

Ao incluir o atributo defer ou async no elemento de script HTML, você está aconselhando o navegador a baixar o arquivo ao mesmo tempo em que a página é analisada. Com defer, o arquivo é executado assim que a página é totalmente analisada.

Por outro lado, o atributo async é uma operação assíncrona que executa o arquivo assim que ele é baixado. Dessa forma, o tempo total para analisar uma página com assíncrono será um pouco maior, pois o navegador interromperá brevemente a análise do HTML para executar o arquivo.

Se você especificar adiamento e async, os navegadores usarão async.

Um padrão importante a ser compreendido é o Document Object Model, frequentemente referido como DOM. O DOM representa um documento inteiro, como um arquivo XML ou uma página HTML, como um único objeto. Elementos importantes, como head, body e headers, podem ser considerados como branches do DOM.

Se um arquivo Javascript não requer informações de outro arquivo ou do próprio DOM, pode valer a pena usar o método assíncrono , pois elementos importantes da sua página serão exibidos mais rapidamente. Esteja ciente de que o async pode causar erros no seu site se o arquivo estiver solicitando informações que ainda não foram carregadas.

Se um arquivo Javascript exigir informações, adiar é a opção preferencial, pois garante que todo o conteúdo seja recuperado corretamente antes que o arquivo seja executado.

O objetivo do adiamento e do assíncrono é reduzir o bloqueio da renderização da página e você verá uma grande melhoria nos tempos de carregamento da página, independentemente do método usado.

Recomendo a leitura do artigo de Zell Liew “Como e quando usar os atributos Async e Defer” para uma explicação mais abrangente de quando usar defer e async.

Como adiar a análise de Javascript usando um plug-in do WordPress

A maioria das chamadas Javascript em seu site virá de seu tema WordPress e plug-ins WordPress ativados, portanto, é impraticável adicionar manualmente os atributos defer e async aos elementos do script.

É melhor usar um plug-in WordPress de desempenho para adiar a análise de javascript no WordPress e simplificar o processo de aplicação de adiamento ou assíncrono em todo o site.

Esteja ciente do fato de que a configuração errada causará problemas com o design do seu site. Por exemplo, os formulários de contato podem não ser exibidos corretamente, a menos que você escolha as definições de configuração corretas ou exclua os arquivos do formulário de contato da otimização.

Tentativa e erro são, portanto, necessários para encontrar as configurações corretas e o melhor desempenho para o seu site.

• Backups de sites – Faça backup do seu site antes de ativar um plug-in de otimização do WordPress
• Desempenho de teste – Teste o desempenho das principais páginas do seu site e cada vez que você alterar uma definição de configuração de otimização
• Revise seu site – Verifique se nenhuma parte do seu site está quebrada após alterar sua configuração

Se você tiver problemas graves ao adiar a análise do javascript, reverta para as configurações padrão do plug-in. O plug-in também pode ser desinstalado se não estiver funcionando em harmonia com seu site.

1. Otimize automaticamente

O Autoptimize é uma solução versátil de otimização do WordPress que permite agregar e minificar Javascript, CSS e HTML. O conteúdo otimizado é armazenado em cache para melhorar o desempenho. Esse cache pode se tornar muito grande rapidamente, então eu o encorajo a usar Autoclear Autoptimize Cache para limpar automaticamente o cache.

Embora o Autoptimize seja conhecido pela agregação de arquivos, ele também pode ser usado para adiar a análise de arquivos Javascript para que eles não bloqueiem a renderização. O código Javascript e CSS também pode ser exibido em linha e há opções de otimização adicionais para imagens, Google Fonts, emojis e muito mais.

2. Plug-in JavaScript assíncrono

Desenvolvido pelo criador do Autoptimize, o Async JavaScript permite que você aplique async e defer a arquivos Javascript em todo o seu site. Ele oferece controle total sobre todos os arquivos Javascript, permitindo excluir jQuery, arquivos Javascript específicos, plugins WordPress e temas WordPress. Se preferir, você pode especificar exatamente quais arquivos Javascript devem ser assíncronos e quais devem ser adiados.

Um dos recursos mais legais do Async Javascript é o assistente de configuração que executa testes de desempenho no GTmetrix para todas as configurações possíveis do seu site. Isso é uma grande economia de tempo, pois os resultados mostram exatamente a velocidade do seu site com cada configuração, mas certifique-se de verificar seu site todas as vezes para garantir que nenhum aspecto do site esteja danificado.

3. Questões de desempenho

Perfmatters é uma caixa de ferramentas premium de desempenho do WordPress que possui dezenas de recursos exclusivos de desempenho. Com preço a partir de $ 24,95 por ano, o plug-in permite adiar a análise de arquivos Javascript (todos os arquivos JS) em seu site. Arquivos jQuery podem ser incluídos em adiamentos e você também pode excluir arquivos Javascript específicos. Outra opção legal que ele oferece é o Javascript Delay, que só carregará arquivos Javascript quando houver interação do usuário.

Perfmatters pode ser usado para desabilitar os principais recursos do WordPress para melhorar a segurança e o desempenho. Ele também permite que você defina um URL de login personalizado, pré-carregue conteúdo, imagens de carregamento lento, integre o Google Analytics, otimize o Google Fonts e muito mais.

Meu recurso favorito é o gerenciador de scripts, pois permite ativar e desativar arquivos Javascript e CSS para todas as páginas do seu site. Isso reduzirá consideravelmente o tamanho das páginas, pois os desenvolvedores do WordPress têm o péssimo hábito de carregar arquivos Javascript e CSS em todo o site, mesmo quando são necessários apenas em algumas páginas.

4. Limpeza de Ativos

Asset CleanUp é um plug-in WordPress de otimização rico em recursos que permite reduzir, combinar e adiar a análise de arquivos Javascript e CSS. Seu gerenciador de CSS e JS funciona de maneira semelhante ao gerenciador de scripts do Perfmatter, permitindo que você especifique se um arquivo é carregado em uma determinada página. Você também pode desativar as configurações básicas do WordPress, limpar o código HTML, otimizar as fontes do Google e muito mais.

Uma única licença para o Asset CleanUp Pro é vendida por € 42,36 por ano. A atualização permite que você coloque o código em linha e especifique assíncrono e adiado para arquivos Javascript página por página. Ele também desbloqueia um gerenciador de plug-ins e oferece maior controle sobre como os ativos são carregados em seu site.

5. Pré-carregamento de push HTTP/2

HTTP/2 Push Preload permite enviar e pré-carregar arquivos Javascript e CSS em seu servidor compatível com HTTP2 usando a função de carregamento de enfileiramento. Isso pode ser aplicado a todos os arquivos ou você pode optar por configurar cada recurso separadamente. Os tipos de recursos incluem script, estilo, áudio, incorporação, busca, fonte, imagem, objeto e vídeo.

Ao inserir a URL de um arquivo Javascript, você pode optar por assincronizar, adiar ou remover. HTTP/2 Push Preload permite que você defina regras sobre quando essa configuração será aplicada. Você pode definir regras de Javascript para um recurso para todas as páginas, para celulares ou desktops, para postagens e páginas específicas, para categorias, páginas de pesquisa, páginas WooCommerce e muito mais.

Pensamentos finais

O Javascript continua a ser o método preferido para adicionar conteúdo dinâmico e elementos interativos a sites. Como muitos temas e plugins do WordPress usam Javascript, é importante adiar a análise do javascript no WordPress e usar defer e async para garantir que as páginas sejam renderizadas rapidamente e reduzir o bloqueio da renderização da página.

Você encontrará funcionalidades para aplicar defer e async em muitos plugins do WordPress, embora as soluções que mencionei neste artigo lhe dêem mais controle sobre seus arquivos Javascript.

Em meu próprio site, uso Autoptimize para agregação de arquivos e Async JavaScript para adiamentos de Javascript. Estou satisfeito com o Async Javascript, embora o HTTP/2 Push Preload possa ser uma opção melhor para muitos proprietários de sites, pois oferece melhor controle sobre onde as configurações de otimização são aplicadas.

Asset CleanUp e Perfmatters oferecem recursos e funcionalidades semelhantes, portanto, não recomendo usá-los juntos. O Asset CleanUp Pro, sem dúvida, oferece melhor controle e recursos mais avançados, embora eu continue a usar o Perfmatters em meu próprio site para limpar o WordPress, pois é mais fácil de usar. Ambas as soluções aprimorarão qualquer configuração de otimização do WordPress, mesmo se você estiver usando um plug-in WordPress diferente para adiar a análise do javascript para reduzir o bloqueio da renderização da página.

Encorajo você a testar todos esses plug-ins do WordPress para adiar a análise do javascript e realizar vários testes para garantir que você tenha a melhor configuração.

Boa sorte.

Kevin