JavaScript e CSS de bloqueio de renderização no WordPress: 5 plug-ins para corrigir

Não faz muito tempo, o Google anunciou que os sites que demoravam mais de três segundos para carregar não eram amigáveis ​​para SEO.

Nesta era de internet e marketing digital, você precisa ter o site mais rápido se quiser competir com milhares de rivais em todo o mundo de forma eficaz. Não há dúvida de que um site mais rápido tem melhores chances de atrair visitantes e aumentar seu engajamento em seu conteúdo.

Executar um site WordPress significa um número significativo de scripts executados ao mesmo tempo para tornar seu site acessível.

No entanto, nem todos esses itens são sempre essenciais para carregar. Se você já verificou o desempenho do seu site com Google Page Speed ​​Insights, provavelmente você já encontrou a opção de bloqueio de renderização de JavaScript e CSS que impacta sua velocidade.

Hoje vamos falar sobre esses arquivos estranhos e esclarecê-los sobre as maneiras de removê-los para melhorar seu site.

 

O que são JavaScript e CSS com bloqueio de renderização?

Em suma, JavaScript e CSS de bloqueio de renderização são uma série de folhas de estilo e scripts necessários para serem executados inteiramente antes que um site carregue e se torne visível.

Os temas e plug-ins que você instala no seu site WordPress adicionam muitos desses arquivos à seção de front-end do seu site. E, como você deve ter adivinhado, alguns deles reduzem o tempo de carregamento da página e impedem que suas páginas sejam renderizadas.

Quando um visitante abre seu site, o navegador da Internet carrega primeiro os arquivos JavaScript e CSS necessários antes do HTML.

Este é um procedimento normal, pois uma página sem esses elementos essenciais ficará inutilizável. O problema é que o navegador não consegue processar a página antes que esses arquivos sejam carregados completamente.

O truque aqui é que você pode adiar o carregamento de alguns scripts sem causar problemas para o que os visitantes veem ao abrir uma página sua.

Os proprietários de sites podem fazer modificações em seus sites para evitar que os navegadores carreguem códigos fora do necessário para a parte superior da página que o usuário vê imediatamente.

Em outras palavras, os navegadores carregam apenas os arquivos essenciais para aquela seção antes de um usuário rolar a página para baixo. Essa área das páginas da web é chamada de ATF, que significa Acima da Dobra. Outras partes que exigem que os usuários rolem para baixo para poder ver é a seção não ATF.

Portanto, se o seu site carregar os códigos JavaScript e CSS relacionados às seções não ATF, o carregamento das páginas demorará mais. E é por isso que o Google tenta dizer para você parar de executar os recursos desnecessários nos códigos do seu site.

 

Encontre JavaScript e CSS de bloqueio de renderização

A maneira mais fácil de descobrir esse problema é executar um teste de velocidade usando o Google PageSpeed ​​Insights. Depois de visitar a página, tudo o que você precisa fazer é inserir seu endereço URL no campo obrigatório e clicar no botão 'Analisar'.

Se você tiver esse problema de execução na página, verá uma sugestão que informa para eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra.

Seria melhor se você não se esquecesse de que mais pontuação de sites algo entre 70 e 90, e mesmo os de melhor desempenho raramente alcançam um número próximo a 100. Portanto, você nunca deve forçar seu site a chegar a 100. Faça o máximo que puder para atingir a pontuação mais alta sem afetar a experiência do usuário negativamente.

Dependendo do tema e das ferramentas que você usa em seu site, alguns scripts são essencial para o UX perfeito você deve oferecer ao seu público. Portanto, é totalmente imprudente removê-los na tentativa de alcançar uma pontuação um pouco mais alta na página de resultados desta ferramenta do Google.

 

Corrigir JavaScript e CSS de bloqueio de renderização

Existem várias estratégias para eliminar o JavaScript de bloqueio de renderização. Os métodos principais são Async e Defer. O primeiro método permite que o navegador do usuário baixe o JavaScript enquanto analisa outras partes HTML.

