Você deseja remover CSS não usado no WordPress para que seu site carregue mais rápido?
CSS não utilizado é qualquer código CSS adicionado pelo seu tema WordPress ou plug-ins de que você realmente não precisa. A remoção deste código CSS melhora o desempenho do WordPress e a experiência do usuário.
Neste artigo, mostraremos como remover facilmente CSS não utilizado no WordPress sem quebrar seu site.
O que é CSS não utilizado no WordPress?
CSS não utilizado no WordPress é código CSS que carrega em seu site mas não é realmente necessário para exibir a página.
O código extra pode fazer com que o navegador do visitante demore um pouco mais para renderizar uma página, o que cria uma experiência ruim para o usuário. Os tempos de carregamento mais lentos podem até mesmo afetar suas classificações de pesquisa , resultando em menos tráfego para seu site.
Você pode ver como o código CSS não utilizado está afetando seu site usando Google Pagespeed Insights . Ele mostrará uma seção intitulada ‘Remover CSS não utilizado’ com detalhes de quais arquivos CSS estão afetando o tempo de carregamento.
Por que CSS não usado é adicionado ao WordPress?
CSS é usado para estilizar a aparência de seu site WordPress . Seu tema WordPress inclui CSS, com a maior parte incluída em um único arquivo style.css.
Além do CSS do seu tema, os plug-ins do WordPress também carregam seu próprio CSS. Por exemplo, WooCommerce carregará CSS para exibir produtos, a plug-in do construtor de páginas adicionará seu próprio CSS para exibir suas páginas personalizadas e um plugin de criação de formulários incluirá CSS para definir o estilo de seus formulários.
Então, você tem fontes da web , fontes de ícones e outros elementos que também precisarão adicionar seus próprios arquivos CSS.
Normalmente, esses arquivos são muito pequenos e carregam rapidamente. No entanto, se o seu site WordPress tiver muitos deles, os efeitos podem se somar e ter um impacto perceptível na velocidade do seu site.
Como remover CSS não utilizado no WordPress?
Existem algumas maneiras diferentes de reduzir o CSS não utilizado em seu site WordPress.
No entanto, seria uma tarefa bastante difícil remover completamente todos os CSS não utilizados no WordPress. Devido à forma O WordPress funciona nos bastidores , alguns CSS não utilizados podem ser difíceis de encontrar e remover.
Dito isso, mostraremos dois métodos para remover CSS não utilizado, e você pode escolher aquele que funciona melhor para você.
Método 1. Remova CSS não utilizado no WordPress usando WP Rocket
Este método é mais fácil e recomendado para iniciantes. Ele melhora muito a entrega geral de arquivos CSS em seu site WordPress, incluindo a remoção da maioria dos CSS não utilizados.
Achamos que é a melhor solução para iniciantes porque é mais fácil e atinge o objetivo principal de proporcionar uma melhor experiência aos seus usuários. Isso significa que seu site carrega rapidamente nas ferramentas de teste de velocidade e também parece rápido para seus usuários.
Primeiro, você precisa instalar e ativar o Plugin WP Rocket . Para obter mais detalhes, consulte nosso guia passo a passo em como instalar um plug-in WordPress .
Após a ativação, você precisa visitar a página Configurações »Foguete WP e alternar para a guia‘ Otimização de arquivo ’.
Em seguida, você precisa rolar para baixo até a seção de arquivos CSS. A partir daqui, você precisa marcar a caixa ao lado da opção ‘Otimizar envio de CSS’.
Esta opção gera um arquivo CSS que contém apenas o código CSS necessário para exibir a parte visível do seu site. Ele carrega esse arquivo primeiro, exibe a página aos visitantes e, em seguida, carrega outros arquivos CSS usando uma tecnologia chamada carregamento adiado.
Ao remover este CSS de bloqueio de renderização , seu site se tornará visível para os usuários muito mais rapidamente do que se você tivesse que carregar todos os arquivos CSS antes de a página ser exibida.
Depois de ativar a opção ‘Otimizar entrega de CSS’, clique no botão Salvar alterações e espere que o WP Rocket gere o arquivo CSS necessário para todas as suas postagens e páginas Ele também limpe o cache do seu site.
Quando terminar, você pode testar o desempenho do seu site novamente usando o Google Pagespeed Insights.
Ajustes adicionais na entrega de arquivos para melhorar o desempenho
WP Rocket também permite que você remova strings de consulta de arquivos estáticos, combine arquivos Google Fonts e reduza HTML. Todos esses ajustes adicionam pequenas melhorias à sua velocidade geral, o que contribui para uma experiência de carregamento mais rápida para os visitantes.
Você também verá opções para reduzir e combinar arquivos CSS. Essas opções reduzirão as solicitações HTTP e darão a você um aumento adicional de velocidade.
No entanto, você precisará verificar cuidadosamente o seu site para ter certeza de que nada está quebrado após ativar essas configurações.
Além disso, você pode aplicar a mesma otimização para arquivos JavaScript em seu site. Você pode reduzi-los e combiná-los para servir como um único arquivo e adiar o carregamento de arquivos JavaScript para melhorar o desempenho.
Para obter mais detalhes, consulte nosso tutorial passo a passo em como configurar corretamente o WP Rocket no WordPress .
Método 2. Remova CSS não utilizado no WordPress usando Asset CleanUp
Este método é um pouco avançado, mas incrivelmente poderoso, e permitirá que você remova facilmente qualquer CSS não utilizado de qualquer página do seu site WordPress.
No entanto, é um pouco complicado e você precisará testar a funcionalidade e a aparência do seu site completamente para ter certeza de que nada está quebrado.
Primeiro, você precisa instalar e ativar o Limpeza de ativos . Para obter mais detalhes, consulte nosso guia passo a passo em como instalar um plug-in WordPress .
Após a ativação, você precisa visitar a página Limpeza de ativos »Configurações e alternar para a guia Modo de teste. A partir daqui, você precisa ativar a opção ‘Ativar modo de teste’.
Isso permite que você experimente diferentes configurações e teste-as como administrador sem afetar os visitantes do site.
Depois disso, você precisa visitar a página Limpeza de ativos »Gerenciador de CSS/JS . A partir daqui, você pode descarregar arquivos CSS e JavaScript indesejados página a página.
Primeiro, ele buscará sua página inicial e mostrará todos os arquivos CSS e JavaScript carregados nessa página.
Você precisa rolar para baixo e revisar os arquivos carregados. Se você vir um arquivo de que não precisa, pode descarregá-lo para essa página, tipo de postagem ou em todo o site em particular.
O plug-in também permite que você escolha postagens ou páginas específicas a partir daqui, ou você pode acessar as mesmas opções editando a postagem ou página como faria normalmente.
Na tela de edição da postagem, você encontrará a caixa Limpeza de ativos logo abaixo do editor de postagem.
O plugin irá buscar e listar automaticamente todos os arquivos e ativos carregados quando um visitante visualizar esta página em seu site. Você pode então simplesmente descarregar os arquivos CSS ou JavaScript não utilizados de que você não precisa nessa página.
Importante: não se esqueça de testar seu site após remover qualquer CSS ou JavaScript não utilizado para se certificar de que tudo está funcionando bem.
Quando terminar de descarregar e remover os arquivos CSS e JavaScript não utilizados, você pode voltar à página de configurações do plug-in e desligar o ‘Modo de teste’.
Não se esqueça de clicar no botão Atualizar todas as configurações para armazenar suas alterações.
Agora você pode testar seu site usando o Google Pagespeed Insights para ver a mudança no aviso de CSS não utilizado.
Esperamos que este artigo o tenha ajudado a aprender como remover facilmente CSS não utilizado no WordPress. Você também pode seguir nosso guia completo em quanto custa construir um site e verifique nossa lista de Best Managed WordPress Hosting .
Se gostou deste artigo, inscreva-se no nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook .
A postagem How to Remove Unused CSS in WordPress (The Right Way) apareceu primeiro em WPBeginner .
