Ao testar seu site em GTmetrix e Lighthouse, você pode encontrar um erro no destino remover JavaScript não utilizado .
No WordPress, você pode remover JavaScript, CSS e plug-ins não usados usando Asset CleanUp ou Perfmatters. JavaScript também pode ser carregado por código de terceiros .
A primeira coisa a fazer é verificar a fonte de onde o JavaScript está sendo carregado (em GTmetrix Waterfall) para que você possa restringir se é de seu site ou de uma fonte de terceiros. Para terceiros, experimente hospedar arquivos localmente, atrasar o carregamento ou usar dicas do navegador, como pré-busca.
Na maioria das vezes, no entanto, a maioria dos sites WordPress que precisam remover JavaScript (incluindo o meu) usam criadores de páginas pesados como Elementor ou Divi . Depois de tentar tudo no livro, estou pensando em mudar de Elemetor para Oxygen Builder. Genesis Framework também é leve, mas eu recomendo visualizar seu código-fonte para ver quantas vezes seu construtor de página aparece.
1. Visualize seu JavaScript em GTmetrix Waterfall
Abra seu gráfico GTmetrix Waterfall e visualize a guia JavaScript. Observe cada arquivo JavaScript, bem como sua origem e tempo de carregamento.
- É jQuery?
- São serviços de terceiros?
- São os arquivos JavaScript do seu tema?
Isso deve ajudá-lo a restringir onde estão seus arquivos JavaScript mais pesados. Pela minha experiência, a maioria dos arquivos JavaScript pesados vêm de criadores de páginas, código de terceiros (por exemplo, anúncios) e plug-ins. As próximas etapas o ajudarão a reduzir o JavaScript no WordPress.
2. Remova arquivos JavaScript não usados com limpeza de ativos
Limpeza de ativos e Perfmatters permitem que você desative o JavaScript não utilizado.
Se scripts ou plug-ins estão sendo carregados em seu site, mas precisam ser carregados apenas em algumas páginas, você pode desativá-los em todos os outros lugares.
Isso é comum com plug-ins de formulário de contato, compartilhamento social, tabelas, controle deslizante, rich snippet, plug-in de comentário e JavaScript em construtores de página como o Elementor. Asset CleanUp tem um modo de teste que permite que você teste a desativação do JavaScript sem quebrar seu site, enquanto o Perfmatters não.
Etapa 1: instalação de limpeza ou desempenho de ativos
Eu prefiro Perfmatters em vez de Asset CleanUp porque permite desabilitar plug-ins em todos os lugares, exceto páginas e postagens, enquanto Asset CleanUp só permite desativar plug-ins em todos os lugares, exceto páginas. Perfmatters também é conhecido por ser mais amigável.
Etapa 2: ative o modo de teste se estiver usando a limpeza de ativos
Etapa 3: analise o carregamento do JavaScript em seu site
Etapa 4: desative o JavaScript onde ele não precisa ser carregado
3. Use um criador de página leve (ou nenhum)
Se você ainda removeu os erros de JavaScript no WordPress, provavelmente é porque está usando um construtor de páginas pesado.
Elementor, Divi e Beaver Builder adicionam muito JavaScript ao seu site. Combine isso com Ultimate Add-Ons e outros plug-ins para criadores de páginas, seu site pode rapidamente ficar inchado.
Eu saberia… Estou usando o Elementor e fiz tudo o que podia para reduzir o JavaScript. Mas não é o suficiente e ainda estou recebendo erros no Lighthouse. Decidi redesenhar meu site (novamente) usando o Oxygen Builder. Genesis Framework também é muito leve-eu recomendo um desses dois.
Verifique o seu código-fonte e veja quantas vezes o seu construtor de páginas aparece.
4. Reduza e combine arquivos JavaScript
A redução do JavaSciprt remove caracteres desnecessários do código, enquanto combiná-los mescla vários arquivos JavaScript em um único arquivo (reduzindo o número de Solicitações HTTP ).
Isso geralmente pode ser feito em seu plug-in de cache.
A redução do JavaScript pode ser feita na maioria dos plug-ins de cache e é tão fácil quanto habilitar a configuração. Ocasionalmente, a minificação pode interromper seu site, no qual você precisaria encontrar os arquivos problemáticos em seu código-fonte e, em seguida, excluí-los da minificação de JavaScript em seu plug-in de cache.
5. Reduza o JavaScript de terceiros
O código de terceiros também pode carregar arquivos JavaScript pesados em seu site.
Anúncios de carregamento lento (por exemplo, Google AdSense) e o estabelecimento de conexões anteriores usando pré-conexão e pré-busca podem melhorar significativamente o tempo de carregamento inicial de sua página. Verifique seu código de terceiros no PageSpeed Insights e tente limitá-lo ou pelo menos otimizá-lo. Botões de compartilhamento social e vídeos incorporados do YouTube (e widgets sociais) também são tipos de código de terceiros.
JavaScript comum de terceiros e como otimizá-lo
- Mapas -carregue mapas apenas nas páginas de contato/locais.
- Mapas de calor -atrasa o carregamento de JavaScript de mapa de calor em WP Rocket ou Flying Scripts.
- YouTube -carregamento lento de vídeos incorporados e substitui iframe por imagem de visualização.
- Fontes -limite as fontes, espessuras, ícones, hospede-os localmente e tente pré-carregá-los.
- Analytics -hospede localmente e use um código de rastreamento menor (analytics.js ou mínimo).
- Gerenciador de tags -evite quando possível, não se sobrecarregue, atrase o carregamento do JavaScript.
- Anúncios -evite quando possível, limita o número de espaços de anúncio, carregue-os lentamente.
- Facebook Pixel -hospede localmente usando a configuração de complemento do WP Rocket Facebook Pixel.
- Redes sociais -geralmente de plug-ins de compartilhamento social pesado ou widgets incorporados.
- Gravatars -use o plugin WP User Avatar para hospedar localmente e atrasar o Gravatar JavaScript.
A pré-busca de scripts de terceiros pode ajudar a reduzir o tempo de carregamento. Você pode fazer isso no WP Rocket, Perfmatters e muitos outros plug-ins de velocidade. Veja qual código de terceiros está carregado em seu site, pegue seus nomes de host e busque-os previamente. Luke tem uma grande lista de domínios comuns para pré-busca .
6. Adiar o carregamento de JavaScript de não essenciais
Compartilhamento social, consentimentos de cookies e outros JavaScript não essenciais devem ser adiados se não for necessário carregar imediatamente.
Se o seu plug-in de cache ainda não for compatível, você pode tentar o Async Plug-in JavaScript . Simplesmente pegue o arquivo JavaScript que deve ser adiado e cole-o no plugin Async JavaScript. Se você preferir adiar o JavaScript manualmente, pode usar o seguinte código de Varvy .
7. Atraso no carregamento de JavaScript não crítico
JavaScript pode ser atrasado até a interação do usuário (rolar, clicar) usando WP Rocket, ou o plugin Flying Scripts faz a mesma coisa apenas define um período de tempo limite.
Fiz isso com comentários (wpdiscuz) e Gravatars para que meus comentários não carreguem imediatamente. Como alguns dos meus artigos têm centenas de comentários, isso faz com que minhas postagens carreguem muito mais rápido.
Em alguns casos, adiar o JavaScript pode ser suficiente. Mas se você tiver JavaScript que pode ser atrasado, sugiro que experimente.
WP Rocket, Perfmatters e Flying Scripts permitem atrasar o JavaScript.
8. Use um código de acompanhamento menor do Google Analytics
Alguns scripts do Google Analytics são maiores do que outros .
Scripts maiores coletam mais dados para você visualizar no Google Analytics, mas você pode nem estar usando esses dados em primeiro lugar. Se você precisa apenas de dados básicos (visualizações de página, usuários, locais, dispositivos, fontes de tráfego e tempo real), você pode usar a opção mínima. Se precisar de mais dados no Google Analytics, você pode usar um tipo de script grande, mas também aumentará um pouco o tempo de carregamento.
- analytics.js -18,4 KB
- mínimo -1,5 KB
- gtag.js v4 -51,5 KB
O Perfmatters, por exemplo, permite que você escolha o tipo de script do Google Analytics e se deseja desativar os recursos de exibição do GA, o que impede uma segunda solicitação HTTP para a DoubleClick.
9. Desative o jQuery
Muitos temas e plug-ins usam jQuery, então tome cuidado ao testar isso.
Pode ser possível desativar certas partes do jQuery (por exemplo, jquery-migrate) sem interromper seu site. Teste-o no Perfmatters ou Asset CleanUp e veja se você pode remover pelo menos alguns KBs.
10. Desativar módulos não utilizados em plug-ins
Muitos plug-ins são baseados em módulo e permitem que você desative recursos individuais que você não usa.
Você pode fazer isso no JetPack, Ultimate Add-Ons, Rank Math, Yoast e outros plug-ins baseados em módulo. Se você não estiver usando a análise do Rank Math, não a habilite. Mesmo com outros módulos.
11. Desative a ofuscação de e-mail do Cloudflare
A ofuscação de e-mail da Cloudflare carrega um arquivo JavaScript extra.
Ou você mesmo ativou ou está usando o WP Rocket e marcou a caixa “configurações ideais” para o Cloudflare. A ofuscação de e-mail deve evitar que os bots coletem seu e-mail, mas também carrega um arquivo JavaScript em todo o seu site, que será encontrado no GTmetrix Waterfall.
12. Desativar scripts WooCommerce em páginas desnecessárias
O WooCommerce carrega scripts e estilos extras em seu site (mesmo em páginas que não são de produtos).
A maneira mais fácil de desabilitá-los é em Perfmatters . Os fragmentos do carrinho atualizam o total do carrinho sem atualizar a página, mas às vezes podem adicionar alguns segundos extras ao tempo de carregamento. Escolha quais opções você deseja desativar e se a velocidade ou os fragmentos do carrinho são mais importantes.
Se você não estiver usando o Perfmatters, existem algumas soluções em GitHub .
13. Evite vários reCAPTCHAs
Captchas também criam arquivos JavaScript extras, portanto limite quantos você está usando. Se você tiver problemas para receber spam de bots, tente colocar uma imagem do seu endereço de e-mail em vez de texto.
14. Teste o carregador de foguetes no Cloudflare
O Rocket Loader da Cloudflare pode ser usado em ambos os sentidos, IMO.
O Rocket Loader pode ser uma bênção para a velocidade, mas às vezes pode causar problemas. De qualquer forma, sugiro experimentar. Isso adiará o carregamento de todo o seu JavaScript até depois da renderização.
Se os seus visitantes forem locais, você pode não querer usar um CDN e escolher um host com um data center próximo ao local do seu visitante. Caso contrário, os CDNs muitas vezes podem fazer mais mal do que bem.
15. Evite plug-ins lentos com JavaScript pesado
O JavaScript geralmente é criado por plug-ins.
Revise esta lista de plug-ins de carregamento lento ou use Query Monitor para encontrar seus plug-ins mais lentos.
Mesmo que alguns plug-ins não apareçam em seu relatório GTmetrix Waterfall, isso não significa que eles não estão deixando seu site lento. Por exemplo, plug-ins que coletam dados contínuos (backups, estatísticas, verificador de link quebrado) podem tornar seu site lento, mesmo que não estejam sendo executados no front-end.
Espero que tenha ajudado! Deixe um comentário se tiver dúvidas.
Atenciosamente,
Tom
