Baixar para ler offline
Carregado porLuiz Tanure
Performance em-front-end-luiz-tanure
O documento discute técnicas para melhorar o desempenho no front-end. Ele explica que pequenas melhorias na performance podem ter grande impacto no número de visualizações, conversões e satisfação do usuário. O documento também destaca a importância de começar cedo a otimizar aspectos como carregamento de imagens, CSS, JavaScript e outros recursos para melhorar a percepção do usuário sobre a velocidade do site.
Performance em-front-end-luiz-tanure
- 1.
- 2.
- 3. PORQUE MAIS UMA TALK SOBRE PERFORMANCE? Já adotamos algumas prá/cas no nosso dia-‐a-‐dia, mas ainda falta muito!
- 4. Usamos (copiamos e colamos) frameworks que já possuem algumas boas prá/cas PORQUE MAIS UMA TALK SOBRE PERFORMANCE? FRAMEWORKS
- 5. Conhecemos algumas técnicas, mas não temos idéias de como funcionam ou porque funcionam. PORQUE MAIS UMA TALK SOBRE PERFORMANCE? O QUE ESTAMOS FAZENDO?
- 6. Existem várias técnicas que podemos usar, em várias áreas do desenvolvimento PORQUE MAIS UMA TALK SOBRE PERFORMANCE? O QUE FALTA FAZER?
- 7. Técnicas mais avançadas geram: ! •Maior complexibilidade •Maior esforço na manunteção ! Ou seja, mais trabalho. PORQUE MAIS UMA TALK SOBRE PERFORMANCE? PORQUE NÃO FAZEMOS?
- 8. Por isso é importante aprender novas conhecimentos: ! •Novas técnicas •Novas ferramentas •Entenda como funciona um navegador •Entenda como o usuário se comporta PORQUE MAIS UMA TALK SOBRE PERFORMANCE? MAS EU NÃO QUERO MAIS TRABALHO!!
- 9. POR QUE DEVO ME PREOCUPAR COM PERFORMANCE? Impacto no resultado e importância
- 10. Performance afeta todos: ! •Usuários •Empresas •Google, etc. POR QUE DEVO ME PREOCUPAR COM PERFORMANCE? QUEM SE IMPORTA COM PERFORMANCE?
- 11. Velocidade média no Brasil é de 2.7 Mbps. ! •Usuários esperam que a página carregue em 2s ou menos •Só perde para segurança, na ordem de prioridades •8 de 10 não retornam depois de uma experiência ruim •30% abandonam um site depois de 5s POR QUE DEVO ME PREOCUPAR COM PERFORMANCE? USUÁRIOS
- 12. Performance afeta o número de pageviews, conversões e sa/sfação do usuário. ! •Demora de 1 segundo a mais, 11% a menos page views, 16% a menos na sa/sfação, e menos 7% de conversões. POR QUE DEVO ME PREOCUPAR COM PERFORMANCE? EMPRESAS
- 13. Exemplos: •Yahoo: a cada 400ms a menos, 9% a mais de tráfego •Mozilla: 2.2s a menos, 15% a mais de downloads •Amazon: 100ms a menos, 1% a mais de faturamento •Google: 30 resultados em vez de 10, de 0.4s para 0.9s, tráfego caiu 20% •Bing: 2s a mais, queda de 4.3% no faturamento POR QUE DEVO ME PREOCUPAR COM PERFORMANCE? EMPRESAS
- 14. ! •Sa/sfação do usuário é cada vez mais importante. •Velocidade de carregamento É um fator de ranking POR QUE DEVO ME PREOCUPAR COM PERFORMANCE? GOOGLE (A.K.A MECANISMOS DE BUSCA)
- 15. REGRA DE OURODA PERFORMANCE NO FRONT-END
- 16. 20% DO TEMPO É BACK-‐ END, 80% É FRONT-‐END Na realidade, várias vezes, a culpa o percentual do front-‐end é ainda maior.
- 17.
- 18. COMO MELHORAR A PERFORMANCE NO FRONT-‐END? Existem várias técnicas e medidas, mas todas basicamente dizem: •Menos coisas •Coisas menores •Comece cedo
- 19.
- 20. Obviamente: •Navegadores modernos fazem até 6 conexões simultâneas por domínio, considerando todas as abas •menos arquivos = menos requisições = menos demora MENOS COISAS POR QUE? COMO? Várias técnicas, no CSS, JS, Imagens e HTML
- 21. •Combine seus arquivos CSS •Evite @import: gera uma requisição a mais MENOS COISAS CSS
- 22. •Combine seus arquivos Javascript •Evite @import: gera uma requisição a mais MENOS COISAS JAVASCRIPT
- 23. •U/lize CSS Sprites •U/lize imagens como data URI MENOS COISAS IMAGENS
- 24. •Use ou crie sua própria CDN •Configure os Expire Headers •U/lize local storage MENOS COISAS CACHE
- 25. •Carregue apenas o que precisa •Não desperdice requests com 404s e redirects •Post-‐load: carregue componentes depois do onload •U/lize Etags: nomes únicos para arquivos MENOS COISAS GERAL
- 26.
- 27. •Sprites horizontais são menores que ver/cais •Agrupe as imagens por cores •O/mize as imagens •Comprima as imagens, remova informações •Atenção ao formato e finalidade de cada /po de imagem •JPEG / PNG / GIF •Evite imagens muito grandes COISAS MENORES IMAGENS
- 28. •Comprima seus arquivos CSS •Remova seletores e propriedades sem uso COISAS MENORES CSS
- 29. •A/ve GZIP no seu servidor •Remova seletores e propriedades sem uso COISAS MENORES GERAL
- 30.
- 31. •lazy-‐load: pré-‐carregue componentes •o/mize a ordem de carregamento •carregamento assíncrono do javascript com async •atenção à ordem e dependências •Pré-‐carregue componentes u/lizados em outras seções •rel=“prefetch”: carrega e cacheia •rel=“prerender”: carrega e renderiza COMECE CEDO GERAL
- 32. PERFORMANCE É MEDIDA PELA PERCEPÇÃO DO USUÁRIO
- 33. Existem melhorias a serem feitas além do simples carregamento rápido da página. Outros fatores influenciam a percepção do usuário e podem ser melhorados PERFORMANCE PERCEBIDA CARREGOU, E AÍ?
- 34. CSS mal estruturado ou uma página com muitos elementos, podem ter problemas na exibição •evite aninhamentos grandes no CSS •CSS é no topo do HTML •conheça peso de performance de seletores e propriedades •Não u/lize abuse de filtros e propriedades complexas PERFORMANCE PERCEBIDA CSS
- 35. Javascript é o que mais interfere no funcionamento. •evite muitos acessos ao DOM •JS no final do HTML, evitando block •aprenda JS e suas su/lezas! PERFORMANCE PERCEBIDA JAVASCRIPT
- 36. •Evite muitos elementos no DOM •evite elementos pesados (iframe/object) •O/mize o primeiro fold da página •Não redimensione imagens no html •Dispare o evento onload mais cedo •ADs no fim do HTML, posicionados depois do onload •Mantenha suas libraries atualizadas PERFORMANCE PERCEBIDA HTML, ETC
- 37. E O QUE MAIS?
- 38. As melhorias de performance são cada vez mais necessárias, principalmente no JS. •webcomponents, Polymer, X-‐tags, etc •shadow DOM •encapsulamento •templates JÁ SEI TUDO ISSO. PRESENTE & FUTURO
- 39.
- 40. •Frameworks que já u/lizam boas prá/cas •Sprockets, Asse/c •Taks-‐runner: Grunt, GULP •Soxwares: Prepros, CodeKit FERRAMENTAS
- 41.
- 42.
- 43.
- 44. • http://developer.yahoo.com/performance/ • http://stevesouders.com/ •http://browserdiet.com/ • http://googlewebmastercentral.blogspot.com.br/2010/04/using- site-speed-in-web-search-ranking.html • http://googlewebmastercentral.blogspot.com.br/2010/04/using- site-speed-in-web-search-ranking.html • http://www.html5rocks.com/en/tutorials/performance/ mystery/?redirect_from_locale=pt • https://speakerdeck.com/ahomu/high-performance-web- frontend • https://speakerdeck.com/ahomu/high-performance-web- frontend-2013-qiu ++ • https://speakerdeck.com/ahomu/web-frontend-performance- tuning-tips-star-n ++ • https://speakerdeck.com/ahomu/web-frontend-rendering- performance-knowledge-and-tips ++ • https://speakerdeck.com/danielvlopes/frontend-performance • https://speakerdeck.com/ericsk/tuning-website-performance-in- frontend-perspective • https://speakerdeck.com/mattfarina/faster-front-end- performance • https://speakerdeck.com/pornel/front-end-performance • https://speakerdeck.com/urbanetter/frontend-performance- where-it-matters • http://wesleyhales.com/blog/2013/02/18/Adventures-With-the- Skia-Debugger/ • https://sites.google.com/site/skiadocs/developer- documentation/skia-debugger • http://browserdiet.com/ • https://github.com/zenorocha/browser-diet/wiki/Impact-of- performance • https://developers.google.com/speed/docs/best-practices/rtt? hl=sv#AvoidCssImport REFERÊNCIAS