Página Inicial > Firefox, Plugin > Medindo a performance do seu site com Firefox

Medindo a performance do seu site com Firefox

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!

Categories: Firefox, Plugin Tags:
  1. 2, agosto, 2007 em 17:35 | #1

    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. 2, agosto, 2007 em 22:47 | #2

    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.

  1. Nenhum trackback ainda.