Uma métrica chave da usabilidade do site é a velocidade, ou mais precisamente, a rapidez com que uma página aparece na janela do navegador do visitante. Existem muitos fatores que afetam a velocidade, incluindo a velocidade do seu servidor web, a conexão do visitante com a Internet e o tamanho do arquivo que o navegador deve baixar. Embora não seja possível controlar a velocidade do servidor e da conexão, você pode controlar o tamanho dos arquivos que compõem as páginas do seu site.
Para tornar os sites mais rápidos, os construtores de sites compactam e otimizam rotineiramente todos os arquivos de imagem em seus sites, muitas vezes sacrificando a qualidade da imagem para reduzir o tamanho do arquivo em alguns pontos percentuais. Como as folhas de estilo CSS são arquivos de texto simples e relativamente pequenas em comparação com as imagens, os construtores de sites raramente consideram tomar medidas para reduzir o tamanho de seus arquivos de folhas de estilo CSS. No entanto, usando abreviações CSS e outros truques simples, você pode reduzir bastante o tamanho da sua folha de estilos. Em um teste ad hoc informal de minhas próprias folhas de estilo, reduzi o tamanho do arquivo em cerca de 25 a 50%.
Use as propriedades de abreviação do CSS:
Propriedades abreviadas CSS são nomes de propriedades especializados usados para substituir vários conjuntos de propriedades relacionadas. Por exemplo, a propriedade padding é a abreviação de padding-top, padding-right, padding-bottom e padding-left.
O uso de propriedades abreviadas permite compactar vários pares de propriedades/atributos em uma única linha de código em uma folha de estilo CSS. Por exemplo, considere o seguinte código:
.amostra1 {
margem superior: 15px;
margem direita: 20px;
margem inferior: 12px;
margem esquerda: 24px;
preenchimento superior: 5px;
preenchimento à direita: 10px;
preenchimento inferior: 4px;
preenchimento à esquerda: 8px;
largura da borda superior: fina;
estilo border-top: sólido;
cor da borda superior: #000000;
}
Substituí-lo por algumas propriedades de abreviatura pode reduzir o código ao seguinte, o efeito real dos dois é exatamente o mesmo:
.amostra1 {
margem: 15px 20px 12px 24px;
preenchimento: 5px 10px 4px 8px;
borda superior: sólido fino #000000;
}
Observe que as propriedades abreviadas também possuem diversas propriedades, cada uma delas correspondendo a uma propriedade regular que é combinada na propriedade abreviada. As propriedades são separadas por espaços em branco.
Quando as propriedades têm valores semelhantes, como para medições lineares de propriedades de margem, a ordem das propriedades que seguem a propriedade abreviada é importante. A ordem dos atributos começa na parte superior (a borda superior está em branco) e continua no sentido horário ao redor da caixa.
Se todas as propriedades de uma propriedade de abreviatura forem iguais, você poderá simplesmente listar a propriedade única e copiá-la quatro vezes na frente. Portanto, as duas propriedades a seguir são iguais:
margem: 5px 5px 5px 5px;
margem: 5px;
Da mesma forma, você pode representar pares de propriedades superior/inferior e direita/esquerda usando duas propriedades após a margem da borda ou propriedades de espaçamento.
margem: 5px 10px 5px 10px;
margem: 5px 10px;
A ordem dos atributos não é importante quando são valores diferentes. Portanto, propriedades como cor da borda, estilo da borda e largura da borda podem seguir a propriedade do contorno em qualquer ordem. Ignorar um atributo equivale a omitir a propriedade geral correspondente das regras de estilo.
Lista de propriedades de abreviatura CSS
Abaixo está uma lista de propriedades abreviadas de CSS e as propriedades gerais que elas representam.
Plano de fundo: anexo de plano de fundo, cor de plano de fundo, imagem de plano de fundo, posição de plano de fundo, repetição de plano de fundo
Borda: cor da borda, estilo da borda, largura da borda
border-bottom (borda inferior): cor da borda inferior, estilo da borda inferior, largura da borda inferior
borda esquerda (borda esquerda): cor da borda esquerda, estilo da borda esquerda, largura da borda esquerda
borda direita (borda direita): cor da borda direita, estilo da borda direita, largura da borda direita
border-top (borda superior): cor da borda superior, estilo da borda superior, largura da borda superior
sugestão (sugestão sonora): pré-sugestão, pós-sugestão
fonte: fonte, tamanho da fonte, estilo da fonte, espessura da fonte, variante da fonte, altura da linha, ajuste do tamanho da fonte, alongamento da fonte
estilo de lista: imagem de estilo de lista, posição de estilo de lista, tipo de estilo de lista
margem (em branco): margem superior, margem direita, margem inferior, margem esquerda
contorno: cor do contorno, estilo do contorno, largura do contorno
preenchimento: lacuna superior, lacuna direita, lacuna inferior, lacuna esquerda
pausa (pausa): pausa depois, pausa antes, reduz o espaço em branco
Outra maneira de reduzir o tamanho de uma folha de estilo CSS é remover a maior parte dos espaços em branco desnecessários do documento. Em outras palavras, coloque cada quebra de regra em uma única linha de código, ou seja, remova as novas linhas e recuos que foram originalmente inseridos no código para separar cada propriedade/atributo em linhas separadas.
Por exemplo, os exemplos de código a seguir são idênticos em conteúdo, mas o segundo é muito mais refinado:
h1 {
tamanho da fonte: x-grande;
peso da fonte: negrito;
cor: #FF0000;
}
h1 {tamanho da fonte: x-grande; peso da fonte: cor em negrito: #FF0000}
Excluir comentários
Remover comentários do seu código CSS é outra maneira de reduzir o tamanho do arquivo. Embora os comentários sejam úteis para a leitura do código, eles não ajudam o navegador a gerar suas páginas da web. Muitos construtores de sites estão acostumados a comentar cada linha de código, ou pelo menos cada instrução de regra. Comentários tão generosos raramente são necessários em folhas de estilo CSS porque a maioria das propriedades e propriedades CSS são fáceis de ler e entender. Se você usar nomes significativos para classes, IDs e outros seletores, poderá eliminar a maioria dos comentários e, ao mesmo tempo, manter seu código legível e de fácil manutenção.
h1 { /* Estilo do título 1*/
tamanho da fonte: x-grande; /* tamanho x-grande */
peso da fonte: negrito; /* Negrito */
cor: #FF0000; /* Vermelho */
}
Usar propriedades abreviadas, remover espaços em branco inúteis e omitir comentários pode reduzir bastante o tamanho do arquivo da folha de estilos CSS. Isto, por sua vez, representará uma contribuição pequena, mas potencialmente notável, para o objetivo geral de acelerar o seu site.