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

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...

Veja Mais