2# Boas Práticas para Web Designers | Page Speed

Para aqueles estão cansados dos sites produzidos ficarem pesados e demorarem a carregar, separei boas dicas para amenizar esse problema.

Primeiro de tudo, nem sempre é culpa da conexão!

Código fonte

O código fonte deve ser o mais limpo possível, muitos pensam que 1 ou 2k não fazem diferença, mais quando somados a outras variáveis acaba fazendo diferença.

O que é um “código limpo”?

Bem um código limpo é aquele que evita códigos desnecessários, espaços desnecessários (cada linha de código agrega peso ao arquivo), por exemplo:

HTML – Evite “pular” muitas linhas no código, alguns utilizam esse método para separar seções, utilize o “comentário”.

CSS – Utilize o código em linha, com isso o css é renderizado mais rápido e o arquivo fica mais leve, exemplo:

Errado:
#header{
width:300px;
height:50px;
float:left;}

Correto:
#header{width:300px; height:50px; float:left;}

No HTML procure utilizar os javascripts no final do código e o CSS no inicio, isso faz com que a estrutura do site carregue mais rápido, porem em alguns casos é necessário que o javascript fique na HEADER, como por exemplo o código de acompanhamento do Google Analytics.

Existem alguns sites que fazem esse trabalho para nós, eles fazem compressão do HTML, CSS e Javascript, deixando o código em até 1 linha, tornando o arquivo muito mais leve.

Porém não é o ideal trabalhar encima de códigos em “1 linha”, sugiro apenas compactar os códigos que forem para o site e deixar um Back Up com os arquivos que irá trabalhar.
Abaixo segue alguns sites que fazem essa compressão.

HTML/CSS – textfixer.com
CSS – cssminifier.com
Javascript – javascriptcompressor.com

Imagens

Boa parte da lentidão dos sites é devido as imagens, em alguns casos elas até podem ser evitadas, mas quando não for possível certifique-se que elas estejam totalmente otimizadas para WEB.

Dicas:
PNG – Algumas imagens em PNG 32 ou 24 podem ser substituídas pelo PNG 8 que é muito mais leve.
Jpeg – Salve sempre para web com 72dpis.
Gif – Pode ser utilizados em pequenos ícones onde a baixa qualidade não vai fazer diferença.

Além dessas práticas existem alguns sites que fazem compressão de imagens, segue alguns que utilizo e recomendo!
www.smushit.com
www.jpegmini.com

Botões e Efeitos

Substitua imagens por css, como por exemplo, em um botão de cor chapada pode-se utilizar css ao invés de uma imagem como background, muitos efeitos já podem ser feitos com CSS3 como gradientes e sombras, porem não funcionam em todos os navegadores.

Medidores de velocidade

Existem plugins que podem te ajudar a analisar seu site e verificar onde ele pode ser otimizado:

Page Speed.

Ping Dom

Fico por aqui, espero que tenham gostado.
Até a próxima!

Comentar

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*