Uma auditoria CSS examina o volume de estilos, seu uso e a especificidade dos seletores. “Não utilizado” significa que uma regra não foi usada no estado da página que foi testado. Ela pode continuar sendo necessária ao abrir um menu ou mudar a largura da janela.
Defina as páginas e as interações
Escolha páginas com diferentes elementos de interface, como um cabeçalho compartilhado, uma lista de produtos ou um formulário. Inclua a abertura de menus, os erros de validação e a troca de abas. Use as mesmas larguras de janela e interações antes e depois da alteração.
Analise uma página pública com o CSS Scanner do Milten. Registre a folha de estilos e os problemas encontrados. Inclua nos testes manuais os estados que a análise não cobre.
Não remova CSS apenas com base na porcentagem não utilizada
Considere um exemplo ilustrativo: um menu está fechado quando a página carrega. Seus estilos podem não ser usados inicialmente, mas ser necessários quando ele é aberto. Teste a interação antes de considerar uma regra desnecessária.
A documentação do Coverage do Chrome DevTools explica como registrar o uso de CSS e JavaScript durante as interações. Uma regra não utilizada em uma gravação não é necessariamente dispensável em todo o site.
Para cada regra que pretende remover, identifique o arquivo-fonte ou a etapa de compilação que a gera. Altere o código-fonte, compile novamente e verifique o resultado, em vez de editar diretamente um arquivo minificado.
Verifique duplicatas e especificidade
Declarações repetidas podem se aplicar em condições diferentes. Verifique as consultas de mídia, os estados dos elementos e a ordem da cascata. Depois de combinar regras, confirme que os mesmos elementos continuam recebendo os estilos esperados.
Outro exemplo é adicionar !important repetidamente para mudar a cor de um botão. Examine primeiro as regras em conflito e sua especificidade. O guia de especificidade do MDN ajuda a expressar as prioridades desejadas no código-fonte.
Verifique a aparência e as interações após a publicação
Analise a URL novamente após a alteração. Além do tamanho do arquivo, teste os botões, formulários e menus. Verifique as quebras de linha e os indicadores de foco em dispositivos móveis e telas maiores.
Use Design Tokens para examinar valores compartilhados de cores e espaçamento. Se o problema de exibição envolver a marcação, consulte o guia de verificação de HTML.
Remover CSS não utilizado sempre torna a página mais rápida?
A ordem de carregamento, a transferência de recursos e o JavaScript também afetam a velocidade. Compare os resultados do Speed Scanner nas mesmas condições.
A análise automática é suficiente?
Também é necessário testar as interações relevantes e diferentes larguras de janela. Registre separadamente o alcance da análise automática e os estados verificados manualmente.
Analise o CSS de uma página pública. Salve as condições iniciais e os problemas encontrados antes de fazer alterações.
