YSlow: Controle a performance do seu website

AGRADEÇA AO AUTOR COMPARTILHE!

alta_performanceOlá galera!

Primeiramente gostaria de recomendar uma excelente leitura, o livro do Steve Souders, Alta Performance em Sites Web. Da editora O’Reilly e “apadrinhado” pelo Yahoo!.

Ele é o “código da Vinci” da performance web e defende paradigmas que podem até mesmo desafiar as mais tradicionais “figurinhas carimbadas” da área. Neste livro vemos sobre requisições, cabeçalhos de expiração, gzip, cache, eTags, etc. Enfim, para quem tem um website e deseja aumentar a sua performance… é uma excelente pedida.

Lendo sobre padrões e boas práticas na web, encontrei o YSlow. Este cara é um complemento para o Firebug que supervisiona os principais tópicos discutidos no livro e dá uma nota (A, B, C, …) para a performance do seu website (e para os respectivos tópicos).

O PTI tem nota geral F, temos que:

  • Diminuir o número de requisições HTTP
  • Usar rede de distribuição de conteúdo
  • Adicionar cabeçalhos expires
  • Compactar respostas com GZip
  • Diminuir o número de pesquisas DNS

Para ter-se uma idéia: o Yahoo! tem nota A, o meu iGoogle deu B, o Youtube deu D, o Br-Linux deu F, o Terra deu F e o G1 deu F.

Para quem leu o livro, vai finalmente poder dormir em paz tendo uma ferramenta dessas para auxiliar no controle da performance. Para quem não leu… leia!

Até a próxima…

AGRADEÇA AO AUTOR COMPARTILHE!

Klaus Peter Laube

Mais artigos deste autor »

Tecnólogo em Análise e Desenvolvimento de Sistemas pelo Centro Universitário de Jaraguá do Sul (UNERJ). Desenvolvedor Web de longa data, apaixonado por Python e defensor dos padrões Web. Escreve quando pode no http://www.klauslaube.com.br.


8 Comentários

Jackson CasetJackson Caset
1

Olá Klaus,

Vou testar a ferramenta e vou buscar melhorias para o PTI. Creio que alguns itens, tal como as requisições http, será quase impossível diminuir a um ponto realmente ideal, pois utilizamos várias ferramentas externas, tal como o Friend Connect, Adsense, plugins do WP e etc.

O que consola é que tem grandões com F também….hehehe.

Mesmo assim, obrigado pela dica. Vou baixar a revisar tudo.

Abraço

Klaus Peter Laube
2

@Jackson
É a mesma história dos validadores… aí é uma questão de bom senso. Só você conhece a semântica “da coisa toda”, um software não é capaz disso.
Pois é… a maioria dos sites “grandões” brazucas tá de C para baixo… essa moda pegou legal lá fora, tomara que pegue aqui.

Zed
3

Muito bom o livro.
Nunca havia pensado no tempo de renderização da página.
Sempre pensava apenas em otimizar o banco e o código.
Realmente é algo que todo profissional que se diz webdesigner deveria saber.

Dermeval Junior
4

Só tenho uma dúvida do que significa exatamente “Diminuir o número de pesquisas DNS” como fazê-lo na prática.

E Diminuir o número de requisições HTTP Seria diminuir o número de META TAGS por exemplo?

Klaus Peter Laube
5

@dermeval,
Diminuir o número de requisições HTTP quer dizer, por exemplo, diminuir o número de arquivos Javascript e CSS que são carregados em sua página. É custoso para o navegador ficar abrindo comunicação com o servidor, sendo mais vantajoso você agrupar diversos arquivos CSS em um só. Assim, o navegador só tem que pesquisar 1 vez só por aquele recurso na web.

A cada novo domínio encontrado em seu website, o navegador tem que pesquisar por ele na árvore de DNS, descobrindo o seu IP, e aí então podendo acessar o recurso que estiver lá (por exemplo, uma imagem do Flickr). Imagine que você tem 10 imagens de 10 domínios diferentes… serão 10 procedimentos para descoberta de IP. Evite isso… o navegador costuma armazenar essa resolução de DNS em cache (ou seja, ele só vai ter todo este trabalho para descobrir a primeira imagem do Flickr, as próximas ele já saberá aonde o provedor do recurso de encontra).

Talvez este artigo seja mais esclarecedor: http://developer.yahoo.com/performance/rules.html

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">