Performance  em  front  end
LUIZ  TANURE
@tanure  
github.com/letanure
PORQUE  MAIS  UMA  TALK  
SOBRE  PERFORMANCE?
Já  adotamos  algumas  prá/cas  no  nosso  dia-­‐a-­‐dia,  mas  ainda  
falt...
Usamos  (copiamos  e  colamos)  frameworks  que  já  possuem  
algumas  boas  prá/cas
PORQUE  MAIS  UMA  TALK  SOBRE  PERF...
Conhecemos  algumas  técnicas,  mas  não  temos  idéias  de  como  
funcionam  ou  porque  funcionam.
PORQUE  MAIS  UMA  T...
Existem  várias  técnicas  que  podemos  usar,  em  várias  áreas  do  
desenvolvimento
PORQUE  MAIS  UMA  TALK  SOBRE  PE...
Técnicas  mais  avançadas  geram:  
!
•Maior  complexibilidade  
•Maior  esforço  na  manunteção  
!
Ou  seja,  mais  trab...
Por  isso  é  importante  aprender  novas  conhecimentos:  
!
•Novas  técnicas  
•Novas  ferramentas  
•Entenda  como  fun...
POR  QUE  DEVO  ME  PREOCUPAR  
COM  PERFORMANCE?
Impacto  no  resultado  e  importância
Performance  afeta  todos:  
!
•Usuários  
•Empresas  
•Google,  etc.
POR  QUE  DEVO  ME  PREOCUPAR  COM  PERFORMANCE?
QUE...
Velocidade  média  no  Brasil  é  de  2.7  Mbps.  
!
•Usuários  esperam  que  a  página  carregue  em  2s  ou  menos  
•Só...
Performance  afeta  o  número  de  pageviews,  conversões  e  
sa/sfação  do  usuário.  
!
•Demora  de    1  segundo  a  m...
Exemplos:  
•Yahoo:  a  cada  400ms  a  menos,  9%  a  mais  de  tráfego  
•Mozilla:  2.2s  a  menos,  15%  a  mais  de  d...
!
•Sa/sfação  do  usuário  é  cada  vez  mais  importante.  
•Velocidade  de  carregamento  É  um  fator  de  ranking
POR ...
REGRA DE OURO DA
PERFORMANCE NO
FRONT-END
20%  DO  TEMPO  É  BACK-­‐
END,  80%  É  FRONT-­‐END
Na  realidade,  várias  vezes,  a  culpa  o  percentual  do  front-­‐...
WATERFALL
Back-end
Front-end
github.com
COMO  MELHORAR  A  
PERFORMANCE  NO  
FRONT-­‐END?
Existem  várias  técnicas  e  medidas,  mas  todas  basicamente  
dizem...
MENOS  COISAS!
Obviamente:  
•Navegadores  modernos  fazem  até  6  conexões  simultâneas  
por  domínio,  considerando  todas  as  abas ...
•Combine  seus  arquivos  CSS  
•Evite  @import:  gera  uma  requisição  a  mais  
MENOS  COISAS
CSS
•Combine  seus  arquivos  Javascript  
•Evite  @import:  gera  uma  requisição  a  mais  
MENOS  COISAS
JAVASCRIPT
•U/lize  CSS  Sprites  
•U/lize  imagens  como  data  URI
MENOS  COISAS
IMAGENS
•Use  ou  crie  sua  própria  CDN  
•Configure  os  Expire  Headers  
•U/lize  local  storage  
MENOS  COISAS
CACHE
•Carregue  apenas  o  que  precisa  
•Não  desperdice  requests  com  404s  e  redirects  
•Post-­‐load:  carregue  compon...
COISAS  MENORES
•Sprites  horizontais  são  menores  que  ver/cais  
•Agrupe  as  imagens  por  cores  
•O/mize  as  imagens  
•Comprima  ...
•Comprima  seus  arquivos  CSS  
•Remova  seletores  e  propriedades  sem  uso
COISAS  MENORES
CSS
•A/ve  GZIP  no  seu  servidor  
•Remova  seletores  e  propriedades  sem  uso
COISAS  MENORES
GERAL
COMECE  CEDO
•lazy-­‐load:  pré-­‐carregue  componentes  
•o/mize  a  ordem  de  carregamento  
•carregamento  assíncrono  do  javascri...
PERFORMANCE  É  MEDIDA  PELA  PERCEPÇÃO  DO  
USUÁRIO
Existem  melhorias  a  serem  feitas  além  do  simples  
carregamento  rápido  da  página.  
Outros  fatores  influenciam ...
CSS  mal  estruturado  ou  uma  página  com  muitos  elementos,  
podem  ter  problemas  na  exibição  
•evite  aninhament...
Javascript  é  o  que  mais  interfere  no  funcionamento.  
•evite  muitos  acessos  ao  DOM  
•JS  no  final  do  HTML,  ...
•Evite  muitos  elementos  no  DOM  
•evite  elementos  pesados  (iframe/object)  
•O/mize  o  primeiro  fold  da  página ...
E  O  QUE  MAIS?
As  melhorias  de  performance  são  cada  vez  mais  necessárias,  
principalmente  no  JS.  
•webcomponents,  Polymer,  ...
FERRAMENTAS
•Frameworks  que  já  u/lizam  boas  prá/cas  
•Sprockets,  Asse/c  
•Taks-­‐runner:  Grunt,  GULP  
•Soxwares:  Prepros, ...
PREPOS
CODEKIT
FINITO
• http://developer.yahoo.com/performance/	

