Ao executar um teste de velocidade, você pode ter notado do PageSpeed Insights sobre a remoção de CSS não utilizado. Gostaria de remover o CSS não utilizado do seu site WordPress para que ele carregue mais rápido e obtenha melhores classificações de desempenho?
Existem muitos códigos CSS adicionados por temas e plugins do WordPress que você não precisa. O desempenho do WordPress e a experiência do usuário podem ser melhorados removendo o código CSS não utilizado. Neste artigo, demonstraremos como você pode remover facilmente o CSS não utilizado do seu site WordPress sem causar problemas.
Remova o CSS não utilizado no WordPress usando diferentes métodos
Se você deseja reduzir a quantidade de CSS não utilizado em seu site WordPress, existem alguns métodos diferentes que você pode experimentar.
Embora seja possível remover todo o CSS desnecessário no WordPress, seria uma tarefa bastante difícil. Além disso, devido ao funcionamento interno do WordPress, alguns usuários podem ter dificuldades para encontrar e remover o CSS desnecessário.
Nesse caso, mostraremos diferentes maneiras de remover o CSS não utilizado, e você poderá escolher o método que melhor se adapta às suas necessidades.
Encontre seus maiores arquivos CSS
Para visualizar seus arquivos CSS mais extensos, classifique seu relatório de cobertura por "visualização de uso" nas Ferramentas de Desenvolvedor do Chrome. Os URLs geralmente incluem o nome do plugin, tema ou código de terceiros que gerou o arquivo. Como resultado, será mais fácil determinar o que precisa ser otimizado.
Remova o CSS não utilizado e utilize o CSS utilizado em um arquivo separado
Criar um arquivo separado é mais rápido, pois o tamanho do HTML não aumenta e o arquivo pode ser armazenado em cache, ao contrário do que acontece com o código embutido. Além disso, o CSS do LiteSpeed Cache e o FlyingPress também carregam o conteúdo em um arquivo separado. O WP Rocket otimiza para pontuações em vez de visitantes, diferentemente da maioria dos outros plugins, que usam arquivos diferentes por serem mais rápidos.
Evite plugins que adicionam CSS
Ferramentas como o Query Monitor e o WP Hive são boas, mas nem sempre mostram se um plugin adiciona CSS/JS extra ao front-end. Consequentemente, o impacto total do plugin só pode ser observado após testar novamente o site depois de adicionar conteúdo ao front-end. Os culpados mais comuns são galerias, sliders, formulários de contato, comentários, chat, calendários e plugins de construção de páginas relacionados ao design.
Use um tema leve e um construtor de páginas.
A interface do site está sobrecarregada com CSS, JavaScript e fontes. Consequentemente, um site lento é garantido quando combinado com plugins adicionais de construtores de páginas, como Elementor Pro e Ultimate Addons.
Ativar otimizações de CSS em construtores de páginas
Entre essas configurações estão os experimentos do Elementor e as configurações de desempenho do Divi, que incluem diversas opções para reduzir o tamanho do CSS (por exemplo, carregamento aprimorado de recursos e CSS no Elementor e CSS dinâmico no Divi). Em geral, você obterá melhores resultados se ativar mais opções de desempenho.
Desative os ícones se não os utilizar
Se você não estiver usando ícones do Elementor, desative-os. Para fontes do Google e Font Awesome, você pode fazer isso no Perfmatters ou na documentação do Elementor.
Remover CSS em plugins de descarregamento de recursos
Usando o Perfmatters, você pode desativar CSS/JS (ou plugins inteiros) onde não forem necessários, remover CSS não utilizado e substituir iframes do YouTube por imagens de pré-visualização. O CSS não utilizado restante pode ser tornado mais acessível por todos esses métodos. Arquivos CSS/JS também podem ser desativados com o plugin Asset CleanUp.
Imagens de fundo com carregamento lento encontradas no CSS
A maioria dos plugins de cache não carrega imagens de fundo de forma assíncrona se elas estiverem empacotadas em um arquivo CSS separado.
Portanto, se você deseja carregar imagens de fundo de forma assíncrona (lazy loading), consulte a documentação do seu plugin de cache. O FlyingPress inclui uma classe auxiliar `lazy-bg` que você pode adicionar ao CSS, diferentemente do WP Rocket, que exige HTML inline. Uma classe auxiliar `lazy-bg` pode ser adicionada manualmente, ou o Optimole oferece uma solução usando seletores CSS.
Remover CSS do Gutenberg
Suponha que você possa remover a biblioteca de blocos do Gutenberg da fila se não estiver usando blocos do Gutenberg. Use trechos de código ou o arquivo functions.php para adicionar isso.
Combinar CSS (ou não)
O tamanho do CSS/JS não deve exceder 10 KB se você os combinar. Na maioria dos casos, CSS e JavaScript não devem ser combinados, pois é quase impossível.
Desativar estilos do WooCommerce
Por padrão, o WooCommerce carrega estilos em todo o seu site. Se você usa esses estilos apenas em páginas de e-commerce, pode desativá-los em todos os lugares. O WooCommerce possui documentação, mas recomendamos o Disable WooCommerce Bloat, que oferece muito mais configurações para remover o excesso de estilos.
Encontre mais artigos como este na Seahawk Media.
