Perfmatters adicionou uma nova funcionalidade, actualmente em Beta, na sua versão 1.8.5 em 19 de Janeiro, para remover o CSS não utilizado. Nunca me cansarei de recomendar este plugin, que se tornou obrigatório se você quiser melhorar o desempenho do seu blog.
Para a 25 dólares curto de um ano, oferece uma ferramenta poderosa à qual eles continuam a acrescentar melhorias.
Já o testei no WordPress 5.8 e 5.9-RC e nada se partiu até agora. Embora eu já tivesse o CSS não utilizado muito sob controlo através do Gestor do guião deste plugin, basta activar esta opção para poupar pelo menos alguns pedidos e alguns Kb.
porquê remover o CSS não utilizado?
Os avisos habituais em PageSpeed de“Remove CSS não utilizado” ou“Reduce unused CSS content” geralmente aparecem quando o CSS carregado por um plugin ou template não é necessário ou não é utilizado numa página em particular
Os programadores normalmente só fazem fila de estilo se esta estiver a ser usada. No entanto, muitas vezes também são acrescentados estilos adicionais que podem não ser necessários. Isto resulta em muito CSS não utilizado, o que atrasa o carregamento
Ocasionalmente, também pode resultar em avisos de“Remover recursos que bloqueiam a renderização“.
Para além do placebo de obter uma melhor pontuação PageSpeed, a remoção do CSS não utilizado tem um grande impacto na diminuição do tempo desde quando a página começa a carregar até que qualquer parte do conteúdo da página seja apresentada no ecrã(FCP), o tempo necessário para que o conteúdo principal de uma página web seja descarregado e esteja totalmente pronto para o utilizador(LCP) e o tempo desde quando a página começa a carregar até estar totalmente interactiva(TTI). De qualquer forma, você sabe, uma parte importante da história da Vitais Centrais da Web.
como encontrar o CSS não utilizado?
A maneira mais fácil de encontrar CSS não utilizado é testar o URL com PageSpeed. Se houver CSS não utilizado, verá o aviso, que só será accionado se estiver acima do limite do que o Google considera suficientemente importante para avisar, por isso se a velocidade de carregamento percebida (a velocidade real que experimenta) for boa, não fique demasiado preso a ela.
A outra forma de encontrar CSS não utilizado é usar as ferramentas cromadas DevTools. Abra o inspector em Cromo (Ctrl+Shift-I), prima Shitft+Control+P, escreva “Coverage” e aí encontrará os bytes não utilizados tanto para o CSS como para o JS. Em vermelho o não usado e em azul/verde o usado.
A partir daqui, e entendendo que reconhece cada CSS, o que ele faz e se o pode remover ou desactivar da página onde está a medir, existem várias opções, tais como substituir certos plugins por outros mais leves, rever ou considerar alterar o modelo, usar o Script Manager para desactivar selectivamente o JS e o CSS, etc.
A maneira mais fácil de eliminar avisos de PageSpeed é activar a função“Remover CSS não utilizado” no Perfmatters, que faz tudo isto automaticamente. Eles afirmam tê-lo testado em centenas de URLs (com diferentes modelos e configurações) e relatam estes resultados:
Redução média de FCP de 15,20%.
A diminuição média de LCP é de 19,66%.
Redução média do TTI de 14,95%.
No entanto, lembre-se que ainda está na fase Beta e os resultados podem não ser os desejados ou podem até quebrar algo, por isso é aconselhável testá-lo num ambiente de teste, mesmo quando sai da fase Beta.
Antes de activar
O histórico da Perfmatters recomenda que, antes de ativar esta opção, você remova qualquer pré-carga CSS existente que tenha sido configurada na Perfmatters (excluindo as folhas de estilo locais do fontes do Google) e NÃO fundir o CSS.
A fusão do CSS é uma técnica de optimização depreciada desde o HTTP/2. Em alguns casos, a fusão do CSS pode até ser prejudicial ao desempenho. Mais uma vez, lembre-se que cada página irá comportar-se de forma diferente dependendo da sua configuração e que é melhor testar e observar até encontrar o melhor resultado sem erros para o seu caso.
Também deve estar ciente de possíveis configurações de outros plugins de desempenho ou de cache que esteja a usar e que podem entrar em conflito ou ser anulados por ter as mesmas funções activadas.
Uma vez activado, você encontrará três opções:
1- Atraso (o padrão e recomendado).
O seu CSS usado torna-se em linha e todas as folhas de estilo CSS (CSS não utilizado) são atrasadas e carregadas com a interacção do utilizador.
2- Async
O seu CSS usado torna-se em linha, e todas as folhas de estilo CSS (CSS não utilizado) são carregadas de forma assíncrona. Este método pode ajudar a evitar pop-in, pois as folhas de estilo são executadas de forma assíncrona enquanto a página é carregada. Este método resultará num LCP/FCP ligeiramente mais elevado do que o comportamento de atraso anterior.
3- Apagar
O seu CSS usado torna-se em linha, e todas as folhas de estilo originais do CSS (CSS não usado) são apagadas. Este é o método mais agressivo, mas também é provável que seja necessário acrescentar excepções. Apenas recomendado para utilizadores avançados
Uma vez activadas, as páginas e as mensagens terão um comportamento diferente.
As páginas tendem a ter muito CSS único, e portanto o CSS usado será gerado e alinhado separadamente por página na primeira visita.
No entanto, como tendem a partilhar muito do CSS, o CSS utilizado será gerado apenas uma vez, na primeira visita, e tornar-se-á em linha. A diferença de entradas em relação às páginas é que a geração de CSS usados só ocorre uma vez.
Todos os CSS usados gerados pela Perfmatters serão armazenados localmente neste caminho:
/wp-content/cache/perfmatters/tudomain.com/css/
Este é o aspecto do CSS gerado pela Perfmatters, para páginas, posts, categorias, tags, pesquisas, a página inicial ou 404s.
Na caixa“Excluir folhas de estilo” pode excluir folhas de estilo específicas da função “Remover CSS não utilizado” adicionando o URL de origem completo(loquesea.css), ou adicionando uma única parte do URL de origem. Formato: um por linha.
Na seguinte caixa“Selectores Excluídos” pode excluir CSS específicos (selectores) da função “Remover CSS não utilizados”, adicionando o elemento id, nome da classe, etc. (#id, .class). Formatação: uma por linha.
É provável que em algum momento você precise de apagar o CSS usado. Por exemplo, depois de redesenhar uma página ou depois de adicionar um novo elemento. Para apagar o CSS gerado e tê-lo recriado após visitas subsequentes, basta clicar na opção na parte inferior de“Clear Used CSS“.
Você pode excluir uma mensagem individual, uma página ou um tipo de mensagem personalizada de usar a função Clear Unused CSS. No editor, do lado direito, desmarque“CSS não utilizado”
Isto irá excluir a página inteira e pode ser útil, por exemplo, para um carrinho, caixa ou página de contacto que pode ter mais problemas do que o resto do site.
Você também pode usar o filtro perfmatters_remove_unused_css para mudar onde o CSS não utilizado é removido no seu site. Este exemplo desactivaria o CSS não utilizado apenas em páginas.
add_filter(‘perfmatters_remove_unused_css’, function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