• http://stevesouders.com/	

• http://browserdiet.com/	

• http://googlewebmas...
Próximos SlideShares
Carregando em…5
×

Performance em-front-end-luiz-tanure

717 visualizações

Publicada em

0 comentários
8 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
717
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
8
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Performance em-front-end-luiz-tanure

  1. 1. Performance  em  front  end
  2. 2. LUIZ  TANURE @tanure   github.com/letanure
  3. 3. PORQUE  MAIS  UMA  TALK   SOBRE  PERFORMANCE? Já  adotamos  algumas  prá/cas  no  nosso  dia-­‐a-­‐dia,  mas  ainda   falta  muito!
  4. 4. Usamos  (copiamos  e  colamos)  frameworks  que  já  possuem   algumas  boas  prá/cas PORQUE  MAIS  UMA  TALK  SOBRE  PERFORMANCE? FRAMEWORKS
  5. 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. 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. 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. 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. 9. POR  QUE  DEVO  ME  PREOCUPAR   COM  PERFORMANCE? Impacto  no  resultado  e  importância
  10. 10. Performance  afeta  todos:   ! •Usuários   •Empresas   •Google,  etc. POR  QUE  DEVO  ME  PREOCUPAR  COM  PERFORMANCE? QUEM  SE  IMPORTA  COM  PERFORMANCE?
  11. 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. 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. 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. 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. 15. REGRA DE OURO DA PERFORMANCE NO FRONT-END
  16. 16. 20%  DO  TEMPO  É  BACK-­‐ END,  80%  É  FRONT-­‐END Na  realidade,  várias  vezes,  a  culpa  o  percentual  do  front-­‐end  é   ainda  maior.
  17. 17. WATERFALL Back-end Front-end github.com
  18. 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. 19. MENOS  COISAS!
  20. 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. 21. •Combine  seus  arquivos  CSS   •Evite  @import:  gera  uma  requisição  a  mais   MENOS  COISAS CSS
  22. 22. •Combine  seus  arquivos  Javascript   •Evite  @import:  gera  uma  requisição  a  mais   MENOS  COISAS JAVASCRIPT
  23. 23. •U/lize  CSS  Sprites   •U/lize  imagens  como  data  URI MENOS  COISAS IMAGENS
  24. 24. •Use  ou  crie  sua  própria  CDN   •Configure  os  Expire  Headers   •U/lize  local  storage   MENOS  COISAS CACHE
  25. 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. 26. COISAS  MENORES
  27. 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. 28. •Comprima  seus  arquivos  CSS   •Remova  seletores  e  propriedades  sem  uso COISAS  MENORES CSS
  29. 29. •A/ve  GZIP  no  seu  servidor   •Remova  seletores  e  propriedades  sem  uso COISAS  MENORES GERAL
  30. 30. COMECE  CEDO
  31. 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. 32. PERFORMANCE  É  MEDIDA  PELA  PERCEPÇÃO  DO   USUÁRIO
  33. 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. 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. 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. 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. 37. E  O  QUE  MAIS?
  38. 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. 39. FERRAMENTAS
  40. 40. •Frameworks  que  já  u/lizam  boas  prá/cas   •Sprockets,  Asse/c   •Taks-­‐runner:  Grunt,  GULP   •Soxwares:  Prepros,  CodeKit FERRAMENTAS
  41. 41. PREPOS
  42. 42. CODEKIT
  43. 43. FINITO
  44. 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

×