10 aplicações de console imperdíveis para a comunidade Linux linux no desktop, ou dá ou desce!
ago 02

Os desenvolvedores de aplicações web que usam Firefox, sabem que uma das melhores ferramentas que existem é o Firebug, que eu mencionei na minha lista há algum tempo.

Baseado nele, o Yahoo! liberou a sua ferramenta interna de medir performance de sites, criando o YSlow.


Ele oferece:

  • relatório de performance do site
  • resumo de acessos HTTP/HTML
  • a lista completa de componentes da página
  • diversas ferramentas, inclusive o analisador de código Javascript JSLint

De acordo com a documentação, esse plugin analisa como está o site de acordo com essas 13 regras:

  1. Fazer menos chamadas HTTP
  2. Usar o conceito de Content Delivery Network
  3. Colocar data de expiração no Header dos arquivos
  4. Use o Gzip nos componentes de sua página
  5. Colocar o CSS no topo da página
  6. Colocar os scripts no final da página
  7. Evitar expressões de CSS
  8. Manter o código JavaScript e CSS externo
  9. Reduzir as buscas de DNS
  10. Reduzir ao máximo o código JavaScript
  11. Evitar Redirects
  12. Remover scripts duplicados
  13. Configurar as Entity Tags (ETags)



Com esse plugin você consegue visualizar um rank do site analizado e verificando onde se pode melhorar.

Performance View


Fiz alguns testes nos sites mais comuns, e na ordem de pontuação ficou assim:

  1. Google - A (99)
  2. Sun - B (89)
  3. Oracle - D (64)
  4. Submarino - D (61)
  5. Amazon - F (53)
  6. UOL - F (55)
  7. Wikipedia - F (50)
  8. Microsoft - F (47)
  9. Terra - F (42)
  10. Best Buy - F (34)


Ao executar o teste nos sites também aparece um ícone com a letra da avaliação, a quantidade de kbytes baixada e o tempo gasto:

toolbar

Existem diversos tipos de ferramenta nesse plugin, mas a mais completa é a chamada Printable View, acessada dentro do Firebug, na aba YSlow, pelo opção do menu Tools.

Bons testes!

2 Responses to “Medindo a performance do seu site com Firefox”

  1. Raphael Says:

    Muito bom, adorei!
    Mas como resolvo os seguintes problemas:

    2.Usar o conceito de Content Delivery Network

    3. Colocar data de expiração no Header dos arquivos

    4. Use o Gzip nos componentes de sua página

    5. Colocar o CSS no topo da página

    O 5 acho q ta bugado, pois eu sempre coloco os css dentro do e acusou erro

  2. Fernando Boaglio Says:

    Consulte o site da documentação do plugin no Yahoo! para entender melhor os conceitos.

    De maneira alguma o item 5 está errado, pois colocar os estilos entre as tags HEAD ou em arquivos .css é a melhor maneira de definir o layout de uma página.

Leave a Reply