Conversão para tableless: HP Brasil
Mais uma conversão de um site de uma grande empresa para tableless feito por mim.
Dessa vez foi o site da HP Brasil.
Um site simples, mas com um design bem bonito.
O site original é praticamente todo baseado em javascript. Até mesmo a exibição das imagens e cores de maneira aleatória é feita com scripts que rodam no cliente.
Na minha opinião, esse tipo de coisa deveria ser feita no lado do servidor, já que é bem mais rápido e mantém o código gerado mais limpo, sem aquele monte de código js desnecessário.
A diferença de tamanho entre o HTML original e a versão tableless é realmente absurda.
o original tem 42,9KB contra 8,05KB da versão tableless. mesmo levando em conta que pelo menos 10KB do HTML original são formados por scripts js, a diferença de tamanho continua sendo muito grande.
O tamanho total (HTML+CSS+Imagens+js) do site original é 105,8KB, grande demais. A versão tableless completa tem apenas 30,08KB, menos de 30% do tamanho original. O CSS tem 5KB e, levando-se em conta que os visitantes habituais do site da HP já teriam o CSS guardado no cache dos seus browsers, seriam menos 5KB a ser baixados.
Fazendo uma pequena conta, assumindo 10 mil visitantes diários, teríamos
- Versão original
- 10.000 x 105,8KB = 1.058.000KB, ou mais ou menos 1GB diário - 30GB por mês.
- versão tableless
- 10.000 x 30,08 = 300.800KB, ou 293MB por dia - 8,6GB por mês
Percebam que essa é a economia de transferência conseguida apenas com a conversão da home page do site.
Além de ser mais leve, a versão tableless tem um código mais legível e marcação válida pelo W3C como XHTML 1.0 Strict.
Sites tableless são mais fáceis de manter e atualizar, mais leves e, em geral mais acessíveis - principalmente em se tratando de outras plataformas e dispositivos.
O único problema é quanto a browsers mais antigos (versão 4 pra baixo), que não interpretam css de maneira adequada. Mas no caso específico do site da HP, que depende de javascript para formar o layout, acho que não dá pra usar essa desculpa para não converter o site.
Gostou? Baixe o arquivo zip contendo a versão tableless para estudar
Use o Web Page Analyser para verificar as diferenças de desempenho entre as duas versões
16 Out 2004 |
comentários... |
Comentar |
|
