Uma das principais dificuldades na otimização de sites WordPress são os recursos externos. Na prática, tudo o que é externo não pode sofrer nenhum tipo de alteração ou otimização, não pode ser realizado cache, minificação ou combinação de arquivos.
O grande problema dos recursos externos é que é necessário conectar com o serviço externo, aguardar a resposta do servidor, baixar o arquivo e então renderizar. Tudo isso gera um aumento no tempo de carregamento de páginas, e consequentemente na demora no carregamento do seu site.
Neste post, vou te ensinar como resolver de vez problemas de lentidão relacionados ao script do RD Station. Se o seu site tinha um bom tempo de carregamento antes de incluir o script de integração do RD Station e você quer manter esta performance, esta publicação é para você.
A técnica que vou te ensinar pode ser usada também com outros recursos externos, como Google Tag Manager, Google Analytics e até mesmo Google Adsense. Na prática funciona para todos os tipos de Script.
Qual é a recomendação do Google para recursos externos ?
O Google recomenda que tudo que não é essencial (crítico) para a experiência do usuário seja atrasado a fim de não impactar no tempo de carregamento do conteúdo. Para o seu site WordPress continuar otimizado mesmo com recursos externos, você pode usar a técnica que mostrarei abaixo.
Otimização de sites WordPress com Plugin RD Station instalado
Veja abaixo o vídeo passo-a-passo de como Otimizar recursos externos:
1º Passo:
Costumo recomendar aos meus alunos centralizar todos os scripts no Google Tag Manager, pois isso facilita no controle de scripts em um local isolado. Além disso, depois fica mais fácil de fazer o atraso apenas do Google Tag Manager. Mas se você não conhece e não sabe como usar o Google Tag Manager, eu também vou te mostrar como fazer o atraso sem essa ferramenta.
2º Passo:
Se você optar em utilizar o Google Tag Manager para adicionar o script do RD Station ao seu site, você precisa seguir este passo. Se você não vai utilizar o Google Tag Manager, pode pular para o passo 3.
Para configurar o Google Tag Manager no seu site eu recomendo um plugin que tornará tudo muito mais fácil, o Google Tag Manager for WordPress:
Com o plugin instalado, para fazer tudo funcionar será necessário realizar duas configurações básicas. A primeira delas é a sua Tag do Google Tag Manager.
- Google Tag Manager ID
E após a configuração da sua tag, faremos uma outra pequena configuração que será usada no próximo passo. Na aba “avançado”, vamos criar uma nova variável para o Google Tag Manager:
Esta parte é importantíssima para a próxima etapa. Defina um nome de variavel, que será necessário no próximo passo. Eu costumo colocar gTagDataLayer.
3º Passo:
Para fazer o atraso do carregamento de Scripts, é necessário um outro plugin chamado Flying Scripts.
Segundo Gijo Varghese, desenvolvedor do plugin, o Flying Scripts atrasa a execução do JavaScript até que não haja atividade do usuário. Você pode especificar palavras-chave para incluir JavaScripts a serem atrasados. Há também um tempo limite que executa o JavaScript quando não há atividade do usuário.
O segredo
No passo 2 definimos um nome de variável para o Google Tag Manager, agora podemos atrasar o script do Google Tag Manager no Flying Scripts utilizando esta variável.
E se eu optar em não utilizar o Google Tag Manager?
Na prática, o que muda é que você precisará utilizar outra palavra-chave que esteja no código do Script de Integração do RD Station.
Entendendo as configurações do Plugin Flying Scripts
O plugin tem uma estrutura extremamente simples e fácil de explicar.
Conforme a imagem abaixo, existe apenas uma aba de configurações com alguns campos:
Include Keywords: aqui você informa as palavras-chave, uma por linha, que identificam o script que você quer fazer o atraso no carregamento;
Timeout: é o tempo que você quer atrasar. Aqui tem um recurso interessante que é o “Never”. Ele é muito confundido com “não carregar os scripts”, mas na verdade com esta opção configurada o script só será carregado quando houver interação do usuário (isso é, quando o usuário mover o mouse, rolar a página, ou fizer qualquer interação).
Disable on Pages: aqui você informa o link das páginas que você não quer que ocorra o atraso de carregamento destes scripts.
Ficou claro? Se tiver alguma dificuldade, deixe nos comentários!
E se você quiser acompanhar mais conteúdo sobre Performance de forma 100% Gratuita, se inscreva no canal WP Alta Performance do YouTube.
Daniel André Paz também tem um Curso Completo de Otimização de Sites WordPress, onde ele entrega todo o seu conhecimento de otimização de sites WordPress com mentoria de 3 horas semanais, divididas em 2 dias da semana para mais de 100 alunos.