Dicas: Firebug e YSlow

domingo, 27 de julho de 2008. | Post Atualizado.

(Comente)

Pra quem testa aplicações WEB, e deseja uma ferramenta bem prática para realizar alguns testes de performance (tempo-resposta), uma boa dica é o firebug e o YSlow.

Firebug é uma ferramenta que uso a bastante tempo, e acho uma das ferramentas indispensáveis para quem trabalha com aplicações WEB independente da plataforma de desenvolvimento, pois para o firebug, o que importa é o front-end, ele atualmente é uma extensão do Firefox, no entanto existe uma forma de utilizá-lo no IE, Opera e Safari seguindo os seguintes estes procedimentos.

Já o YSlow é uma ferramenta que se incorpora ao firebug, e é exclusivo para testes de tempo-resposta de aplicações WEB, no Firefox, depois de instalado, eles ficam no rodapé direito de seu browser…o inseto é o firebug, e o cronômetro o YSlow, como na imagem abaixo.

image

Clicando nesse inseto (firebug), uma série de funcionalidades lhe é disponibilizada, não vou aborda todas aqui pois não é o caso, afinal a ferramenta é bem intuitiva e sua usabilidade é ótima.

A dica que quero deixar aqui, é a aba ‘Rede’, nesta aba o firebug realiza uma medição do tempo-resposta das imagens/java-script/css que compõem sua aplicação, e exibe-os como imagem abaixo.

image

Isto é muito bom para identificar gargalos, que foram introduzidos na aplicação, por engano ou até mesmo propositalmente, mas que acabaram esquecidos.

Certa vez, no deploy de uma aplicação, encontrei 5 CSS´s (Cascading Style Sheets) na aplicação, sem contar os inúmeros scripts do jquery, que poderiam ser otimizados e alguns deles retirados.

Já o YSlow é ainda mais legal no ponto de vista dos testes de performance, ele segue uma série de regras com o parâmetros para analisar os resultados de dos testes, veja imagem abaixo.

image

A análise acima é daqui do zezologs.org, já ouviram o ditado que diz “casa de ferreiro, espeto de pau” pois é segundo o YSlow recebi nota “D”, isso não é bem uma novidade, pois já havia identificado isso a um certo tempo, apenas não tive muito tempo para resolver, até porque com o todo site que utiliza o wordpress, precisa de plugins, e resolver este problema é bem mais trabalhoso que imaginamos, pois teria que ir de plugin em plugin melhorando o código, e isso, é fora de cogitação…seria bom que todos que aqueles que escrevem plugins para o WordPresse seguissem a risca o que Mark fala neste post “How to write a solid and stable WordPress plugin“, mas enfim, prosseguindo…

Na próxima tela ele faz um comparativo com o cache vazio e cheio

image

E na última, lista os componentes que compões sua aplicação.

image

E isso ai, fica ai a dica ;) .


    


Gostou? assine o feed | Discordou? opine! ou entre em contato

3 Opinioes

     
    Gravatar





    Wanderly
    21-07-2009

    Muito bom e direto seu Post, parabéns e obrigado pela dica!!!!

    Abraço
     
  1.  
    Gravatar





    Luís Felipe Silva Mamede
    03-12-2010

    Eu quero saber como mudar valores da colheita feliz pelo firebug google chrome valeu
     
sites que referenciam este post (trackbacks e pingbacks)

  • 13 Regras Básicas Para Aplicações WEB | ...zezologs
    [...] de frontend eficientes, estas mesmas 14 regras são usadas no YSlow, que abordei em “Dicas: Firebug e YSlow“. O ...



    • Opine!




    Caso possua um site, preencha este campo que ele sera exibido na pagina inicial na aba "+ leitores".