And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 13092
Opiniões: 30

Mais deste autor


Diminuindo o consumo de banda com html, css e javascript

Diminuindo o consumo de banda com html, css e javascript

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação, Softwares, Variedades
Por Chris Benseler
10 de Outubro de 2008

Um modo simples de diminuir o tamanho dos arquivos html, css e javascript trafegados pelo seu site

RSS Acompanhe O Desenvolvedor por Feeds!


Estava eu ontem, todo *feliz*, analisando as estatísticas de acesso de uns sites feitos (e hospedados) na empresa pra qual trabalho. Bacana, vendo acessos de browsers, horas de pico, resolução de tela, tráfego de arquivos e...
Perae! 45% do tráfego mensal era de javascript. Num site sem absolutamente nada de ajax ou efeitos ou coisas do gênero.
Encafifei: o quê estaria acontecendo?

Simples: esqueceram de ligar o filtro de compressão gzip para arquivos css/javascript.

Vejo por aí que muita gente não conhece isso, e fica proecupado em tirar todos os tabs e espaços dos arquivos html, css e javascript. Usa aqueles aplicativos que diminuem o código javascript, colocando tudo na mesma linha. E acabam com qualquer tabulação no CSS.
Tudo isso era válido 5 anos atrás. Hoje em dia, existe uma forma mais adequada de fazer diminuir o consumo de banda quando arquivos desse gênero são requisitados.

Explicando como os browsers funcionam: ao fazer uma solicitação de um URL, quando essa chega no servidor de destino, a primeira coisa a acontecer é passar pelo webserver. Esse cara tenta pegar os arquivos requisitados (html, imagens, css, js, etc...) e, em caso de sucesso (status 200) devolve pra quem os requisitou.
*isso tudo é uma simplificação beeem simplificada do fluxo, conforme pode-se ver no diagrama abaixo:

 
Bem, um novo passo nesse fluxo foi adicionado com a evolução tanto dos browsers, quanto dos webservers quanto do protocolo HTTP.
Os browsers hoje em dia, bem como o webserver, têm a capacidade de comprimir e descomprimir dados usando o gzip (como se fosse um .zip). Quando o browser faz uma solicitação de uma URL, ele manda um header com dados referentes à solicitação e a ele mesmo (qual a versão, tipo, etc...). Com isso, o webserver consegue saber se esse browser suporta compressão de arquivos. Se o webserver estiver configurado, ele pode fazer a compressão de arquivos html, css, js, ou de qualquer outro formato de arquivo.



 

Fazendo testes aqui, a diferença de tamanho de arquivo para html/css/js chegou a 90% em alguns casos. Imagine que se você usa algum framework js (a jQuery tem uns 100kB, a Prototype está com 120), a cada requisição de um usuário que não está com esses arquivos no cachê pode ser de 90kB - okey, vamos arredondar para 80kB. Se 100 pessoas acessam por dia, dá 8mB; ou, 240mB por mês.
Agora, imagine num site com milhares de pageviews...

Na net, existem muitos links explicando como configurar o seu webserver (ISS, Apache) para cada tipo de arquivo, como esses aqui:

Compressão de html com o Apache: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Compressão de CSS/js com o Apache: http://blog.joshuaeichorn.com/archives/2007/01/10/compressing-javascript-and-css/
Verificar a taxa de compressão: http://www.gidnetwork.com/tools/gzip-test.php

Enjoy ;)
 

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: html, css, js, gzip, compressao, taxa-de-transferencia

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

gotia2003
[www]

10/10/2008 23:10:00

Bacana o assunto. Não sabia que existia essas coisas de compressão. Vou dar uma procurada para saber como faz em outros webserver.

[Responder este comentário]

Guilherme Serrano

11/11/2008 16:01:00

Chris, eu li em algum lugar que quando se utiliza gzip o arquivo não fica mais em cache para o usuário... sabe me dizer se isso é verdade?

Depois vou procurar mais sobre o assunto, mas se o gzip realmente impede o cache pode ser um tiro no pé né... hehe

[Responder este comentário]

Chris Benseler

2/2/2009 18:38:00

Desconheço essa questão, cara... mas vou até dar uma pesquisada nisso!

João F. Melo
[www]

2/2/2009 17:22:00

Já ouví "falar" mas nunca tinha usado.
Muito bom

[Responder este comentário]
Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 2 + 3?




web tracker