Em 2011 o Buscador Google fez um avanço que mudou a vida de muitos webmasters e desenvolvedores, adaptou seus algoritmos para determinar que o tempo de carregamento dos sites se tornar-se um critério realmente importante para o posicionamento e rankeamento dos mesmos. A otimização de performance em um site envolve diversos fatores e tecnologias, como programação, servidores, codificação, número de imagens, requisições http, dentre outras.

Compressão de CSS

O que é?

Ao codificar um arquivo CSS, inserimos naturalmente uma quantia enorme de “espaços” e quebra de linhas. Entretanto, como todo arquivo de texto, cada caractere adiciona um byte ao tamanho final do arquivo, espaços em branco e quebra de linhas nada mais são que caracteres. “Ah fala sério, se eu reduzir bytes do meu CSS vai mudar tanto assim?” Absolutamente sim.

Trabalhando da forma ideal

Aprendendo, abrindo códigos fonte ou fazendo cursos, somos influenciados a usar espaçamentos desnecessários, que na verdade só atrasam o tempo de trabalho. Veja a forma mais comum utilizada:

CSS Tradicional

O ideal é ter o costume de já trabalhar de forma comprimida, não utilizando mais a quebra de linhas entre as propriedades. Dessa forma:

CSS Comprimido

A primeira impressão que temos é que a legibilidade para trabalhar fica muito ruim e atrasa. Como alguém que já fez tal migração de metodologia, posso afirmar com certeza que a forma compacta é melhor, principalmente tratando de sites de médio a grande porte, onde a quantidade de linhas cresce absurdamente. Mais linhas, maior a barra de rolagem, é uma verdadeira dificuldade editar tais arquivos.

Dicas

Padronize os nomes de classes e ids que você utiliza, além de facilitar na leitura você poderá recorrer ao atalho ctrl+F (cmd+f) para buscar a classe específica e não perder tempo com a barra de rolagem.

Compressão

Apesar de ter acabado de citar a palavra “comprimido”, essa ainda não é a compressão final, ela deve ser feito manualmente ou com ajuda de algum aplicativo, eliminando qualquer espaço e quebra de linha para reduzir seu código (esse sim fica impossível de se trabalhar quando quiser fazer alterações).

Compressão CSS

Confira sites para otimizar e comprimir arquivos CSS, mas lembre-se de sempre ter um backup do arquivo original, para eventuais atualizações.

• CSS Optimizer
• CSS Drive – CSS Compressor
• Icey CSS Compressor
• CSS Compressor
• Clean CSS
• Arantius CSS Compressor
• CSSTidy
• Online Css Compressor

Outra otimização muito importante a ser feita através de CSS são sprites, veja em: Tutorial Como usar CSS Sprites

Desenvolvedores web que já tenham um tempo de estudo certamente já ouviram falar da técnica CSS Sprite. Se você nunca ouviu falar, vai aprender através deste tutorial. Apesar de vários blogs já terem publicado artigos e tutoriais sobre o assunto, quero abordar alguns detalhes pouco explorados. Vamos nessa!

Para que serve CSS Sprite?

A técnica CSS Sprites tem como objetivo melhorar consideravelmente a performance de um site, unindo todas as imagens de plano de fundo em um único arquivo. Existem diversos fatores que prejudicam a performance de um site, o mal uso das imagens é um dos principais.

1. Para cada arquivo, existem dados minúsculos que definem a data de criação, etc. Pode ser ínfimo para um ou dois arquivos de imagem, mas quando trabalhamos com muitas, acima de 30 por exemplo, a necessidade de eliminar esses dados é maior.
2. Cada arquivo que seu site precisa carregar vai gerar uma requisição http, que nada mais é que solicitar baixar o arquivo de um servidor. Imagine que você tem 20 imagens compondo seu layout (sem contar com imagens dentro de um post), serão 20 requisições http. Através do CSS Sprite você reduzirá 20 requisições http para 1 requisição.
3. Quando fazemos efeito hover, se usarmos 2 arquivos de imagem diferente, após passar o mouse no elemento tudo ficará vazio, pois só então o arquivo foi requisitado e apenas aparecerá quando seu navegador terminar de baixá-lo.