Embora não interrompa completamente a análise durante o download do arquivo, o Analisador HTML faz uma pausa para executar o script durante o download. Por outro lado, a abordagem Defer permite que o navegador baixe o JavaScript enquanto analisa outras partes do HTML e não executa o script a menos que a análise do HTML termine.

Eliminar o CSS de bloqueio de renderização é mais desafiador, pois você pode atrasar os códigos necessários para carregar o conteúdo ATF. O procedimento é um pouco complicado e requer um bom conhecimento de desenvolvimento web.

No entanto, estamos nos dirigindo ao usuário médio que administra seu site por conta própria.

Todos nós sabemos que o WordPress é um sistema modular que permite aos usuários comuns ajustar tudo sem escrever uma única linha de código. A correção desse problema também é a mesma, e você pode resolver o problema rapidamente instalando o plug-in apropriado.

 

Os melhores plug-ins do WordPress para corrigir JavaScript e CSS de bloqueio de renderização

Nos próximos parágrafos, apresentaremos cinco plug-ins WordPress de melhor desempenho que o ajudam a resolver esse problema de maneira mais profunda.

Cuidado: Antes de usar qualquer uma das ferramentas a seguir, certifique-se de fazer backup do seu site para evitar qualquer provável perda de dados.

 

Autoptimize

A Autoptimize O plugin é feito explicitamente para resolver os problemas sugeridos pelas ferramentas de análise de sites como o Google PageSpeed ​​Insights. Ele melhora a entrega de arquivos JavaScripts e CSS sem muito foco em outros aspectos do desempenho do site.

Se você está procurando recursos básicos de otimização, este plugin lhe dará o que você precisa. Uma boa parte dessa ferramenta é que ela converte as imagens do seu site para o formato WebP otimizado.

Depois de instalar e ativar a otimização automática, você precisa marcar as opções de 'Otimizar código JavaScript' e 'Otimizar código CSS' nas configurações do plug-in. Tenha cuidado para não marcar as caixas abaixo dessas duas opções que agregam os arquivos CSS e de script.

Embora este plugin esteja disponível gratuitamente, você também pode comprar pacotes premium que ajudam na configuração do site.

 

WP Rocket

WP Rocket é um nome bem conhecido entre as ferramentas de otimização do WordPress que auxiliam você em diferentes aspectos, como modificação de JavaScript e CSS, configurações de carregamento lento. O processo de configuração do WP Rocket é bastante simples, mas você pode achar difícil em primeiro lugar entender como as coisas são feitas na interface.

Está pronto assim que sai da caixa e aplica as configurações ideais ao seu site imediatamente após a instalação. Considerando a inevitabilidade de mau funcionamento do site devido a alterações de script, o plug-in não ativa as configurações de JavaScript e CSS de bloqueio de renderização por padrão.

Mas você pode ativar esse recurso facilmente acessando as configurações do plug-in e procurando as opções relacionadas nas seções 'Arquivos CSS' e 'Arquivos JavaScript'.

O plugin principal custa US $ 49 por ano, que vem com um ano de suporte também. Além disso, você pode encontrar vários extras grátis para o plugin principal do WordPress também.

 

RabbitLoaderGenericName

RabbitLoaderGenericName é um plug-in de otimização de desempenho do WordPress de última geração, projetado para fazer um site funcionar de maneira mais rápida, suave e eficiente.

Semelhante ao amplamente aclamado WP Rocket, RabbitLoader não apenas leva o desempenho do seu site a novos patamares, mas também apresenta alguns recursos inovadores que o diferenciam de outros jogadores no jogo.

Magia de cache: RabbitLoader vai além ao oferecer um sistema de cache dinâmico que se adapta em tempo real às mudanças em seu site, garantindo que seus visitantes sempre vejam o conteúdo mais recente sem sacrificar a velocidade.

Otimização de imagem: As imagens podem tornar um site significativamente mais lento, mas o recurso de otimização de imagens do RabbitLoader é uma virada de jogo. Ele compacta e redimensiona imagens automaticamente para um tamanho ideal sem comprometer a qualidade, garantindo que seu site carregue rapidamente sem sacrificar o apelo visual.

