A importância da redução do peso das páginas
Navegantes,
faz dois meses que mudei de emprego (puxa, sorte sua. Teho mais o que fazer…).
Antes me preocupava apenas em não deixar as imagens ou animações em flash muito pesadas, mas não pensando em trfego, mas no usuário que ia acessar.
Logo que entrei aqui, no **, percebi quão necessário é a otimização dos códigos HTML, CSS, JavaScript e das imagens. Pensava, um kb a mais não fará diferença, mas se a página que você desenvolveu tiver uma regularidade de acessos muito grande, algo como 5 milhões mês, esse 1 kb, se torna mais de 4 gigas de trafego, isso é muito por tão pouco, não acham?
“Garcia, as páginas que costruo nunca passam de 1000 visitas mês, por que preciso me preocupar?”
É simples, trafego custa dinheiro. Em um servidor barato mais 100 mbs de trafego você pagará cerca de R$ 10,00 mês. Ou seja, você estará perdendo cerca de R$ 120,00 mês, simplesmente por que não quer melhorar seus códigos ou diminuir um pouco a resolução da uma imagem. Sem contar que você ajuda aquele que navega, pois carrega mais rápido, conseqüentemente ele acaba voltando. Você ajuda na indexação do seu site no Google, pois um código menor e melhor é melhor visto pelo robo deles. E, por incrível que pareça, você ajuda a natureza. (Como assim? Não vou plantar árvores nem nada) Simples, quanto menos a quantidade de Kbs de uma página mais rápido ela se torna para carregar o que economiza energia de quem está acessando e do servidor, pois trabalha menos.
“Legal, acho que vou tentar, mas como? O que eu posso fazer para diminuir o peso das minhas páginas?”
São Algumas coisas simples que com o tempo se tornam rotineiras pra você.
Vou citar algumas ações dividindo-as por IMG, CSS e HTML.
IMG.
No caso de Imagem, o que você pode fazer é diminuir o tamanho e a qualidade.
Ex. Você tem uma imagem com 500×500, mas vai exibir em 400×400, por que não diminuir o tamanho desta imagem, afinal você não utilizará ela toda.
Já a qualidade da imagem você pode diminuir utilizando um software de edição de imagens como o Photoshop. No caso do Photoshop, você precisa clicar em arquivo e exportar para Web. Selecionar jpg e diminuir a qualidade. Por padrão vem em 100%, mas cerca de 40% é o suficiênte para não perder muita qualidade.
CSS.
Veja este código.
a#link{
color:#000000;
font-size:15px;
font-family:Arial;
font-weight:bold;
margin-top:10px;
margin-left:5px;
margin-bottom:10px;
margin-right:5px;
}
(160 bytes)
tudo em uma linha. Eu costumava pra facilitar a visualização, programar cada propriedade em uma linha diferente. O Simples fato de passar a programar em uma linha diminui o peso do código em cerca de um kb.
Ex. em uma linha:
a#link{color:#000000; font-size:15px; font-family:Arial; font-weight:bold; margin-top:10px; margin-left:5px; margin-bottom:10px; margin-right:5px; }
(148 bytes}
Evitar espaços. Cada espaço consome 1byte, se você tiver em seu código 1024 espaços você terá 1kb em espaços.
Ex. sem espaço.
a#link{color:#000000;font-size:15px;font-family:Arial;font-weight:bold; margin-top:10px;margin-left:5px;margin-bottom:10px;margin-right:5px;}
(140 bytes)
Tirando o ; da última propriedade.
a#link{color:#000000;font-size:15px;font-family:Arial;font-weight:bold;
margin-top:10px;margin-left:5px;margin-bottom:10px;margin-right:5px}
(139 bytes)
Uma única propriedade para vários atributos, quando possível.
a#link{color:#000000;font:bold 15px Arial;margin:10px 5px}
(58 bytes)
Diminuindo para 3 a quantidade de caracteres de uma cor quando tiver os 6 caraceres iguais.
ex.
a#link{color:#000;font:bold 15px Arial;margin:10px 5px}
(55 bytes)
Setando direto a tag quando for sempre igual.
ex.
a{color:#000;font:bold 15px Arial;margin:10px 5px}
(50 bytes)
Viram, apenas com isso reduzi de 160 para 50 bytes esse código, agora imagine em um código de 500 linhas…
HTML.
Não consigo pensar um exemplo assim de cara, mas o simples fato de você setar a tag com as propriedades css fará com que você diminua a quantidades de declaração de classes e de ids.
Concluindo…
Não é dificil. É apenas uma prática, uma prática que se tornará usual a você. Você terá um site mais rápido, um site melhor indexado, um site com possibilidades de mais visitas e de quebra você ainda ajuda a salvar o planeja.
Tem também a identação que pode e deve ser usada no CSS e no HTML, isso eu explico depois.
Abraços
Enviado por: leandro garcia - Categoria(s): CSS, Praticas Tags relacionadas: CSS, HTML, Identação, Peso da Página, Praticas