Antes de mais nada, será preciso trabalhar com dois programas, um programa de edição de imagens e outro programa para edição de arquivos CSS.

Preparando a imagem

Utilizarei o programa Photoshop (não é regra). Utilize o programa de edição de imagens de sua preferência. Farei um exemplo com ícones, o exemplo mais comum e fácil de explicar. Primeiro passo, entre em um site de icones e escolha alguns para fazermos o teste (quem manjar bem de design, pode criar os seus também, claro).

Escolhi icones de redes sociais:

Ícones escolhidos das redes sociais

Bem, vamos trabalhar com uma imagem em sua forma “natural” e também um efeito “hover” da mesma. Sugiro que os ícones tenham uma singularidade em seus tamanhos (altura e largura) para que o CSS Sprite fique mais prático e preciso. Faça uma soma da altura de cada imagem e crie um novo arquivo com o resultado desta soma. Como assim? Só a altura? Sim.

Previna-se de dores de cabeça, existem diversas formas de aplicar CSS Sprite, tanto usando os eixos horizontal e vertical, ou apenas um deles. Vamos praticar apenas no eixo vertical.

Escolhi 4 ícones de largura 32px e altura 32px, o que dá um total de 128px de altura, entretanto faremos o efeito hover (quando passar o mouse), duplicamos por 2 e chegamos a um arquivo com 256px de altura. Sendo assim vamos criar um novo arquivo de imagem com 32px de largura e 256px de altura.

Nova Imagem Criada

Cole as imagens uma abaixo da outra, preservando a altura de cada ícone (neste caso, 32px) e duplicando os ícones. Isso facilitará sua vida quando começar a escrever o CSS, quando chegar lá saberá o motivo.

Você pode recorrer ao uso de guias para não se perder:

Utilizando Guias

Com todas as imagens juntas, crie o efeito hover que achar melhor.

Ícones com estado Hover

Salve sua imagem no formato desejado.
Observação: em breve farei um tutorial para otimização de imagens.

Escrevendo o HTML

Faremos o HTML normalmente, também utilizarei listas não-ordenadas, não apenas para facilitar os estudos mas porque é muito recomendável para menus e áreas de navegação. Crie uma lista não ordenada:

<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Youtube</a></li>
</ul>

Crie classes para posterior edição do seu CSS, com a nomenclatura de sua preferencia.

<ul class="sprite">
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="flickr">Flickr</a></li>
<li><a href="#" class="youtube">Youtube</a></li>
</ul>

Utilize nomenclaturas genéricas, para que possa reaproveitar o código em outros sites que venha a fazer.

Escrevendo o CSS

Já escolhi várias imagens, inseri em um único arquivo, uma em cima da outra… como assim, faz o que com isso!? O CSS Sprite consiste em utilizar o atributo css background-position para determinar a partir de qual pixel a imagem será exibida. Primeiro, o código completo:

.sprite {
margin:0;
padding:0;
overflow:hidden;
}
.sprite li {
float:left;
margin-right:10px;
list-style:none;
}
.sprite li a {
background-image:url(img-sprite.png);
background-repeat:no-repeat;
display:block;
width:32px;
height:32px;
text-indent:-9999px;
}
.sprite li a.twitter {background-position:0 0;}
.sprite li a:hover.twitter {background-position:0 -32px;}
.sprite li a.facebook {background-position:0 -64px;}
.sprite li a:hover.facebook {background-position:0 -96px;}
.sprite li a.flickr {background-position:0 -128px;}
.sprite li a:hover.flickr {background-position:0 -160px;}
.sprite li a.youtube {background-position:0 -192px;}
.sprite li a:hover.youtube {background-position:0 -224px;}

Explicação:

.sprite – Class da tag UL, retirei apenas a margem e espaçamento
.sprite li – Flutuando a esquerda para que os ícones fiquem um ao lado do outro
.sprite li a – Define a altura, largura e o arquivo único de imagem que será utilizado como plano de fundo
.sprite li a.twitter – Aqui eu defino a posição da imagem em cada link do item da lista (<li><a>), específico a class criada.

