[Análise Performance Antiga Plataforma]

Transcrição

1 Resumo do documento: Este documento tem com objectivo avaliar o desempenho da antiga aplicação de forma a ver o seu comportamento. Palavras-Chave: Performance Histórico de versões: Versão Data Realizado por V1.0 Jennifer Santos V1.1 V1.2

2 Índice 1 Introdução Análise feita na antiga aplicação da ANET Conclusão... 8 Página 2/8

3 1 Introdução Este documento tem como objectivo a análise de performance Front-end da aplicação Web da ANET da antiga plataforma, de forma a identificar os bottlenecks e apresentar as possíveis soluções. A análise será feita com base nas regras de performance segundo Steve Sourders, com o auxílio do Firebug e suas extensões: -YSLOW, para análise de desempenho; - Net Panel, para analisar o carregamento e performance da aplicação Web; - Page Speed (complementar ao YSlow). Também será usada o HTTPWatch para fazer possíveis comparações. Página 3/8

4 2 Análise feita na antiga aplicação da ANET Com o auxílio do plugin do FireFox o YSlow, podemos optimizar a performance Front- End da aplicação, em alguns pontos. Pois essa ferramenta apresenta um conjunto de regras classificadas entre A à F, onde se pode melhorar as regras que apresentam classificações inferiores à A. A análise da aplicação será feita com base nas seguintes regras: Após a execução do YSlow, podemos verificar de uma forma geral, que a performance da página da ANET apresenta um desempenho relativamente bom, com uma nota B/F. Apesar de apresentar uma bom desempenho, algumas das regras de performance segundo Steve Souders podem ser melhoradas, o que ajudará a optimizar mais a aplicação Página 4/8

5 Como podemos verificar na figura acima as regras com os piores resultados, destacam-se as regras 2 (Use Content delivery network), regra 3 (Add Expires headers) e a regra 13 (Configure entity tags (Etags)). A seguir serão descritas essas regras: - Regra 2: Use Content delivery network (CDN) - como podemos ver pela figura acima, a página tem 26 componente estático e não tem nenhum CDN, sendo a maioria desses ficheiros de imagem (gif,png), tem alguns ficheiros javascript e alguns ficheiros de folha de estilo. A implementação de conteúdo através de múltiplos servidores dispersos geograficamente ajudará ao utilizador da aplicação a perceber que as páginas estão a carregar mais rapidamente, ou seja com vários servidores distribuídos o tempo de resposta torna-se mais rápido. Mas a implementação desse componente será desnecessário uma vez que a aplicação será usada só em Portugal, não haverá a necessidade de ter vários servidores distribuídos geograficamente. - Regra 3 Add Expires headers: Tem 29 componentes estáticos, sem um data expiração "far-futuro" como podemos verificar na figura abaixo. Esses componente não vão sofrer alterações tão cedo, sendo uma boa politica seria mantê-las em cache. Ao usar a cache o carregamento da página Web tornasse mais rápido, reduzindo assim o número de solicitações HTTP. Página 5/8

6 O servidor usa o Expires hears para informar o cliente Web que pode usar a cópia actual de um componente ate o específico specified time. Em relação as estatísticas da página de uma forma geral têm: Página 6/8

7 - Configure entity tags (Etags) regra 13: tem 26 componentes com ETags errada. Etags é um mecanismo que Web-servers e Browser usam para validar componentes armazenados em cache. Com o auxílio do Page Speed, uma ferramenta adicional da Firebug dá-nos uma ideia, diz quais são os ficheiros específicos que devem ser alterado na aplicação Web, como podemos ver na figura abaixo temos: Javascript: Página 7/8

8 Minifying os seguintes recursos JavaScript poderia reduzir seu tamanho pela 1.8KiB (7% de redução). Imagens: Optimizando as imagens a seguir podem reduzir o seu tamanho por 15.6KiB (12% de redução). CSS: 92,1% da CSS (8.3kB estimado de 9kb) não é usado pela página actual. Esses dados não foram apresentados no YSlow por serem ficheiros externos mas. Com o auxílio da feramente Net Panel do firebug e a ferramenta httpwatch, obtemos informações essencial par analisar o carregamento e performance da aplicação, verificando os pedidos feitos, o tempo ate esses serem tratados e o tráfego que ocorreu no acesso de uma página. Como podemos verificar nas figuras abaixo: A figura é o resultado de tempo de carregamento de cada componente da página inicial da antiga aplicação web da ANET. Como podemos verificar pela figura, gastou-se pouco tempo no carregamento da página html, o resto foi gasto com imagens, CSS, JavaScripts, etc. 3 Conclusão Após a análise feita com o auxílio das ferramentas, pode-se concluir que a página apresenta um bom desempenho em relação a performance do Front-end, mas apesar do seu bom desempenho, ainda assim pode ser melhorado em relação a algumas regras (2, 3 e 13(header expeires, configuração do Etags)), o que fará com que a pagina tenha um óptimo desempenho de performance Front-End. A aplicação Web da ANET para além do estudo da análise de performance Front-End, foi feito uma análise do comportamento da aplicação nos diferentes browser mas esse apresentava comportamentos estranhos de browser para browser. Com tal houve a necessidade de melhorar a aplicação, remodelando e desenvolvendo uma nova aplicação com novas tecnologias e novas técnicas de segurança, de forma a optimiza-lo. Página 8/8