Medindo a performance do seu site com Firefox

  • 3

Medindo a performance do seu site com Firefox

Category : Firefox , Plugin

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

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 analisado e verificando onde se pode melhorar.

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:

YSLow

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!

Fernando Boaglio, para a comunidade. =)


About Author

Fernando Boaglio

???

  • 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

  • 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.

  • Não conhecia, bem legal vlw!

Quero saber mais sobre…

Inscreva-se para receber as novidades!

Arquivos

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×