Leandro Garcia

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

6 Comentários »

Comentário por NSA GPS MAP — 08/08/2008 @ 2:34 am

Muito bom cara! Valeu pela dica!
Comentário por Denommus — 14/12/2009 @ 6:25 pm

Não estamos mais nos anos 80. Ficar economizando bytes é tosco, a RAM tem capacidade de ter muitos e muitos bytes na memória, a internet consegue carregar kilobytes em segundos, e o HD armazena muito mais do que isso.

O que mais pesa num site não é o CSS ou o HTML, é o Banco de Dados. Com isso, sim, você deve se preocupar com bytes.

Ah, e estude Ajax. É a melhor maneira de evitar lentidão, hoje em dia.
Comentário por Leandro Garcia — 14/12/2009 @ 6:50 pm

Um professor meu da Pós Graduação, sempre siz uma frase que exemplifica bem o que você disse ai: Se estamos trabalhando com projetos “coxinha”, não precisamos pensar na performance da página, mas se estaos falando de algo bem parrudo, com milhões de acessos diários, devemos sim, e muito, nos preocupar em todos os aspectos da performance da aplicação. Inclusive na “tosqueira” de economizar bytes, pois alguns bytes economizados no código, dimnue o tempo de processamento do servidor e, consequentemente economiza dinheiro para a empresa e aumenta a velocidade de navegação dos usuários. Mas, volto a lembrar, só devemos nos preocupar com essas coisas em projetos Grandes. Outra coisa, por mais que você tenha sua banda larga parruda de 1, 2, 4 ou mais megas, quando falamos de Brasil, muita, mais muita gente mesmo ainda acessa via discador.

Concordo quando você diz que a Base de Dados é um item a se preocupar bastante, mas ao contrario do que você pensa, as aplicações mais parrudas usa o minimo possível de base de dados em suas páginas, exatemente por se tratar de um gargalo. E os grandes portais como Globo, Uol, iG e Terra, em suas páginas de chamada, como as homes, não há base de dados, são HTMLs/CSSs/JSs/Imagens puras. Pense nisso!

Em relação ao Ajax, sim eu conheço sim, já estudei bastante a respito, embora não tenha muito o que se estudar. Mas Ai está um outro engano seu, um Ajax nada mais é do que uma requisição HTTP e, quanto mais requisições rolando mais pesado fica a aplicação, mas isso não importa muito em projetos Coxinha, como diz meu Professor.

Você deve pensar mais na Robustez da aplicação.

Fica a dica!
Comentário por Marcelo Diniz — 06/04/2011 @ 11:01 am

Boa dica, ja desenvolvo a um tempo para web e sempre para sistemas internos, agora que estou começando com o desenvolvimento de sites externos, e até por isso cai no seu site, mas uma coisa só, não sei se é viavel usar exatamente 100% das técnicas q citou, mas boa parte delas sim, e vi que vc é um tanto quanto esagerado economizando em um (;) ponto e virgula por exemplo, mas esta certo, tem q mostrar td q da para fazer!

[]‘s
Comentário por leandro garcia — 11/04/2011 @ 6:52 pm

É verdade Marcelo, nem todos os casos é necessário fazer isso. Vai da necessidade da empresa. Em alguns lugares é muito necessário fazer todo tipo de redução de códiga possível. Varia de caso pra caso.

Abs
Comentário por Everton — 24/11/2011 @ 9:23 am

Gostei das dicas, trabalho com performance em sistemas de roteamento (otimização combinatória), e vejo a necessidade de economizar em código, pois uso C ou C++. Algumas vezes programo as paginas de retorno em C (cgi) e tento sempre faze-las o mais rápido possível.
Uso biblioteca para manipulação de imagens, banco de dados para impressão de rota, e estas dicas me ajudam bastante.
Valeu Leandro.