SlideShare uma empresa Scribd logo
1 de 44
Baixar para ler offline
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  
falta  muito!
Usamos  (copiamos  e  colamos)  frameworks  que  já  possuem  
algumas  boas  prá/cas
PORQUE  MAIS  UMA  TALK  SOBRE  PERFORMANCE?
FRAMEWORKS
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?
Existem  várias  técnicas  que  podemos  usar,  em  várias  áreas  do  
desenvolvimento
PORQUE  MAIS  UMA  TALK  SOBRE  PERFORMANCE?
O  QUE  FALTA  FAZER?
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?
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!!
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?
QUEM  SE  IMPORTA  COM  PERFORMANCE?
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
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
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
!
•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)
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-­‐end  é  
ainda  maior.
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  
•Coisas  menores  
•Comece  cedo
MENOS  COISAS!
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
•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  componentes  depois  do  onload  
•U/lize  Etags:  nomes  únicos  para  arquivos
MENOS  COISAS
GERAL
COISAS  MENORES
•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
•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  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
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  a  percepção  do  usuário  e  podem  
ser  melhorados
PERFORMANCE  PERCEBIDA
CARREGOU,  E  AÍ?
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
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
•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
E  O  QUE  MAIS?
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
FERRAMENTAS
•Frameworks  que  já  u/lizam  boas  prá/cas  
•Sprockets,  Asse/c  
•Taks-­‐runner:  Grunt,  GULP  
•Soxwares:  Prepros,  CodeKit
FERRAMENTAS
PREPOS
CODEKIT
FINITO
• 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

Mais conteúdo relacionado

Semelhante a Performance em-front-end-luiz-tanure

Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressDaniel Paz
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorFellyph Cintra
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPFlávio Lisboa
 
Performance Front-end
Performance Front-endPerformance Front-end
Performance Front-endDescomplica
 
TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...
TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...
TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...tdc-globalcode
 
CORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSCORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSDaniel Paz
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPressWordCamp Floripa
 
Matando web forms e modernizando um grande varejista
Matando web forms e modernizando um grande varejistaMatando web forms e modernizando um grande varejista
Matando web forms e modernizando um grande varejistaJosé Roberto Araújo
 
Carreira de Desenvolvimento
Carreira de DesenvolvimentoCarreira de Desenvolvimento
Carreira de DesenvolvimentoAlvaro Viebrantz
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformAndré Paulovich
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsToninho Sousa
 
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...tdc-globalcode
 
Performance e otimização no wordpress
Performance e otimização no wordpressPerformance e otimização no wordpress
Performance e otimização no wordpressDaniel Paz
 
Digital Day BH - 19/09/205 - CI&T
Digital Day BH - 19/09/205 - CI&TDigital Day BH - 19/09/205 - CI&T
Digital Day BH - 19/09/205 - CI&TAndré Paulovich
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnicaSilvio Dias
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...iMasters
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações WebAnderson Aguiar
 

Semelhante a Performance em-front-end-luiz-tanure (20)

Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
Performance Front-end
Performance Front-endPerformance Front-end
Performance Front-end
 
TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...
TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...
TDC2017 | São Paulo - Trilha BigData How we figured out we had a SRE team at ...
 
Bi sobre Big Data - Como fazer?
Bi sobre Big Data - Como fazer?Bi sobre Big Data - Como fazer?
Bi sobre Big Data - Como fazer?
 
CORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSCORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESS
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
 
Matando web forms e modernizando um grande varejista
Matando web forms e modernizando um grande varejistaMatando web forms e modernizando um grande varejista
Matando web forms e modernizando um grande varejista
 
Carreira de Desenvolvimento
Carreira de DesenvolvimentoCarreira de Desenvolvimento
Carreira de Desenvolvimento
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud Platform
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
 
Performance e otimização no wordpress
Performance e otimização no wordpressPerformance e otimização no wordpress
Performance e otimização no wordpress
 
Digital Day BH - 19/09/205 - CI&T
Digital Day BH - 19/09/205 - CI&TDigital Day BH - 19/09/205 - CI&T
Digital Day BH - 19/09/205 - CI&T
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnica
 
temp EWP
temp EWPtemp EWP
temp EWP
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 

Performance em-front-end-luiz-tanure

  • 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.
  • 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
  • 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
  • 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
  • 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
  • 40. •Frameworks  que  já  u/lizam  boas  prá/cas   •Sprockets,  Asse/c   •Taks-­‐runner:  Grunt,  GULP   •Soxwares:  Prepros,  CodeKit FERRAMENTAS
  • 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