Lembra quando disse que trabalhar com imagens padronizadas em altura e largura facilitaria tudo? Observe que escrevi o CSS seguindo a mesma ordem do html e da composição da imagem para o sprite. Se todas as imagens possuem a mesma altura, basta eu subtrair o valor da altura para obter a posição do próximo item da lista: 0, -32px, -64px, -96px, -128px, etc.

Bem pessoal, agora é só testar no seu navegador. Se quiser ver o código pronto, baixe o exemplo zipado. Se já observaram, o novo layout deste blog utiliza diversos sprites, o ideal é usar apenas um, mas como o blog passa por mudanças constantes, separei de acordo com a minha necessidade. Para visualizar os sprites deste site basta clicar com o botão direito e selecionar Exibir imagem de fundo (no Firefox).

Se você é web designer, provavelmente já se deparou com um pequeno obstáculo: “como utilizar fontes personalizadas no meu layout, se é necessário que o usuário tenha instalado a fonte em seu computador para visualizá-la?”. Provavelmente 70% dos usuários que fazem esta pergunta acabam aderindo a utilizar imagens para substituir o texto com uma fonte que não é padrão em um computador.

Entretanto esse já não é mais um problema para os desenvolvedores, com a grande necessidade de aplicar novas fontes na web, já foram desenvolvidas várias técnicas para personalizar as fontes, através de flash, script ou css. Este tutorial irá lhe ensinar a incorporar uma fonte através de CSS, a partir da regra chamada @font-face.

A regra @font-face permite que você envie qualquer fonte para o servidor, onde deverá indicar onde ela se encontra. É um processo similar ao de inserir uma imagem de plano de fundo. Sem mais delongas, vamos ao que interessa, veja a seguir como aplicar a @font-face.

@font-face {
font-family: nome-da-fonte;
src: url(diretorio/nome-da-fonte.ttf);
}

Observe que foi utilizado a propriedade comum de fontes (font-family) e foi adicionada a propriedade “src”, na qual é indicada a localização da fonte. Deu para perceber que é o mesmo de uma imagem de plano de fundo? Confira:

div {
background-image: url(imagens/plano-de-fundo.jpg);
}

@font-face {
font-family: Sears Tower;
src: url(fontes/Sears Tower.tiff);
}

Você irá utilizar o nome original da fonte tanto na propriedade “src” quanto na propriedade “font-family”. Agora sua fonte já foi incorporada, mas ela ainda não vai ser exibida, afinal você não disse quais tags ou áreas do seu layout devem utilizar essa fonte. Suponhamos que queremos utilizar a nova fonte para todas as tags de título:

h1, h2, h3, h4, h5, h6 {
font-family: Sears Tower, Arial, Verdana, Helvetica, Sans-Serif;
}

Estaria tudo pronto, se não fosse pelo lindo, maravilhoso, espetacular, inigualável… INTERNET EXPLORER. É meus amigos, o vilão não deixa os desenvolvedores em paz. O Internet Explorer suporta apenas as fontes no formato EOT. A solução é simples, converta a fonte para o formato EOT através do site Online Font Converter. Após converter, conclua o CSS inserindo os novos valores:

