The Hello Bar is a simple web toolbar that engages users and communicates a call to action.

05

Apr

Diminuindo o Consumo de Banda


Hoje darei algumas pequenas dicas para diminuir o consumo de banda, são dicas rapidas e práticas e não pretendo me enrolar muito no assunto :)

 

Abordaremos Sprites, Minimizando Javascript e CSS, a escolha correta do seu Document Type, vamos lá?

 

Sprites

Esta técnica consiste em reunir varias pequenas imagens, como action buttons e outros pequenos detalhes, em uma única imagem, e depois por meio de CSS recorta-la utilizando background-position, fazendo isso diminuiria os HTTP Requests e com isso o consumo de banda.

Só não saia por ai fazendo Sprites de tudo quanto é imagem do seu site, porque senão elas ficam pesadas e mesmo com a diminuição do HTTP Request, você aumentará o consumo de banda e de nada adiantou ;)

Minimizando Javascript e CSS

Minimizar ou Minificar scripts e styles nem sempre é uma técnica bem vinda, pro dificultar manutenção e etc. Eu particularmente não a utilizo, porém sei que é necessária para alguns sites grandes onde cada kb é precioso.

Pense que você fez todo seus styles e scripts e no final tudo deu pro volta de 20kb certo? agora imagine bilhões de usuarios acessando esta página e faça as contas ;) no final do dia o consumo de banda do site foi pro espaço.

Agora Minimizando o Minificando né seus scripts e styles, de 20kb eles caem pra 1~7kb :) diminuiu bem não é?

Booom, e pra facilitar o seu trabalho na hora de minificar, existem alguns sites muito bons que fazem o serviço, e de graça ;) . Meu preferido é o http://www.reneschmidt.de/tools/index.php/minify/. Simples funcional, claro que contém alguns erros, principalmente para minificar javascript, mais idaí, é free.

Escolhendo o Document Type correto

Document Type, não é tão ligado assim a velocidade do site tão menos ao consumo de banda. Porém , dizer ao browser o doctype certo avisa-o como proceder com certas coisas, e ele pode tirar o maximo potencial disso.

Alguns tipos:

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

E HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitiona//EN” “http://www.w3.org/TR/html41/loose.dtd”>

E por incrivel que pareça no HTML 5 ficaria assim:

<!DOCTYPE html>

É isso :) espero ter sido útil novamente, qualquer dúvida já sabem né ;) tem os comentários ai e a página de contato ali em cima



Sobre Pedro Costa Neves

Webdesigner, Wordpress Ninja, fundador do http://persocon.org e do http://geek-candy.com. Sócio, Co-fundador, Diretor de Arte, Web Developer em !Drop Studio e está procurando emprego em Chapecó se alguem souber avise-me. Você pode entrar em contato comigo através da página de contato neste site ou pelo email neo[at]persocon.org.

  • http://pothix.com/blog PotHix

    Æ!!

    Tenho alguns pitacos.

    O que você chamou de sprite é bem conhecido por aqui como “estampa CSS”, e na verdade isso não reduz o consumo de banda, mas com certeza torna seu site mais rápido por que evita mais conexões para trazer várias imagens.

    Minimizar javascript e CSS é realmente indispensável para um website se tornar mais rápido.

    O Doctype não ajuda muito no consumo de banda, mas é muito importante, e de qualquer modo é uma boa dica!

    Parabens pelo post cara!

    Há braços

    [Reply]

    Pedro Costa Neves Reply:
    April 6th, 2010 at 10:23 am

    @PotHix, então :D realmente, dependendo do tamanho do sprite não diminui mesmo não, mais diminui os requests né, que também está ligado ao consumo de banda, porque pensa só, imagina se cada imagem e hover e active da imagem fossem chamados, seriam 3 sipá 4 ou mais requests por imagem ai você consome a banda com o tamanho das imagens e com os requests :\

    [Reply]