Como Remover CSS Não Utilizado no WordPress (Da Maneira Certa)

Como proprietários de sites WordPress, todos nós nos esforçamos para oferecer uma experiência de usuário rápida e otimizada. Isso não apenas mantém os visitantes engajados, mas também ajuda nossos sites a ter uma classificação mais alta nos resultados de pesquisa.

Você pode não perceber que seus temas e plugins frequentemente carregam muito mais código CSS do que suas páginas precisam. Esse CSS não utilizado pode estar secretamente diminuindo a velocidade do seu site.

Cada linha de código extra que seus visitantes precisam baixar adiciona segundos preciosos ao tempo de carregamento. E no mundo de hoje, mesmo um atraso de um segundo pode custar visitantes e vendas.

É por isso que reunimos este guia completo sobre como remover CSS não utilizado do WordPress da maneira certa. Mostraremos os métodos exatos que usamos para limpar folhas de estilo inchadas e acelerar sites sem quebrar nada.

O que é CSS Não Utilizado no WordPress?

CSS não utilizado no WordPress refere-se a código CSS que é carregado em suas páginas da web, mas não é realmente usado para estilizar nada visível nessas páginas específicas.

Esse código extra força os navegadores dos visitantes a baixar e processar arquivos desnecessários, o que diminui os tempos de carregamento de suas páginas. Mesmo alguns segundos extras podem prejudicar sua experiência do usuário e classificações nos mecanismos de busca, potencialmente custando visitantes e conversões.

Você pode verificar facilmente se CSS não utilizado está afetando seu site executando-o através do Google Pagespeed Insights. Procure pelo aviso 'Remover CSS não utilizado' em seus resultados. Ele mostrará exatamente quais arquivos estão diminuindo a velocidade.

Por que o WordPress Carrega CSS Não Utilizado?

A questão é: o WordPress não foi projetado para ser seletivo sobre qual CSS ele carrega. Seu tema do WordPress vem com uma folha de estilo mestre (geralmente chamada de style.css) que contém regras de estilo para todos os elementos possíveis, mesmo aqueles que você talvez nunca use.

Mas seu tema é apenas o começo. Cada plugin que você instala adiciona seus próprios arquivos CSS à mistura. WooCommerce carrega estilos de loja em todas as páginas (até mesmo em suas postagens de blog), construtores de página carregam seu CSS globalmente, e plugins de formulário de contato carregam estilos de formulário em páginas sem formulários.

Adicione fontes personalizadas, bibliotecas de ícones e outros elementos de design, e você acabará com muito inchaço de CSS. Embora cada arquivo individual possa ser pequeno, eles se acumulam rapidamente e impactam a velocidade do seu site.

Como Remover CSS Não Utilizado no WordPress

Agora, as boas notícias: existem várias maneiras eficazes de limpar o CSS não utilizado em seu site WordPress. Testamos várias abordagens e encontramos métodos que funcionam de forma confiável sem quebrar seu site.

Aqui está o que você precisa saber de antemão: eliminar completamente 100% do CSS não utilizado é quase impossível devido a como o WordPress carrega conteúdo dinamicamente. Parte do CSS precisa permanecer pronto para elementos interativos, conteúdo condicional e diferentes tipos de página.

Mas não se preocupe, você não precisa de perfeição para ver grandes melhorias. Remover até 50-70% do CSS não utilizado pode acelerar drasticamente seu site.

Mostraremos dois métodos comprovados que encontram o equilíbrio certo entre ganhos de desempenho e estabilidade do site, para que você possa escolher a abordagem que se adapta ao seu nível de conforto.

1. Remover CSS Não Utilizado no WordPress Usando WP Rocket
2. Remove Unused CSS in WordPress Using Asset CleanUp

Método 1: Remover CSS Não Utilizado no WordPress Usando WP Rocket

Este método é mais fácil e recomendado para iniciantes. Ele melhora significativamente a entrega geral dos arquivos CSS em seu site WordPress, incluindo a remoção da maior parte do CSS não utilizado.

Acreditamos que é a melhor solução para iniciantes porque é mais fácil e atinge o objetivo principal de proporcionar uma melhor experiência para seus usuários. Isso significa que seu site carrega rapidamente em 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 mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você precisa visitar a página Configurações » WP Rocket e mudar para a aba ‘Otimização de Arquivos’.

Em seguida, você precisa rolar para baixo até a seção Arquivos CSS e marcar a caixa ao lado da opção ‘Remover CSS Não Utilizado (Beta)’.

Como este recurso do WP Rocket está em beta, ele perguntará novamente se você deseja ativar a configuração. Você pode prosseguir e clicar no botão ‘Ativar Remoção de CSS Não Utilizado’.