@font-face {
font-family: ‘Sears Tower’;
src: url('Sears Tower.eot');
src: local('Sears Tower.ttf'), url(‘Sears Tower.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6 {
font-family: Sears Tower, Arial, Verdana, Helvetica, Sans-Serif;
}

Lembrando que fiz o exemplo como se estivesse inserindo a fonte chamada Sears Tower, mas você deve utilizar o nome da fonte que está querendo incorporar.

É isso, agora não há mais preocupação em conseguir personalizar uma fonte no seu site, preocupado em todos os navegadores conseguirem interpretar. Mesmo assim, tenha calma, assim como qualquer arquivo incorporado, ele tem o seu tamanho próprio. Sendo assim, inserir fontes abusivamente pode causar perda de performance, pois a cada novo arquivo, maior o tempo de carregamento dos mesmos.

As folhas de estilo são fundamentais para controlar a aparência de nossas páginas HTML. Hoje iremos aprender sobre a propriedade Background, responsável pela formatação dos planos de fundo das páginas e elementos.

O background possui as seguintes propriedades:

• background-color: Cor do plano de fundo;
• background-image: Imagem de plano de fundo;
• background-repeat: Define se a imagem deverá se repetir ou não;
• background-attachment: Define se a imagem irá ficar fixa ou rolar junto com a página;
• background-position: define a posição da imagem de plano de fundo (esta propriedade é fundamental para o uso de CSS Sprite);

background-color

Os valores para a propriedade background-color são:
Hexadecimal: #FFFFFF
Código RGB: rgb(250,250,250)
Nome da cor (em inglês): red, blue, green
Transparente: transparent

Tanto o valor hexadecimal quanto o código RGB podem ser colhidos dentro de um programa gráfico, como o photoshop.

background-image

A sintaxe para inserir uma imagem como plano de fundo é: url(pastadaimagem/imagem.gif). Lembre de observar bem o nome da pasta na qual inseriu sua imagem, um único caractere digitado errado e seu plano de fundo não será exibido.

background-repeat

Esta propriedade é utilizada apenas se você fizer uso de uma imagem como plano de fundo. As possibilidades são:

não repetir: no-repeat;
repetir em todos os eixos (horizontal e vertical): repeat;
repeater horizontalmente: repeat-x;
repeater verticalmente: repeat-y;

background-attachment

Para fixar a imagem na tela (efeito marca d’água): fixed;
Para rolar a imagem junto com a página: scroll;

background-position

Esta propriedade é crucial para trabalhar com CSS Sprite (técnica utilizada para otimização de performance dos sites, juntando vários planos de fundo em um arquivo único.

É importante que compreenda que esta propriedade recebe 2 valores, sendo eles referentes aos eixos x e y, respectivamente.

por porcentagem: 50% 50%;
por pixel: 30px 20px; (isso quer dizer que a imagem ficará a 30 pixels de distância do início do eixo x e 20 pixels de distância do eixo y. Estes valores também podem ser negativos (Ex: 10px -45px;). Explicações mais detalhadas em breve.

Para definir alinhamento ao topo, direita, baixo, esquerda e centro basta que utilize sua especificações em inglês (top, right, bottom, left, center). Veja os exemplos abaixo:

background-position: top left; /* alinha a imagem de plano de fundo no topo e na esquerda) */
background-position: bottom right; /* alinha a direita e para baixo */
background-position: center center; /* alinha todo o plano de fundo ao centro */

Otimizando o código CSS

Assim como diversas propriedades das folhas de estilo, é possível resumir todas as informações aqui estudadas em uma única propriedade. Veja o exemplo abaixo:

background: #00FF00 url("images/nome-da-imagem.gif") no-repeat fixed 200px 70px;

Atenção: existem valores que se não forem inseridos o plano de fundo continuará funcionando e os mesmos receberão valores ocultos padrões. É o caso do background-attachment (padrão scroll), background-position (padrão 0 0) e background-repeat (padrão repeat).

Para quem ainda não conhece propriedades css básicas pode aproveitar a grande ferramenta oferecida pelo site CSS Type Set. A operação é muito simples, existem dois campos (lado esquerdo e direito), no esquerdo pode digitar um texto qualquer, na parte superior poderá controlar os estilos deste texto atribuindo cores, tamanhos, etc. A medida que formatar o texto no campo esquerdo automaticamente será exibido o código css no campo direito que faz a formatação do texto.

CSS Type Set

Sendo assim basta copiar o código gerado e colar em sua folha de estilos. É bom enfatizar que é uma ferramenta excelente para quem está iniciando, mas lembre-se de que é fundamental que aprenda todas estas propriedades e valores, pois as mesmas estarão com você sempre que precisar desenvolver algo novo, além de que quanto mais souber melhor ficará e mais habilidoso também.