Como deixar sua aplicação rápida
•
0 gostou•251 visualizações
Em nossa busca diária de forçar a web a fazer cada dia mais, acabamos diante de alguns problemas, dentre eles: Performance! Aplicações web são bem mais robustas do que jamais imaginamos e se tornaram mais demandantes de recursos de dispositivos e até mesmo de internet. Nessa talk vamos conhecer algumas formas e ferramentas para avaliar e sugerir melhorias de performance de aplicações web principalmente na perspectiva de um usuário. Veremos o que é importante avaliar e como isso impacta em um site responsivo, desenvolvido para funcionar em vários dispositivos (smartphone, tablet, notebooks, etc).
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Como deixar sua aplicação rápida
Semelhante a Como deixar sua aplicação rápida (20)
Mais de minastestingconference
Mais de minastestingconference (20)
Como deixar sua aplicação rápida
- 2. “ Como deixar a sua aplicação rápida, fazendo seus usuários felizes (e os chefes também!)
- 3. Eu sou a Renata Andrade QA na Avenue Code Em um projeto da Fanatics, empresa líder em vendas de produtos esportivos nos EUA 10+ Anos de experiência em Qualidade de Software Formada em Sistemas de Informação pelo COTEMIG em 2009 Organizadora do Café, Testes e Pão de Queijo em BH Amo catioros, fotografia, acroyoga, slackline, viagem, forró Não gosto de café, nem de chocolate, nem de cebola Hello!
- 4. Conhecendo melhor vocês ◉ Quem trabalha em projetos web? ◉ Quem é da área de testes/desenvolvimento/outros? ◉ Quem trabalha em projeto que verifica sites em mobile real devices (pode ser cloud)? ◉ Quem trabalha em projeto que verifica performance? ◉ Quem sabe o processo desde que o usuário digita uma URL até o momento que o browser mostra a página?
- 5. O que acontece no browser desde o momento que digitamos uma URL até o momento que ele carrega?
- 6. Processo desde que o usuário digita uma Url até a página ser completamente exibida 1. O browser procura pelo endereço no cache local; Se não encontrado ele procura no servidor de DNS o endereço IP correspondente; 2. Assim que encontra o IP ele estabelece uma conexão com o servidor e envia um HTTP request, GET; 3. O servidor devolve uma resposta contendo status code (1xx, 2xx, 3xx, 4xx, 5xx), o esqueleto do HTML (com links para as imagens, javascripts, CSS, fontes, e outros); 4. O browser começa a exibir esse HTML e ir carregando os demais conteúdos (imagens, css, fontes) a medida que eles são chamados nos arquivos e faz o cache desses dados.
- 7. Processo desde que o usuário digita uma Url até a página ser completamente exibida GET http://google.com/ HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0 Accept-Encoding: gzip, deflate Connection: Keep-Alive Host: google.com Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...] HTTP/1.1 200 OK Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Expires: Thu, 19 Nov 1981 08:52:00 GMT Pragma: no-cache Content-Encoding: gzip Content-Type: text/html; charset=utf-8 Connection: Keep-Alive Content-length: 1215 Date: Fri, 30 May 2014 08:10:15 GMT .........<some blob> ................
- 8. Processo desde que o usuário digita uma Url até a página ser completamente exibida 1. Cache / DNS 2. Conexão com servidor. HTTP request 3. Servidor devolve a resposta. Browser recebe o primeiro HTML (links para: css, imagens,etc) 4. HTML termina de ser processado. Conteúdo carregado. 5. Página renderizada. tempo front-end
- 9. A Web em 2018 Fonte: http://bit.ly/2LvwAcM
- 10. 2.5MBÉ a média de tamanho de uma página 13 segundosÉ o tempo gasto para baixar esses 2.5MB em uma rede 3G Fonte: http://bit.ly/2zO52ec
- 11. A Web em 2018 53% dos visitantes abandonam os sites se ele gasta mais de 3 segundos para carregar. 1 a cada 2 Pessoas esperam que o site carregue em até 2 segundos. 77% Dos sites gastam mais de 10 segundos para carregar em redes 3G. Fonte: http://bit.ly/2zO52ec
- 12. Entendendo o web console Documentação web console: https://bit.ly/2mqU1FX
- 13. Vamos ao que interessa
- 14. Ferramentas para avaliar a performance
- 15. Demo Time! o/ Passo a passo: http://bit.ly/2Lenpy7
- 16. Sobre ferramenta de performance Faça uma POC com mais de uma ferramenta As ferramentas utilizam diferentes métodos de análise e resultado. Avalie qual faz mais sentido para o seu negócio. Mantenha uma mesma ferramenta Após decidir qual a melhor ferramenta, utilize sempre a mesma para comparar resultados. Throttling a conexão Sempre defina em qual conexão você irá testar (4G, 3G, etc). Isso reduzirá ruídos no resultado. Mobile – não se esqueça dele Lembre-se de incluir mobile real devices no seus testes e de considerá-lo ao desenvolver as funcionalidades. AUTOMATIZE sempre que possível Apesar de ter várias alternativas, opte por uma ferramenta que automatize o processo de análise de resultados. Avalie os resultados no site É importante ter uma ferramenta de métricas para acompanhar os resultados que as melhorias de performance está causando.
- 17. Principais sugestões de melhoria de performance Limpe o código Remova espaços e identações desnecessárias. Delete bibliotecas não utilizadas. Comprima imagens e vídeos Trabalhe com imagens, animações e vídeos mais otimizados possível. http://bit.ly/2uLe3Pt Considere Mobile Considere tamanhos diferentes de imagens para diferentes dispositivos. Considere também carregar conteúdo de acordo com o tipo de conexão utilizada. Utilize estratégias de CACHE Defina estratégias adequadas de cache de forma que otimize o acesso ao servidor. Utilize estratégias de Lazy Load Baixar conteúdo a medida que ele for necessário por exemplo evita que o usuário tenha que ficar esperando. Defina importância dos conteúdos Determine a importância dos conteúdos através das tags `preload`, `preconnect`, `prefetch`
- 18. Principais sugestões de melhoria de performance Adeque o uso de web-font Defina estratégia de carregamento de fontes através da tag font-display. http://bit.ly/2JzkUAS Mantenha as práticas Não só em código novo mas também revisitar código antigo frequentemente para refactoring aplicando as práticas definidas. Projeto com exemplos: http://bit.ly/2LpBSXc Livros: High Performance Web Sites (Steve Souders) Web Performance Daybook (Edited by Stoyan Stefanov) Google I/O 2018: http://bit.ly/2uw92Ln
- 19. Cuidados com melhorias de performance Experiência do Usuário É importânte ter muito cuidado ao implementar as técnicas para garantir que a experiência do usuário não seja afetada. Ou seja balanceada para ter o mínimo de impacto. Estratégia de Regressão É muito importante já ter definida uma estratégia de testes de regressão, principalmente visual.
- 20. Conversão É a realização do que é esperado alcançar com o site. Se é um site de downloads, a conversão é o usuário acessar o seu site e de fato fazer um download. Se é um ecommerce, a conversão é o usuário finalizar uma compra. Principais fatores de impacto: performance, layout, SEO. Deixando usuários e chefes felizes! Melhorando a performance conseguimos: ◉ Aumentar o hanking nas pesquisas do Google ◉ Mais usuários acessando o site ◉ Menos usuários deixando o site ◉ Usuários felizes comprando mais ◉ Aumentar as vendas ◉ Chefes felizes com os resultados
- 21. Alguma pergunta ? Me encontre através de: ◉ www.linkedin.com/in/raptatinha ◉ raptatinha@gmail.com Obrigada!