CSS não utilizado

A Silktide carrega as suas páginas num navegador real e mede quanto de cada folha de estilos é efetivamente utilizado para apresentar a página. As folhas de estilos com uma grande quantidade de estilos não utilizados são reportadas, juntamente com a potencial poupança.

Porque é importante

Os navegadores não conseguem apresentar uma página até terem transferido e processado o seu , pelo que cada regra que não é utilizada continua a atrasar o momento em que o seu conteúdo aparece. O CSS não utilizado acumula-se naturalmente: os temas e as frameworks incluem estilos para todas as funcionalidades, quer as utilize ou não, e os estilos antigos raramente são eliminados quando os designs mudam. O resultado é que os visitantes esperam por estilos que nunca desenham nada.

Como corrigir

Remova os estilos que já não utiliza. As ferramentas de compilação podem fazer isto automaticamente, analisando os seus modelos e mantendo apenas o CSS a que estes fazem referência.
Divida as folhas de estilos grandes para que cada página carregue apenas os estilos de que necessita, em vez de um único pacote que contenha os estilos de todas as páginas.
Para os estilos de que uma página necessita, dê prioridade aos que apresentam o primeiro ecrã e permita que os restantes sejam carregados sem bloquear:

<!-- Carrega sem bloquear a primeira apresentação -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

Tenha cuidado com a remoção automática: os estilos utilizados apenas por , ou apenas noutras páginas que partilham a folha de estilos, podem ser removidos por engano.

Como a Silktide faz esta verificação

Carrega a página num navegador real e regista quais as regras CSS aplicadas enquanto a página é carregada.
Para cada folha de estilos, mede quantos dos seus bytes nunca foram utilizados.
Reporta cada folha de estilos com desperdício significativo, apresentando o seu tamanho atual, a percentagem não utilizada e os bytes que poderia poupar.

Resolução de problemas

O CSS é utilizado, mas não imediatamente

A medição abrange o carregamento inicial da página. Os estilos que só se aplicam mais tarde — ao passar o cursor, em janelas modais ou depois de o JavaScript revelar conteúdo — contam como não utilizados, apesar de a página precisar deles posteriormente. Esta continua a ser uma informação útil: esses estilos não precisam de bloquear a primeira apresentação, pelo que podem ser carregados separadamente.

A folha de estilos é partilhada em todo o site

Uma folha de estilos partilhada está maioritariamente "não utilizada" em qualquer página individual. Esta pode ser uma decisão razoável, uma vez que o ficheiro fica depois da primeira visita à página. Pondere o custo da primeira visita em relação à conveniência antes de a dividir.