Como remover CSS não utilizado no WordPress (da maneira certa)

Quer remover CSS não utilizado no WordPress para fazer seu site carregar 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 desse código CSS melhora o desempenho e a experiência do usuário do WordPress.

Neste artigo, mostraremos como remover facilmente CSS não utilizado no WordPress sem quebrar seu site.

remover CSS não utilizado
remover CSS não utilizado

O que é CSS não utilizado no WordPress?

CSS não utilizado no WordPress é o código CSS que é carregado no seu site, mas não é realmente necessário para exibir a página.

O código adicional pode fazer o navegador do visitante demorar um pouco mais para renderizar uma página, criando 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 Estatísticas de velocidade de página do Google. Ele mostrará uma seção intitulada ‘Remover CSS não utilizado’ com detalhes de quais arquivos CSS estão afetando o tempo de carregamento.

Problema de código CSS não usado no Google Pagespeed Insights

Por que CSS não utilizado está sendo adicionado ao WordPress?

CSS é usado para projetar a aparência do seu site WordPress. Seu tema WordPress inclui CSS, e a maior parte dele está 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, um plug-in de construtor de páginas adicionará seu próprio CSS para exibir suas páginas personalizadas e um plug-in de construtor de formulários incluirá CSS para projetar seus formulários.

Então você tem suas fontes da web, fontes de ícones e outros elementos que também precisarão adicionar seus próprios arquivos CSS.

Esses arquivos geralmente 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.

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Como remover CSS não utilizado no WordPress?

Existem algumas maneiras diferentes de reduzir 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 à maneira como o WordPress funciona nos bastidores, alguns CSS não utilizados podem ser difíceis de encontrar e remover.

Dito isso, mostraremos dois métodos de remoção de CSS não utilizado, e você pode escolher aquele que melhor se adapta às suas necessidades.

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.

Acreditamos 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 o seu site carrega rapidamente nas ferramentas de teste de velocidade e parece rápido para os usuários também.

Primeiro, você precisa instalar e ativar o plugin WP Rocket.

Após a ativação, você deve visitar o Configurações »Rocket WP e mude para a guia ‘Otimização de arquivo’.

Otimização de arquivos em WP Rocket - remover CSS não utilizado

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 entrega de CSS’.

Otimize a entrega de CSS no WP Rocket - remover CSS não utilizado

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. Primeiro, você carrega esse arquivo, mostra a página aos visitantes e, em seguida, carrega outros arquivos CSS usando uma tecnologia chamada carregamento lento.

Ao remover esse CSS de bloqueio de renderização, os usuários podem visualizar seu site muito mais rápido do que se você tivesse que carregar todos os arquivos CSS antes de a página ser exibida.

Leia Também:  Como indexar o novo conteúdo do WordPress mais rápido no Google

Depois de habilitar a opção ‘Otimizar entrega de CSS’, clique no botão Salvar alterações e aguarde o WP Rocket gerar o arquivo CSS necessário para todos os seus posts e páginas. Ele também limpará automaticamente o cache do seu site.

Quando terminar, você pode testar o desempenho do seu site novamente usando o Google Pagespeed Insights.

Configurações adicionais de entrega de arquivo para melhorar o desempenho

WP Rocket também permite remover strings de consulta de arquivos estáticos, combinar arquivos de fontes do Google e minimizar HTML. Todos esses ajustes adicionam pequenas melhorias à sua velocidade geral, contribuindo para uma experiência de carregamento mais rápida para seus visitantes.

Otimização básica de arquivos - remover CSS não utilizado

Você também verá opções para minimizar e combinar arquivos CSS. Essas opções reduzirão as solicitações de HTTP e aumentarão a velocidade adicional.

No entanto, você precisará verificar cuidadosamente o seu site para ter certeza de que nada está quebrado após ativar essas configurações.

Minimize e combine arquivos CSS - remover CSS não utilizado

Além disso, você pode aplicar a mesma otimização para arquivos JavaScript em seu site. Você pode minimizar e combiná-los para funcionar como um único arquivo e adiar o carregamento de arquivos JavaScript para melhorar o desempenho.

Otimize a entrega de JavaScript

.

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 (asset clean-up) pluguin. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você deve visitar o Limpeza de ativos »Configurações página e mude para a guia Modo de teste. A partir daqui, você precisa ativar a opção ‘Ativar modo de teste’.

Leia Também:  Como usar os recursos SERP para informar sua estratégia de conteúdo

Ativar opção de modo de teste - remover CSS não utilizado

Isso permite que você teste diferentes configurações e as teste como administrador sem afetar os visitantes do site.

Depois disso, você deve visitar o Limpeza de ativos »Gerenciador CSS / JS página. A partir daqui, você pode baixar arquivos CSS e JavaScript indesejados página por página.

Gerenciador de CSS / JS

Ele primeiro encontrará 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 desativá-lo para essa página específica, tipo de postagem ou para todo o site.

Download do arquivo

O plugin também permite que você escolha postagens ou páginas específicas daqui, ou você pode acessar as mesmas opções editando a postagem ou página como faria normalmente.

Na tela de edição de postagem, você encontrará a caixa Limpeza de ativos logo abaixo do editor de postagem.

Limpeza de ativos no editor de postagem

O plugin irá pesquisar e listar automaticamente todos os arquivos e ativos carregados quando um visitante visualizar esta página em seu site. Em seguida, você pode simplesmente baixar os arquivos CSS ou JavaScript não usados ​​que você não precisa nessa página.

Baixe arquivos para uma página específica

Importante: Não se esqueça de testar seu site após remover qualquer CSS ou JavaScript não utilizado para garantir que tudo funcione corretamente.

Quando terminar de baixar e remover arquivos CSS e JavaScript não usados, você pode voltar para a página de configurações do plugin e desabilitar o ‘Modo de Teste’.

Não se esqueça de clicar no botão Atualizar todas as configurações para salvar suas alterações.

Agora você pode testar seu site com o Google Pagespeed Insights para ver a alteração no aviso CSS não utilizado.

CSS reduzido no WordPress

Esperamos que este artigo o tenha ajudado a aprender como remover facilmente CSS não utilizado no WordPress. Você também pode querer seguir nosso guia completo sobre quanto custa construir um site e verificar nossa lista de hospedagem WordPress mais bem gerenciada.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: