Quanto maior a velocidade de acesso à internet, menor a paciência do usuário. E podemos confirmar isso por nós mesmos. Se em dois, três segundos não começa a aparecer na tela o conteúdo, saímos do site ou mudamos de aba.
Não adianta um design fora de série e recursos diversos, se o carregamento for vagaroso. Outro ponto negativo para um website ‘pesado’, é o custo da hospedagem.
A velocidade de carregamento é um aspecto que merece atenção e pode ser melhorada com medidas simples. Vou apresentar aqui algumas melhorias que podem ser feitas nesse sentido. Serão observados apenas aspectos do desenvolvimento front-end, como carregamento dos arquivos e melhorias no HTML, CSS e javascript, sem aprofundamentos na programação.
Separar Apresentação Da Formatação
Regras CSS inline aumentam o tamanho do arquivo e dificultam a manutenção. E são tão abomináveis quando o IE6.
Uma página com o código bem estruturado invariavelmente vai precisar de menos código. E reservando um arquivo para as folhas de estilo, você pode trabalhar o efeito cascata e múltiplos seletores. Mais um arquivo que terá tamanho menor.
Falando sobre CSS, evite utilizar expressões para atribuir valores às propriedades. O arquivo CSS vai rodar javascript! E o que poucos sabem é que a expressão será executada a qualquer ação do usuário, contando aí um simples arrastar do mouse.
Conforme a estrutura vai sendo carregada, o usuário já fica ocupado analisando os elementos que aparecem. E quando ele vê, esta tudo pronto.
A tempo: não utilize @import para incluir arquivo CSS na página, pois no IE, isso causa um atraso na formatação e por alguns segundos a página é mostrada apenas com a estrutura HTML.
Javascript
Se você, igual a mim, gosta de criar animações e muita interação usando javascript, pode acabar com um arquivo de até centenas de linhas. E ainda tem a endentação e linhas em branco para organizar o código…
Para reduzir o tamanho dos arquivos javascript, você pode utilizar o serviço do website JS Minifier [4]. Basicamente, serão retirados os espaços em branco. Para scripts extensos, simplesmente tirando os espaços em branco, é possível reduzir pela metade o tamanho do arquivo.
Vejamos outro aspecto sobre arquivos javascript. Frameworks, como jQuery, somente rodam o script depois que a estrutura da página foi carregada. E isso faz todo o sentido, já que não adiante ter efeitos para aplicar, se os elementos nem foram carregados ainda.
Sendo assim, incluir os arquivos javascript no rodapé da página é uma boa prática. Além do motivo exposto acima, ficando por último, ele não vai atrapalhar o carregamento de outros itens, como imagens.
Imagens
Uma imagem de qualidade e ao mesmo tempo com tamanho de arquivo baixo é uma cruzada para alguns web designers. Já foram feitos diversos artigos comparativos entre os formatos de arquivos. E nem sempre o ‘.gif’ é o menor ou o ‘jpeg’ o maior.
Existem serviços online que comprimem os arquivos sem causar perda da qualidade. Um que utilizo e recomendo é o PunyPNG [5] que apesar do nome, comprime também ‘jpe’ e ‘gif’. E o legal é que mostra quanto por cento menor o arquivo ficou em relação ao original.
Se você cria os layouts no Photoshop, aí vai uma dica que funciona tanto quanto o serviço online. Para salvar a imagem, vá em Arquivo – Save for Web and Devices (Ctrl + Alt + S) e teste com as opções do lado direito da caixa de diálogo. Experimente as extensões e níveis de compressão no caso do JPEG. Onde a imagem é mostrada, na parte inferior mostra o tamanho final do arquivo.
Para a web não precisa criar imagem com mais de 72dpi. Ao salvar escolha 80% de qualidade no Photoshop e já será o suficiente. Se a imagem for miniatura, 70% é o bastante.
Quando as imagens serão planos de fundo, você pode criar um arquivo com diversas e depois utilizar a propriedade CSS background-position para escolher onde elas serão posicionadas. Além do arquivo menor, as requisições ao servidor também serão diminuídas.
Se você fizer o que sugeri, e é altamente recomendado, você estará usando a técnica CSS Sprite. Um serviço online que coloca as imagens em um único arquivo e ainda te mostra como configurar o background-position é o CSS Sprites [6].
Antes de criar um sprite analise as imagens que serão unidas. Crie sprites conforme as páginas. Desta maneira você evita carregar na página inicial uma imagem que somente será usada na página de produtos.
Requisições HTTP
Enquanto a página é carregada, o navegador precisa baixar os elementos para a máquina do usuário. Esse ‘pedido’ de dados do navegador para o servidor é conhecido como requisição. Cada imagem e arquivo, precisa de uma requisição.
O problema é que os navegadores limitam o número de requisições para o domínio. É um número baixo, como duas requisições simultâneas. Até que um dos dois arquivos não for baixado, nada mais é. Uma grande limitação.
Diminuir o número de requisições HTTP feitas ao servidor é um dos principais melhoramentos que devem ser feitos no website. Algumas das técnicas utilizadas para este fim estão:
- Simplificar o design – Nem sempre um design intrincado é melhor. Aplique os conceitos de design simples e eficiente. Isso possibilitará utilizar CSS para criar alguns efeitos.
- CSS Sprite – Além da potencial diminuição no tamanho do arquivo, somar as imagens exige menos requisições ao servidor.
- Somar arquivos – Apesar de a organização ser importante, criar um arquivo para cada função ou grupo de funções tem a desvantagem de exigir mais requisições ao servidor. Tente colocar tudo em um arquivo, comentando as seções você não perde a vantagem da organização.
- Inclua somente arquivos úteis à pagina – Antes de incluir o arquivo na página, analise se ele será utilizado por ela. Não faz sentido importar na página inicial um script que será utilizado somente na página de contato.
- Um truque para aumentar as requisições disponíveis para seu website é criar subdomínios para hospedar alguns arquivos. Por exemplo, imagens.exemplo.com.br para as imagens. Com isso você ganha mais duas requisições.
Tenha cuidado para não criar muitos subdomínios ou seus site será ‘punido’ pelo navegador e não haverá melhora na velocidade.
Expires e Cache-Control
Os navegadores reservam uma pasta para guardar os arquivos baixados e desta forma tornar o carregamento futuro deles mais rápido e sem precisar requisitá-los ao servidor.
Você pode definir o tempo que ele ficará guardado no computador do usuário configurando os cabeçalhos Expires e Cache-Control dos arquivos.
Esta medida somente surtira efeito quando a página for visitada novamente. Então fará mais diferença para websites com retorno de visitantes.
Um cuidado especial ao utilizar o Expires é que, se você definiu a data de expiração para 2020 por exemplo, mas precisou modificar o arquivo, terá que renomeá-lo pois o navegador continuará interpretando o que foi guardado.
Conclusão
Alguns web designers criam páginas pesadas com o argumento de que a velocidade atual da conexão suporta tranquilamente arquivos pesados. Para estes lembro que o visitante pode estar acessando outros websites simultaneamente ou baixando arquivos e com isso a largura de banda não estará toda a disposição de suas criações.
As medidas que apresentei não tem apenas o papel de tornar o carregamento das páginas menor, mas aumentar a eficiência. Acredito que você concorda comigo que são melhoras de fácil implementação e resultado significativo.