Carregamento lento: Tanto o WP Rocket quanto o RabbitLoader oferecem carregamento lento para imagens e iframes, mas o RabbitLoader vai além ao oferecer carregamento adiado de JavaScript.

Compatibilidade: RabbitLoader foi projetado para funcionar perfeitamente com uma ampla variedade de temas e plug-ins WordPress, assim como WP Rocket. Quer você tenha um blog simples ou um site de comércio eletrônico complexo, o RabbitLoader foi projetado para melhorar o desempenho do seu site sem conflitos.

 

W3 Total Cache

W3 Total Cache é um potenciador de desempenho robusto que lida não apenas com problemas de cache, mas também com os problemas causados ​​por scripts e folhas de estilo.

Você pode remover facilmente o JavaScript e CSS de bloqueio de renderização, primeiro habilitando a opção Minificar nas configurações do plug-in e definindo-o no modo manual.

Em seguida, você deve clicar na guia 'Eliminar recursos de bloqueio de renderização' e copiar o endereço completo do link dos arquivos necessários para scripts de bloqueio e folhas de estilo. Agora você pode usar esses links e inseri-los na 'seção JS' do Desempenho> Reduzir aba.

O W3 Total Cache tem mais de um milhão de instalações ativas e você pode baixá-lo em seu site gratuitamente no site WordPress.org.

 

Pacote de reforço de velocidade

Pacote de reforço de velocidade é uma ferramenta confiável para otimizar folhas de estilo, JavaScripts, carregamento lento e remoção de desordem. A equipe de desenvolvimento está continuamente atualizando este plugin para mantê-lo atualizado com as últimas atualizações e medidas de segurança.

Se você vende produtos e serviços online, o Otimização específica para WooCommerce As funcionalidades do Speed ​​Booster Pack irão ajudá-lo muito a aumentar a visibilidade da sua loja na internet.

Você pode corrigir rapidamente JavaScript e CSS de bloqueio de renderização em seu site WordPress clicando na guia 'Avançado' no menu Speed ​​Booster Pack de seu painel de administração.

Para JavaScript, ative as opções 'Mover scripts para o rodapé' e 'Adiar a análise de arquivos JavaScript'. Em seguida, vá até o menu 'Otimização de CSS' e escolha uma das opções disponíveis para melhorar o desempenho do seu site.

O Speed ​​Booster Pack é uma solução gratuita disponível no site WordPress.org.

 

Otimizar JCH

Otimizar JCH é o último item desta lista de plug-ins sugeridos que vem equipado com ferramentas úteis para acelerar o carregamento da página. Por exemplo, ajuda a reduzir quantas solicitações HTTP são necessárias para carregar suas páginas e, ao mesmo tempo, diminui o tamanho dessas páginas.

Gerador de Sprite é outro recurso interessante disponível neste plug-in que reduz o número de solicitações HTTP para carregar as imagens de fundo.

Usando o JCH Optimize, você pode remover o JavaScript e CSS de bloqueio de renderização se fizer upgrade para um plano premium. Tudo que você precisa é ativar as opções 'Premium' ou 'Optimum' na seção 'Configurações automáticas'. As configurações de entrega CSS também estão disponíveis apenas na versão Pro.

Você pode instalar este plugin gratuitamente no WordPress.org, mas você precisa comprar um plano premium para desbloquear todo o seu potencial. Os planos de preços começam em US $ 29 por seis meses e chegam a US $ 99 para acesso vitalício.

 

Resumo

A velocidade de carregamento do site é um dos elementos mais críticos para atrair, envolver e reter públicos. Você deve dar a ele uma alta prioridade ao otimizar seu site para mecanismos de pesquisa e usar a ferramenta Google PageSpeed ​​Insights para medir o seu desempenho neste campo.

O item JavaScript e CSS de bloqueio de renderização é uma das sugestões mais comuns que você pode ver ao usar a ferramenta poderosa do Google. Você pode corrigir esse problema facilmente instalando um dos cinco plug-ins que apresentamos neste artigo e acelere a velocidade de carregamento de suas páginas largamente.

Esperamos que você ache este tutorial benéfico e desfrute de um site de carregamento rápido para os melhores resultados possíveis.