Se você deseja reduza o tempo de execução do JavaScript no WordPress, você precisará encontrar arquivos JavaScript pesados no PageSpeed Insights (ou Lighthouse) e otimizá-los.
Você pode reduzir o tempo de execução do JavaScript removendo o JavaScript não utilizado usando um plug-in de descarregamento de ativos, bem como minimizando, combinando, adiando e atrasando os arquivos JavaScript. Muitas dessas otimizações podem ser feitas usando o plug-in de cache, Autooptimize e Async JavaScript.
Longos tempos de execução de JavaScript também podem vir de código de terceiros. Fontes do Google, Google Analytics e Gerenciador de tags podem ser hospedados localmente, enquanto outro JavaScript de terceiros pode ser atrasado usando plug-ins como WP Rocket ou Flying Scripts.
1. Encontre arquivos JavaScript problemáticos
A primeira etapa para reduzir o tempo de execução do JavaScript é abrir seu relatório do PageSpeed Insights e saber quais arquivos demoram muito para serem executados.
- É jQuery?
- É de um código de terceiros?
- É do seu construtor de páginas?
Seu relatório deve ajudar a restringir a origem dos seus arquivos JavaScript mais pesados.
Você também deve olhar seu relatório de código de terceiros, que veremos na terceira dica.
2. JavaScript e CSS não usados removidos
Construtores de páginas, plug-ins e outras coisas podem estar carregando arquivos JavaScript em todo o seu site WordPress quando eles estão sendo usados apenas em alguns lugares. Ao remover JavaScript não utilizado e CSS, você estará essencialmente cortando o tamanho dos arquivos, o que reduz o tempo de execução.
Isso normalmente é feito usando plug-ins de descarregamento de ativos como Limpeza de ativos ou Perfmatters (escrevi um comparação dos dois , mas eu pessoalmente uso o Perfmatters).
Dependendo do plug-in escolhido, você deve ativar o modo de teste no Asset CleanUp e ativar o gerenciador de script nas configurações do Perfmatters.
Em seguida, edite uma página ou postagem, visualize os arquivos JavaScript e CSS carregados na página e desative todos os arquivos que não estão sendo usados. Por exemplo, se o seu plug-in de compartilhamento social está carregando nas páginas, mas só está sendo usado no seu blog, desative o plug-in de compartilhamento social”em todos os lugares, menos nos posts”.
Código de terceiros também pode causar longos tempos de execução de JavaScript no WordPress. Abra seu relatório de “código de terceiros” no PageSpeed Insights e observe o tamanho de transferência e o tempo de bloqueio de cada domínio de terceiros. Hospedar código de terceiros localmente em seu servidor -Google Fonts, Google Analytics e Google Tag Manager podem ser hospedados localmente usando plug-ins como OMGF ou Flying Analytics . Assim que o Google Fonts estiver hospedado localmente, você pode otimizar ainda mais suas fontes pré-carregando-as , usando font-display: swap , combinando arquivos de fontes e definindo uma expiração de cache mais longa (por exemplo, 180 dias ou 6 meses) para que você possa servir ativos estáticos com um item de política de cache eficiente . Depois que o Google Analytics é hospedado localmente, você também define uma expiração de cache mais longa, usa um código de rastreamento menor e desativa os recursos de remarketing/publicidade para evitar uma segunda solicitação ao DoubleClick. Pré-busca e pré-conexão de domínios de terceiros -para código de terceiros que você não consegue hospedar localmente, considere usar pré-busca e pré-conecte para estabelecer uma conexão antecipada com seus domínios. Consulte esta lista de domínios comuns para pré-busca . Você pode adicionar pré-busca adicionando o código de pré-busca manualmente em seu cabeçalho ou usando plug-ins como WP Rocket e Perfmatters. Carregamento lento de vídeos e substituição de iframe por uma imagem de visualização -o carregamento lento de vídeos, iframes e a substituição do iframe por uma imagem de visualização podem ajudar a otimizar vídeos, mapas e outros iframes incorporados. WP Rocket, WP YouTube Lyte e outros plug-ins de carregamento lento permitem que você faça isso. Limite o JavaScript de terceiros -não enlouqueça com o código de terceiros. Cada um requer mais JavaScript que é adicionado ao seu site WordPress e diminuirá o tempo de execução do JavaScript. A redução de arquivos JavaScript e CSS geralmente é feita por meio do plug-in de cache, Cloudflare ou outro CDN. Ele remove caracteres desnecessários em seu código. Se a redução de arquivos prejudicar seu site, você precisará encontrar os arquivos JavaScript ou CSS problemáticos (em seu código-fonte) e excluí-los da minimização. O adiamento do JavaScript elimina recursos de bloqueio de renderização enquanto reduz o tempo de execução do JavaScript. Autoptimize e JavaScript assíncrono geralmente faz um trabalho melhor em adiar JavaScript do que plug-ins de cache, uma vez que eles eram projetado especificamente para lidar com JavaScript e CSS. As configurações padrão da Otimização automática geralmente são adequadas. No JavaScript assíncrono, basta marcar “ativar JavaScript assíncrono” e clicar em “aplicar adiar”. Como o Autoptimize lida com a minimização de CSS e JavaScript quando você clica em”otimizar CSS e JavaScript”, eles devem ser desabilitados em seu plug-in de cache. Atrasar o JavaScript normalmente é feito com domínios de terceiros. WP Rocket e Flying Scripts permitem atrasar JavaScript crítico que pode reduzir o tempo de execução do JavaScript. WP Rocket tem uma lista de arquivos JavaScript comuns para atrasar . Você também deve considerar atrasar seus comentários (eu adiei wpDiscuz e Gravatars), bem como//cdnjs.cloudflare.com se você estiver usando Cloudflare. Compactar seus dados com GZIP ou Brotli também pode reduzir o tempo de execução do JavaScript. Brotli oferece melhor compactação do que GZIP e é compatível com Cloudflare , alguns hosts WordPress . Se estiver usando o Elementor, Carregamento de recursos aprimorado carrega apenas os elementos onde eles são realmente usados (arquivos JS nos manipuladores de widget do Elementor Core e Swiper no Elementor + Elementor Pro). Você pode habilitar isso nas configurações do Elementor. Tenho um tutorial escrito especificamente para acelerar o Elementor . Execute seu site por meio do Lighthouse ou PageSpeed Insights e verifique o tempo de execução do JavaScript. Esperançosamente, as dicas neste tutorial ajudaram você a chegar a 100%. Se você quiser ver como fiz isso, tenho um tutorial sobre quase todas as recomendações no PageSpeed Insights, incluindo coisas como mudança cumulativa de layout , primeira pintura com conteúdo e, claro, minha Guia de velocidade do WordPress . Espero que tenha ajudado! Deixe-me um comentário se tiver alguma dúvida. Atenciosamente,
3. Otimize o JavaScript de terceiros
4. Reduza o JavaScript e CSS
5. Adiar JavaScript
6. Atrasar JavaScript
7. Use GZIP ou Brotli
8. Habilitar carregamento de ativo aprimorado no Elementor
Teste novamente o tempo de execução do JavaScript
Perguntas frequentes
Como reduzo o tempo de execução do JavaScript no WordPress?
Visualize seus arquivos JavaScript mais pesados e saiba de onde eles vêm. Se estiver hospedado em seu servidor, você pode adiar, atrasar, minimizar e remover JavaScript não utilizado. Algum JavaScript de terceiros pode ser hospedado localmente, o que permite otimizá-lo melhor.
Como faço para reduzir o tempo de execução do JavaScript usando WP Rocket?
Habilite o carregamento de JavaScript adiado, reduza o JavaScript e combine-o. Tente atrasar o JavaScript não crítico e pré-buscar domínios de terceiros para reduzir o tempo de execução do JavaScript usando WP Rocket.
Como reduzo o tempo de execução do JavaScript usando.htaccess?
Adicionar compactação GZIP em seu arquivo.htaccess pode reduzir o tempo de execução do JavaScript ao compactar ativos.
Tom
