Como remover CSS e JS não utilizados no WordPress (muito fácil)
Ter muito CSS não utilizado pode deixar seu site mais lento. Se você testar seu site com o insight do Google PageSpeed, poderá receber um aviso para remover o CSS não utilizado. Existe uma maneira fácil de fazer isso sem codificação e tecnicismo.
Ter muito CSS e JS não utilizado em seu site pode prejudicar o tempo de carregamento do site. Se você executar seu site por meio de um ferramentas de teste de velocidade tais como Google PageSpeed Insight, você pode receber um aviso para remover o CSS não utilizado.
Felizmente, existe uma maneira muito fácil de fazer isso. Você não precisa ter nenhum conhecimento técnico especial para poder remover CSS e JS não utilizados do seu site WordPress.
Isto é por causa de uma incrível plug-in conhecido como Limpeza de ativos: impulsionador da velocidade da página. Com este plugin, remover CSS não utilizado é tão fácil quanto clicar em alguns botões. Alternativamente, se você não se importa de gastar alguns dólares por ano, com WP Rocket, há um botão CSS não utilizado removido, basta ativá-lo e o plugin removerá todo CSS não utilizado automaticamente.
Confira: As 7 principais hospedagens gerenciadas do Google Cloud WordPress
O que é CSS não utilizado?
CSS não usado é um arquivo CSS que está presente em uma página, mas na maioria das vezes não é necessário para que a página seja carregada. Quando um visitante abre um site, o navegador normalmente precisa baixar, analisar e processar todas as folhas de estilo externas na página visitada antes de poder exibir o conteúdo da página para o visitante. Se existir algum CSS em tal página que não seja usado na página, o navegador perderá seu tempo com isso.
Um exemplo clássico disso é a maioria dos plugins de formulário de contato que são usados. Esses plugins, embora sejam usados principalmente apenas na página Fale conosco, carregam seu CSS em todo o site. Não importa se é a página inicial onde não é usado, o CSS será carregado.
Se houver muitos CSS que não são necessários, mas estão carregando e diminuindo o tempo do navegador para ler e exibir uma página, isso pode se tornar um problema.
Além dos plugins, os desenvolvedores de temas escrevem muitas coisas no style.css que na maioria das vezes não são necessárias. Mas se necessário ou não, eles carregam sempre que seu site é carregado!
Um CSS não utilizado pode não ser um problema, mas muito CSS não utilizado pode afetar o tempo de carregamento do seu site.
Confira: Os 10 melhores e mais rápidos temas WordPress
Como identificar CSS não utilizado
Encontrar CSS e JS não utilizados é uma coisa muito fácil de fazer. Existem duas abordagens que eu recomendarei.
Uma delas é analisar seu site através do Google PageSpeed Insight. Verifique se o seu site tem um problema de remoção de CSS não utilizado. Clique nele e você poderá identificar o componente do seu site responsável por ele.
Você pode ver acima que há um caso de CSS não utilizado registrado. Eu sou capaz de ver o plugin e a localização do CSS não utilizado olhando para isso.
A segunda opção é obter uma análise mais detalhada. Você pode conseguir isso usando as ferramentas do Chrome Dev.
No navegador Chrome, abra as ferramentas do Chrome Dev e vá para a cobertura. Em seguida, clique no botão recarregar dentro da área de cobertura. Você pode encontrar um guia completo sobre como fazer isso na ferramenta Google Developers.
A outra opção é usar jitbit para procurar seletores CSS não utilizados. Você também pode usar Purificar CSS para encontrar CSS não utilizado
Como remover CSS não utilizado
Siga estas etapas para remover CSS não utilizado do WordPress:
1. Instale a Limpeza de Ativos
Vá para o plugin e depois Adicionar novo. Em seguida, você digita “Asset CleanUp” na caixa de pesquisa da página Adicionar novo plug-in. Instale e ative o plug-in.
2. Vá para as configurações do plug-in
Para acessar as configurações do plugin, no painel do WordPress, clique em configurações e clique em Asset CleanUp.
3. Descarregue CSS e JS indesejados
Nas configurações do plug-in, talvez seja necessário aceitar que você sabe como o plug-in funciona sob a torneira de remoção de gordura antes de começar.
Para descarregar CSS e JS, clique no gerenciador de CSS e JSS. A partir daí, você pode remover qualquer CSS e JS que não precise. Você pode removê-lo apenas para a página inicial, para todo o site ou para um URL específico. Você também pode remover postagens, páginas ou categorias.
Um exemplo é descarregar qualquer formulário de contato do carregamento para todo o site, exceto a página de contato
Não tenha pressa e descarregue todos os CSS e JS que você sabe que não são necessários. Certifique-se de testar seu site depois de terminar para garantir que tudo esteja bem.
Remova os plugins CSS WordPress não utilizados
Aqui estão alguns plugins que você pode usar para remover CSS não utilizado no WordpPress:
1. Limpeza de ativos: impulsionador de velocidade da página
Limpeza de ativos: impulsionador da velocidade da página facilita a remoção de CSS e JSin não utilizados do WordPress, mesmo para iniciantes. Tudo o que você precisa fazer é desativar um CSS específico que não é necessário para uma página específica.
Você também pode desativar apenas para postagens individuais. Com a versão premium, você pode desativar CSS/JS não utilizado por plugins.
Este plugin é um plugin de desempenho completo com muitas outras opções para acelerar o WordPress. A remoção de CSS/JS não utilizado é apenas parte disso.
Neste post, eu usei este plugin tem um guia.
2. WP foguete
WP Rocket é o plugin de desempenho premium do WordPress número um. Se você é um noob, quero dizer, se você não é experiente ou confortável com o WordPress, então o WP Rocket é a maneira mais fácil de remover CSS não utilizado.
Você precisa adquirir o plugin, depois de fazer isso, você pode baixá-lo da sua conta ou verificar seu email para um link de download.
Instale o plugin via Dashboard>plugins>Add new>Upload.
Basta navegar até as configurações do WP Rocket e clicar na guia “Otimização de arquivo”. Em seguida, role para baixo e você verá “Remover CSS não usado”, marque a caixa, salve e limpe o cache.
3. Perfmatters
Perfmatters é um plugin premium desenvolvido por Brian Jackson e seu irmão, Brett Jackson. Este plugin pode ajudar a remover CSS não utilizado com muita facilidade.
Primeiro, você precisa comprar o plugin. Em seguida, instale-o. Ative a licença. Ao navegar para as configurações, ative o gerenciador de scripts.
Basta ir a qualquer página ou post em seu site, você verá o ícone do gerenciador de scripts no menu do painel, clique nele. Você poderá remover CSS e JS não utilizados da página ou globalmente.
Este plugin é um plugin de desempenho, vem com muitas outras opções para acelerar o WordPress. A remoção de CSS/JS não utilizado faz parte disso.
4. Gerenciador CSS JS
Gerenciador CSS JS pode remover especificamente CSS ou JS do Mobile ou Desktop. Dependendo do que você deseja alcançar.
Este plugin também pode adiar o carregamento de arquivos CSS ou JS.
Conclusão
Se você tiver muitos CSS e JS não utilizados, notará uma grande melhoria nas pontuações de velocidade e desempenho.
Pode ser impossível remover todos os CSS não utilizados, mas você pode reduzi-los ao mínimo. Eu uso o Asset CleanUp para remover CSS não utilizado para TargetTend.
Lembre-se, otimize, mas não fique muito obcecado com isso, a menos que você queira que seu site pareça o site mais rápido do mundo.
Veja também:
Como eliminar recursos de bloqueio de renderização no WordPress