Uma vez que a opção ‘Remover CSS Não Utilizado’ estiver ativa, você poderá especificar nomes de arquivos CSS, IDs ou classes que não devem ser removidos na caixa ‘Lista de permissões de CSS’.

Simplesmente insira-os na caixa.

Em seguida, você precisará salvar suas alterações rolando para baixo e clicando no botão ‘Salvar Alterações’.

Ao fazer isso, o WP Rocket começará a processar seus arquivos CSS e mostrará uma barra de progresso.

Levará alguns minutos para o plugin processar e remover os arquivos CSS não utilizados do seu site.

Você verá uma mensagem ‘Remoção de CSS Não Utilizado concluída!’ quando o plugin tiver finalizado o processo.

Agora, visite a ferramenta Google Pagespeed Insights e teste o desempenho do seu site.

Remover CSS que Bloqueia a Renderização para WordPress

O WP Rocket permite otimizar seus arquivos CSS e remover CSS que bloqueia a renderização do seu site.

Para começar, você pode navegar até a aba ‘Otimização de Arquivos’ no WP Rocket. A partir daqui, role para baixo até a seção Arquivos CSS e, em seguida, marque a caixa ao lado da opção ‘Otimizar entrega 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 para seus visitantes e, em seguida, carrega outros arquivos CSS usando uma tecnologia chamada carregamento diferido.

Ao remover esse CSS que bloqueia a renderização, seu site se torna visível para os usuários muito mais rapidamente do que seria se você tivesse que carregar todos os arquivos CSS antes que a página fosse exibida.

Após ativar 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 irá automaticamente limpar o cache do seu site.

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

Ajustes Adicionais de Entrega de Arquivos para Aumentar o Desempenho

O WP Rocket também permite remover strings de consulta de arquivos estáticos, combinar arquivos do Google Fonts e minificar o HTML.

Todos esses ajustes adicionam pequenas melhorias à sua velocidade geral, o que se soma a uma experiência de carregamento mais rápida para seus visitantes.

Você também verá opções para minificar e combinar arquivos CSS. Essas opções reduzirão as requisições HTTP e lhe darão um impulso adicional de velocidade.

No entanto, você precisará verificar cuidadosamente seu site para ter certeza de que nada foi 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 minificar e combinar esses arquivos para servi-los como um único arquivo e adiar o carregamento de arquivos JavaScript para melhorar o desempenho.

Para mais detalhes, veja nosso tutorial passo a passo sobre como configurar o WP Rocket corretamente no WordPress.

Método 2: Remover 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 minuciosamente para garantir que nada esteja quebrado.

Primeiro, você precisa instalar e ativar o plugin Asset Cleanup. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar a página Asset CleanUp » Configurações e mudar para a aba 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 as teste como administrador sem afetar os visitantes do site.

Depois disso, você precisa visitar a página Asset CleanUp » Gerenciador de CSS/JS. A partir daqui, você pode descarregar arquivos CSS e JavaScript indesejados em uma base página a página.

Ele primeiro 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 que não precisa, você pode descarregá-lo para essa página específica, tipo de postagem ou para todo o site.

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

Na tela de edição do post, você encontrará a caixa Asset CleanUp logo abaixo do editor de posts.

O plugin buscará e listará automaticamente todos os arquivos e recursos 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 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 garantir que tudo esteja funcionando corretamente.

Assim que terminar de descarregar e remover os arquivos CSS e JavaScript não utilizados, você pode voltar à página de configurações do plugin e desativar 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 usando o Google Pagespeed Insights para ver a mudança no aviso de CSS não utilizado.

Guias de Especialistas sobre Como Melhorar o Desempenho do WordPress

Esperamos que este artigo tenha ajudado você a aprender como remover facilmente CSS não utilizado no WordPress. Você também pode querer ver outros guias relacionados à melhoria do desempenho do WordPress:

• O Guia Definitivo para Aumentar a Velocidade e o Desempenho do WordPress
• Como Acelerar o Desempenho do WooCommerce
• Como Executar Corretamente um Teste de Velocidade de Site (Melhores Ferramentas)
• Métricas Importantes para Medir em Seu Site WordPress
• Como Otimizar as Core Web Vitals para WordPress (Guia Definitivo)
• Como Usar o Plugin GTmetrix para Melhorar o Desempenho do Site WordPress
• Como Otimizar Facilmente a Entrega de CSS do WordPress
• Hospedagem WordPress Mais Rápida (Testes de Desempenho)
• Como Otimizar Imagens para Desempenho na Web Sem Perder Qualidade
• Melhores Plugins de Cache para WordPress para Acelerar Seu Site

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.