Performance em Fron-end

O que já fazemos e temos que fazer para melhorar a performance real e percebida pelos usuários.

Transcript

1. Performance  em  front  end
2. LUIZ  TANURE @tanure   github.com/letanure
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 OURO DA 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. WATERFALL Back-end Front-end github.com
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. MENOS  COISAS!
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. COISAS  MENORES
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. COMECE  CEDO
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. FERRAMENTAS
40. •Frameworks  que  já  u/lizam  boas  prá/cas   •Sprockets,  Asse/c   •Taks-­‐runner:  Grunt,  GULP   •Soxwares:  Prepros,  CodeKit FERRAMENTAS
41. PREPOS
42. CODEKIT
43. FINITO
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