Tempos de resposta
Segunda-feira, 15 de Novembro de 2004
Neste fim-de-semana estive a experimentar um método para comprimir os ficheiros CSS do site. A folha de estilos principal tem cerca de 24KB, o que é muito!
Fui aos meus arquivos desorganizados e encontrei este artigo: “Gzipping your CSS with PHP” com duas técnicas para comprimir a folha de estilos até 75%. Experimentei e… funciona! O ficheiro CSS comprimido ficou com apenas 4,9KB, ou seja, consegui uma compressão de quase 80%. Provavelmente ainda posso comprimir muito mais se remover os comentários do ficheiro, mas às vezes dão-me jeito para saber o que estou a alterar.
Página Principal:
Em termos de HTML, a página principal do site tem 14KB. Aqui não há muito mais a fazer.
Quanto às imagens… são 96KB na primeira página!! São muitos KB, mas é devido às imagens de todos os artigos que aparecem. No entanto vou tentar fazer uma optimização de todas as imagens para lhes reduzir o tamanho. Supostamente, uma página não deve ter mais de 15kB de imagens…
No global, a primeira página do site tem 114KB, que é uma coisa gigantesca, no entanto temos que considerar que esta página abre os 10 artigos mais recentes, portanto é uma página muito extensa (talvez altere para abrir apenas os 5 mais recentes).
Página de artigo:
Para comparar, fiz o mesmo teste à página do último artigo publicado no site. Os resultados foram muito mais animadores: HTML (6,5KB), imagens (7,8KB), CSS (4,9KB), o que dá um total de 19,3KB! Excelente!! Uma página web com menos de 20KB consegue abrir em 8 segundos numa ligação de 56K.
Segundo Jakob Nielsen, os utilizadores começam a ficar frustrados quando uma página demora mais de 10 segundos a abrir.
O Teste:
Como foi feito o teste? Simples! Basta escrever o endereço do vosso site no Web Page Analyzer e os resultados falam por si.
ACTUALIZAÇÃO:
Já alterei a página inicial para mostrar apenas os 3 artigos mais recentes e uma lista com os restantes 7 (10 no total). Isto permite que a página não fique tão comprida e pesada.
Ainda relacionado com este artigo, vou começar a ler o livro “Speed Up Your Site: Web Site Optimization“…
Ivo Gomes tem 32 anos e é licenciado em
Jorge Laranjo
16 de Novembro de 2004, 15:03
Acho que o artigo que referes é este
Ivo Gomes
16 de Novembro de 2004, 16:15
Obrigado.
Já corrigi o link.
Frederick van Amstel
17 de Novembro de 2004, 04:03
Valeu pela dica, Ivo! Já tinha visto esse truque de gzip, mas como só servia para sites dinâmicos, não testei. Cunca tinha pensado em aplicar em CSS. Testei no Usabilidoido e consegui reduzir para um terço do tamanho as folhas de estilos. Também apliquei a dica nos Javascripts.
Uma dica boa para criar códigos compactos com CSS é aplicar duas ou mais classes a um mesmo elemento, por exemplo:
Onde “coluna” é uma classe que aplica float e “principal” é uma que aplica uma formatação específica para essa coluna.
Ivo Gomes
18 de Novembro de 2004, 10:05
Também apliquei o gzip nos Javascripts e nota-se que a página carrega muito mais depressa. A velocidade de carregamento das páginas também é usabilidade!
Chefe
18 de Novembro de 2004, 15:20
Ivo,
também uso o WordPress e queria saber como você fez este esquema de colocar apenas os 3 primeiros posts e os outros 7 apenas como link.
Obrigado.
Chefe
Ivo Gomes
18 de Novembro de 2004, 16:31
Não foi fácil. Primeiro usei o código disponível no site “Left Justified” (http://leftjustified.net/journal/2004/10/13/ver15/), mas tive de alterar um pouco a template porque isto só funciona na primeria página. No meu caso, o ficheiro index.php faz tudo, ou seja, é a primeira página, é a página que abre os artigos, é a página que mostra os resultados das pesquisas, etc… Com o código do Left Justified, sempre que clicava para abrir todos os artigos de um mês, ou sempre que fazia uma pesquisa, o site ficava todo deslocado porque aparecia sempre a tabela em baixo com os links mais antigos em todas as páginas.
Então fiz uma pequena (grande) alteração ao código do “Left Justified”:
No WordPress, sempre que se clica num mês do calendário, o endereço do site fica assim: “index.php?m=#”, quando se clica para mostrar todos os artigos de uma categoria, o endereço fica: “index.php?cat=#”, e sempre que se faz uma pesquisa o endereço fica assim: “index.php?s=#”.
Então fiz uma pequena alteração no código PHP que simplesmente diz: Se $m diferente de “” ou $cat diferente de “” ou $s diferente de “” , então mostra a template X (a template normal), caso contrário mostra a template Y (a template com o código do “Left Justified” que tem a tabela com os últimos posts).
Espero ter ajudado. Se tiver alguma dúvida não hesite em me contactar.
Luciano
11 de Fevereiro de 2007, 04:09
aew eu fiz esse site http://lucianoindex.no-IP.org:8090 so q qeria montar imagens nele colocar botoes para clicarem mas so aparece site index of/ e os programa q coloquei para baixarem