Recentemente estava refatorando o CSS da firma usando uma ferramenta (bem interessante) chamada scss-lint, que tem uma opção chamada PropertySortOrder que, por padrão, pede para você ordenar as propriedades do CSS em ordem alfabética, mas também pode ser determinada por alguma outra ordem, como você pode conferir no link acima.

Bom, o scss-lint me lembrou dessa história de ter menos bytes em um arquivo que tem as propriedades ordenadas em ordem alfabética e fiz o seguinte teste: um arquivo CSS com propriedades ordenadas em ordem aleatória, e minificado tem 11958 bytes com gzip (calculado usando isto), fica com 3214 bytes.

O mesmo arquivo com as propriedades em ordem alfabética e minificado tem 11944 bytes, e o tamanho dele com gzip é de 3173 bytes, ou seja, um mesmo arquivo CSS, mas em ordem alfabética, dispensou 44 bytes no valor do gzip – o que em um site como UOL que tem mais de 1 bilhão de pageviews por mês poderia economizar 44GB de transferência, nada mal né?

Como ordenar as propriedades do CSS em ordem alfabética automaticamente?

Bom, quase ninguém se importa com 44 bytes, é aquela história, “de bytes em bytes sua página carrega mais rápido”, mas se você é uma pessoa louca (ou não) que quer dispensar o máximo de bytes possíveis, o ideal é que isso não seja um trabalho humano, ninguém merece ficar lá escrevendo CSS em ordem alfabética (descobri que vários amigos fazem isso manualmente), se você usa o GruntJS, você pode usar o grunt-csscomb que faz exatamente esse trabalho pra você automaticamente.

Se você não usa o GruntJS, tem um plugin CSSComb para Sublime Text; basta selecionar o CSS e adicionar o CSSComb que tudo fica em ordem alfabética.

Caso você queira ficar escrevendo seu CSS em ordem alfabética, você pode usar o próprio scss-lint para te dar as dicas – a ferramenta fala qual é a ordem correta, (quanto menos esforço melhor né) 🙂 Uma ferramenta como o scss-lint é bacana para todo o time de desenvolvedores produzir um código igual.

Por que isso acontece?

GZIP é uma mesclagem do algoritmo Huffman com o algoritmo LZ77.

Um dos primeiros passos do algorítimo Huffman, é criar uma tabela de ocorrências dos elementos em ordem alfabética e dar um peso a esses elementos baseado em sua frequência provável. Dado o peso segundo sua ocorrência, é criado uma árvore binária completa, chamada de árvore de Huffman.

Se o conteúdo a ser compactado for pequeno demais, então o algorítimo Huffman faz a análise em todo o conteúdo. Mas se for muito grande, ele precisa fazer uma análise probabilística. Essa análise pode causar a perda de precisão. Quando você “ordena” em ordem alfabética, você ajuda a parte Huffman do algorítimo a ser mais preciso.

Por João Batista Neto no Facebook

É isso, galere, comente o que você acha dessa técnica e o que você faz para dispensar bytes em suas páginas 🙂