Se o seu site WordPress usa um tema WordPress pago ou um popular do repositório oficial de temas do WordPress, é provável que o tema seja desenvolvido para uma variedade de casos de uso. E você pode estar usando apenas um pequeno conjunto de todos os recursos disponíveis no tema.
Nesse caso, seu site está carregando uma grande quantidade de CSS não utilizado que não é necessário para estilizar as páginas do seu site. Por exemplo, o tema WordPress que você está usando pode ter estilos para páginas WooCommerce também, mas se você estiver executando apenas um blog em seu site WordPress, então você não está usando o CSS incluído para páginas WooCommerce em seu site e, portanto, servindo não utilizado CSS para os usuários.
Se você testou seu site na ferramenta Google Pagespeed, provavelmente já sabe que seu site tem problemas não utilizados de CSS. Neste guia, mostraremos como verificar se há CSS não utilizado primeiro e, em seguida, usar uma ferramenta gratuita para remover CSS não utilizado do seu site WordPress.
Como verificar CSS não utilizado
DevTools do Google Chrome (aquele que você vê quando clica na opção “Inspecionar” no menu de contexto) tem um recurso de cobertura dentro da guia Fontes. Você pode usar a opção Cobertura para encontrar CSS e JS não usados que seu site carrega.
- Abra seu site no Chrome na área de trabalho.
- Clique com o botão direito em um espaço em branco vazio em seu site e selecione Inspecionar no menu de contexto.
- Clique no Fontes guia, pressione Ctrl + Shift + P para abrir uma janela de comando e, em seguida, digite cobertura e selecione Comece a instrumentar a cobertura e recarregue a página a partir dos comandos disponíveis.
- Na guia Cobertura, clique no Filtro de URL campo e insira o domínio raiz do seu site aqui para mostrar apenas arquivos CSS / JS internos.
└ Verifique o Bytes não usados coluna para ver a porcentagem de dados sendo carregados em um arquivo CSS / JS de seu tema.
- Clique em um arquivo CSS para visualizar o CSS não utilizado (marcado com barras vermelhas) carregado pelo seu site. O CSS que está sendo usado na página atual será mostrado com barras verdes.
Depois de analisar todos os CSS não utilizados carregados em seu site, é hora de removê-los. Existem várias ferramentas gratuitas disponíveis para remover CSS não utilizado de páginas da web. Abaixo está uma das ferramentas populares que testei e usei em meus próprios projetos.
Use PurifyCSS online para remover CSS não utilizado
Normalmente, você pode encontrar um plugin para quase tudo no WordPress. Mas para remover CSS não utilizado, infelizmente, não há um único plug-in disponível. Portanto, usaremos ferramentas manuais não específicas para wordpress para remover CSS não utilizado de seu site.
PurifyCSS é o mais ferramenta amigável para não desenvolvedores você pode encontrar para lidar com CSS não utilizado. A ferramenta tem uma interface de usuário simples para permitir que os usuários forneçam o URL do site OU o código HTML e CSS. Para WordPress, usaremos a opção de URL e forneceremos links para todos os tipos de páginas em seu site para permitir que a ferramenta pegue CSS de todos e otimize para CSS não utilizado.
Aqui está uma lista rápida de páginas que você deve colocar na ferramenta:
- URL da Página incial
- Vários URLs de página de postagem de cada categoria em seu site
└ Isso é para garantir que o CSS seja incluído em todos os elementos de postagem.
- Contato, Sobre, Privacidade e todos os tipos de páginas diferentes que você possa ter em seu site.
- Página de arquivo, página de pesquisa, páginas do autor
- Páginas personalizadas de tipo de postagem
Dica quente: Crie uma postagem / página de 'recursos' com todos os elementos do tema que você usa ou pode usar no futuro, como uma Tabela, Galeria de Imagens, Código, Listas Pré-ordenadas, Listas não-ordenadas, Formulários, Guias, Acordeões, Blocos de Gutenberg que você geralmente usa etc.
Use este URL de postagem de "recursos" na ferramenta PurifyCSS Online para garantir que o CSS para os elementos comumente usados seja incluído.
Acerte o Limpar CSS depois de adicionar todos os tipos de URLs relevantes de seu site na ferramenta PurifyCSS Online.
Copie o novo CSS gerado pela ferramenta e use-o em seu site. Assegure-se de que você faça backup do style.css original e outros arquivos CSS em seu tema antes de substituir o novo CSS gerado por PurifyCSS.
Dica: Você pode usar o Editor de temas do WordPress integrado para editar os arquivos CSS do seu tema ou pode usar um programa FTP / SFTP para se conectar ao servidor e editar arquivos confortavelmente usando um editor de bloco de notas.