1. Performance na web, alm do framework T Safo em Ao! 22/11/2013 Belm Par Brasil

2. Alexandre Cardoso (@accbel) Analista de desempenho InMetrics - SPDesenvolvendo software h 13 anosJava, Scala, Ruby, Web, Arquitetura, PerformanceTSafoConf 2012Editor do Scalando.com.br 3. Desenvolvimento para a Web 4. O que (normalmente) est nas preocupaes do desenvolvedor web? 5. Linguagem? Framework? SQL? NoSQL? Front-end? UX? SEO? Automated tests? Mobile? Social? Responsive design? 6. Por qu precisamos nos preocupar com isso? 7. Queremos implementar projetos e produtos de sucessoQueremos aproveitar oportunidades profissionais e de mercadoQueremos ganhar $$$ 8. Fatores tcnicos e no-tcnicosIsolados ou combinadosDeterminam o sucesso ou fracasso 9. Um dos mais importantes :Experincia de Usurio (UX) 10. Experincia de Usurio - UX Define como pessoas se sentem quando interagem com um sistema (), incluindo emoes, crenas, preferncias, percepes, reaes fsicas e psicolgicas, comportamentos e realizaes do usurio que ocorrem antes, durante e aps o uso.'Fonte: http://www.touchpoints.com.br/experiencia-do-usuario 11. PercepoReaoRealizao 12. Usurios tendo a melhor percepo de seu siteUsurios realizados ao buscar e acessar seu siteUsurio reagem com satisfao aos servios do site 13. (...) mas ele s carrega rapidamente na internet de 1Gbps do escritrio 14. UX super importante, assim como outros fatores, mas... Sites lentos no vivem pra contar histrias 15. Performance importa pra quem?33% of broadband shoppers are unwilling to wait more than four seconds for a web page to load, whereas 43% of narrowband users will not wait more than six seconds (Akamai, 2006) every 100 ms increase in load time of Amazon.com decreased sales by 1%Fonte: http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 16. Entretanto...Brasil est em 72 lugar no ranking de velocidade mdia de internetFonte:http://www.tecmundo.com.br/internet/42327-brasil-esta-em-72-lugar-no-ranking-de-velocidade-media-de-internet.htm 17. Desenvolvimento web para a realidade brasileira, cada vez mais mvel, conciliando inovao, UX e performance, um grande desafio.O 3G brasileiro uma piada e, mesmo assim, milhes de pessoas vo fechar negcios pelo celular 18. O que voc, desenvolvedor web, pode fazer a respeito? 19. Voc livre para fazer escolhas que suportem seu projeto... 20. Para todas elas, hoje e por muito tempo (ainda), o mesmo produto finalO front-end 21. Pensar o front-end desde o incio, voltado para performance, em 3 pilaresDesignCdigoRequisies 22. Design e performance Cuidado com imagens (quantidade e tamanho)650 KB (?!) 23. Design e performance Definir imagens de tamanhos distintos e serv-las quando necessrio, evitando redimensionamento no navegador. 150x150 71x71 30x30 TIP: Evitar download de uma imagem pesada, onde ela no necessria 24. Design e performance Definir e aplicar a taxa de compresso adequada, sem perda excessiva de qualidadeArquivo original (PNG): 43KBJPEG Compresso 100% - 24KBJPEG Compresso 80% - 14KBTIP: Largura de banda um recurso escasso e no-controlado. Otimizar, sempre que possvel. 25. Cdigo e performance Evite cdigo inline/embarcado no seu HTML.Difcil de manterAumenta o tamanho (KB) do HTMLNo pode ser cacheado 26. Cdigo e performance Use referncias externas para os assets do HTML.Fcil de manterHTML menor (KB) e mais enxutoCandidato ao cache do navegador 27. Cdigo e performance No custa lembrar: CSS no topo e JS no final!CSS links bloqueiam a renderizao at o fim do download. Antecipe.Tags