Remover CSS não utilizado no WordPress

 
 

Remover CSS não utilizado no WordPress

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?

Remover CSS não utilizado no WordPress


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.

Remover CSS não utilizado no WordPress

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.

La imagen tiene un atributo ALT vacío; su nombre de archivo es remove-unused-css-perfmatters.jpg

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/

Remover CSS não utilizado no WordPress

Este é o aspecto do CSS gerado pela Perfmatters, para páginas, posts, categorias, tags, pesquisas, a página inicial ou 404s.

Remover CSS não utilizado no WordPress

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.

Remover CSS não utilizado no WordPress

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.

Remover CSS não utilizado no WordPress

É 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“.

Remover CSS não utilizado no WordPress


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;
});

Perfmatters


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados