Perca peso na Web, pergunte-me como - Análise e práticas para performance na Web

Palestra sobre performance, no segundo dia do FORTES 2013

Transcript

1. Perca peso na Web, pergunte-me como! P o r V i n i c i u s T e i x e i r a D a l l a c q u a Análise e práticas para perfomance na Web quinta-feira, 25 de abril de 13
2. quinta-feira, 25 de abril de 13
3. Apresentação Vinicius Teixeira Dallacqua Formado em Tecnologia de Sistemas para Internet - IF-TO Desenvolvedor Web e Web Designer no TRE-TO Co-fundador do serviço http:/ /ourliv.es Co-fundador do serviço http:/ /clapside.com Front end, back end, web design, UX, lean startup, iOS, ... quinta-feira, 25 de abril de 13
4. http://browserdiet.com/ quinta-feira, 25 de abril de 13
5. Problemas relacionados... Não é tão visível para o usuário final Não tem importância, até o momento que é percebida como problema...então é nossa culpa Performance é mais do que uma funcionalidade, é a funcionalidade MAIS importante quinta-feira, 25 de abril de 13
6. Problemas relacionados... Não é tão visível para o usuário final Não tem importância, até o momento que é percebida como problema...então é nossa culpa PÁGINAS LENTAS = PERDA DE USUÁRIOS quinta-feira, 25 de abril de 13
7. PÁGINAS LENTAS = PERDA DE USUÁRIOS quinta-feira, 25 de abril de 13
8. Dados sobre Performance... Pesquisa feita em 2009: +1s LOAD TIME = -2,8% RECEITA ESTUDO DO YAHOO (2009): 400MS A MAIS DE LENTIDÃO = 5% a 9% DE PERDA DE TRÁFEGO GOOGLE USA O TEMPO DE CARREGAMENTO COMO UM DOS CRITÉRIOS DE RANK quinta-feira, 25 de abril de 13
9. Pensando sobre performance... quinta-feira, 25 de abril de 13
10. Pensando sobre performance... A menor parte da request é de responsabilidade do back end Steve souders - The performance golden roule : 80/20 http://www.stevesouders.com/blog/2012/02/10/the8performance8golden8rule/ quinta-feira, 25 de abril de 13
11. Pensando sobre performance... quinta-feira, 25 de abril de 13
12. O que podemos fazer para ganhar performance? Simplificar e otimizar o css usar CDN AMD menor quantidade de requests possível para assets GZIP quinta-feira, 25 de abril de 13
13. O que podemos fazer para ganhar performance? cache carregamento assíncrono de scripts reduzir o tamanho do DOM Lossless optimization de imagens quinta-feira, 25 de abril de 13
14. Simplificar e otimizar o CSS não escrever seletores ineficazes final “*”, termando em tags, ... Recalcular reavaliar DOM causa problemas de performance display:none, visibility:hidden, CSS animations https://developer.mozilla.org/en4US/docs/CSS/Writing_Efficient_CSS quinta-feira, 25 de abril de 13
15. quinta-feira, 25 de abril de 13
16. quinta-feira, 25 de abril de 13
17. AMD Asyncronous Module Definition Melhor gerenciamento de dependências requer menor recurso computacional para o usuário final require(["dir/minhaLib"], function(util) { // usando funcão de minhaLib definida como util. util.funcao(); }); quinta-feira, 25 de abril de 13
18. Menor quantidade de requisições possíveis para os assets A requisição HTTP mais rápida é aquela que não é feita quinta-feira, 25 de abril de 13
19. Menor quantidade de requisições possíveis para os assets File merge SASS, less, Grunt.js Image sprites Data URI Icon FOnts quinta-feira, 25 de abril de 13
20. GZIP obrigatório Simples de implementar enorme ganho quinta-feira, 25 de abril de 13
21. Cache Reduz o número de requests de assets para futuras visitas do usuário Formas de implementar: Expires headers (.htaccess) HTML5 app cache quinta-feira, 25 de abril de 13
22. Carregamento assíncrono de scripts Otimiza o tempo da request por carregar scripts de forma paralela <script async ... /> carrega de forma assíncrona e faz parsing e executa assim que terminar o carregamento <script defer ... /> carrega de forma assíncrona mas apenas executa e faz parsing após document.ready quinta-feira, 25 de abril de 13
23. Carregamento assíncrono de scripts (function()?{ ????//https://gist.github.com/zenorocha/5161860 ????var?script, ????????scripts?=?document.getElementsByTagName('script')[0]; ???????? ????function?load(url)?{ ??????script?=?document.createElement('script'); ??????script.async?=?true; ??????script.src?=?url; ??????scripts.parentNode.insertBefore(script,?scripts); ????} ???? ????load('//apis.google.com/js/plusone.js'); ???? }()); quinta-feira, 25 de abril de 13
24. Lossless optimization Processo simples várias ferramentas disponíveis Enorme ganho (até 70%) quinta-feira, 25 de abril de 13
25. quinta-feira, 25 de abril de 13
26. quinta-feira, 25 de abril de 13
27. Links Úteis http:/ /goo.gl/vcUgT quinta-feira, 25 de abril de 13
28. Obrigado! quinta-feira, 25 de abril de 13