Minificação de CSS

O Silktide verifica se as folhas de estilos que a sua página descarrega foram minificadas — reescritas para remover os espaços, comentários e repetições que só importam para quem lê o código. As folhas de estilos não minificadas são maiores do que precisam de ser, o que faz com que a página demore mais a aparecer.

A não altera o aspeto da página. Por exemplo:

/* Antes da minificação: legível, mas pesado */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* Depois: resultado idêntico, uma fração do tamanho */
h1,h2{background-color:#000}

Porque é importante

As folhas de estilos normalmente bloqueiam a renderização: o navegador descarrega o da página antes de mostrar qualquer coisa, por isso cada byte desnecessário numa folha de estilos prolonga diretamente o tempo em branco antes de a página aparecer. A minificação reduz habitualmente bastante o tamanho das folhas de estilos, e a poupança repete-se para cada visitante, em cada visualização de uma página que não esteja em cache.

Como a minificação é automática e não altera o comportamento, as folhas de estilos de produção não minificadas são quase sempre uma falha: uma etapa de compilação ignorada ou ficheiros de desenvolvimento publicados por engano.

Como corrigir

Ative a minificação de CSS no processo de compilação do site. Todas as ferramentas modernas de compilação incluem um minificador, normalmente ativado por predefinição nas compilações de produção.
Se o site não tiver um processo de compilação, verifique o : a maioria tem uma definição ou um plugin que minifica automaticamente as folhas de estilos.
Como último recurso, passe os ficheiros por um minificador autónomo antes de os carregar. Mantenha os originais legíveis — é nesses ficheiros que faz as edições e publique o resultado minificado.
Se uma folha de estilos sinalizada pertencer a terceiros, verifique se disponibilizam uma versão minificada, como acontece com a maioria.

Como o Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e o local de teste configurados para os seus testes de velocidade.
Analisa cada folha de estilos que a página descarrega e estima quanto mais pequena ficaria se fosse minificada.
Comunica cada ficheiro com uma poupança potencial significativa e classifica a página pelo total: cerca de 50 KB de poupança potencial resultam numa classificação inferior, e 250 KB ou mais são classificados como fracos.

Resolução de problemas

O ficheiro já parece minificado

Os minificadores variam no grau de compressão, por isso uma folha de estilos ligeiramente compactada ainda pode conter poupanças significativas. A verificação comunica quanto mais pequeno o ficheiro poderia ser; executá-lo através de um minificador atualizado normalmente aproveita essa diferença.

Precisamos de estilos legíveis para depuração

Mantenha os ficheiros de origem legíveis no seu projeto e faça a depuração com mapas de origem, que permitem às ferramentas de desenvolvimento do navegador mostrar os estilos originais enquanto os visitantes recebem a versão minificada. Nunca precisa de servir código legível para obter uma depuração legível.