Otimizando a 
performance do front-end 
em uma aplicação real
ANDRÉ JUNIOR 
Full stack engineer 
@andrehjr 
andre.junior@resultadosdigitais.com.br
1.52M+ de requests 
~3 segundos
3.5M+ de requests 
~2 segundos
Net flix gain
Performance é a feature 
mais importante.
NO FRONT-END?
PERCEPÇÃO HUMANA
Tempo de primeira resposta
Tempo de primeira resposta
Tempo de primeira resposta
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
MELHOR ENGAJAMENTO
MAIOR RETENÇÃO 
DE USUÁRIOS
MAIS CONVERSÕES
Como eles se sentem?
SPEED MATTERS
MÉTRICAS
REAL USER 
MONITORING (RUM)
DEFINIR METAS
Requisição http
Requisição http
Requisição http
Requisição http
Critical Rendering Path
Critical Rendering Path
DO NOT BLOCK!
FIRST RENDER 
~600ms
CARREGUE SOMENTE 
O NECESSÁRIO
CARREGUE TODO O RESTO 
ASSINCRONAMENTE
<script />
<script async />
INLINE CRITICAL CSS
REDES LENTAS
JÁ TESTOU SEU SITE EM UMA 3G?
REDUZIR REQUESTS 
AO SERVER
MINIFICAR 
JAVASCRIPT / CSS
IMAGENS EM SPRITE
GZIP
USE CONTENT DELIVERY 
NETWORK (CDN)
PRE-FETCH / DNS-PREFETCH 
/ PRE-RENDER
Quick wins
UNCSS
NGX_PAGESPEED
HTTP 2.0/SPDY
FERRAMENTAS
Page speed Insights 
NewRelic 
Google Analytics 
http://stevesouders.com/cuzillion/ 
> performance.timing 
Google Web tool...
REFERÊNCIAS
HANDS-ON!
RESUMO
Carregue inicialmente somente 
o que você precisa
Não bloqueie o critical rendering path 
(usuários não gostam de ver uma tela em branco)
Conheça a sua aplicação, ajude o browser!
Mais performance, economizando recursos! 
(R$$$$)
Tenha métricas de 
cada mudança
QUESTIONS? 
@andrehjr 
andre.junior@resultadosdigitais.com.br 
shipit.resultadosdigitais.com.br 
We're hiring! ;)
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real
Próximos SlideShares
Carregando em…5
×

FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real

373 visualizações

Publicada em

Palestra sobre dicas e lições aprendidas da ResultadosDigitais sobre performance no frontend no desenvolvimento do RDStation.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

FrontInFloripa 2014 - Otimizando a performance do Frontend em uma aplicação real

  1. 1. Otimizando a performance do front-end em uma aplicação real
  2. 2. ANDRÉ JUNIOR Full stack engineer @andrehjr andre.junior@resultadosdigitais.com.br
  3. 3. 1.52M+ de requests ~3 segundos
  4. 4. 3.5M+ de requests ~2 segundos
  5. 5. Net flix gain
  6. 6. Performance é a feature mais importante.
  7. 7. NO FRONT-END?
  8. 8. PERCEPÇÃO HUMANA
  9. 9. Tempo de primeira resposta
  10. 10. Tempo de primeira resposta
  11. 11. Tempo de primeira resposta
  12. 12. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
  13. 13. MELHOR ENGAJAMENTO
  14. 14. MAIOR RETENÇÃO DE USUÁRIOS
  15. 15. MAIS CONVERSÕES
  16. 16. Como eles se sentem?
  17. 17. SPEED MATTERS
  18. 18. MÉTRICAS
  19. 19. REAL USER MONITORING (RUM)
  20. 20. DEFINIR METAS
  21. 21. Requisição http
  22. 22. Requisição http
  23. 23. Requisição http
  24. 24. Requisição http
  25. 25. Critical Rendering Path
  26. 26. Critical Rendering Path
  27. 27. DO NOT BLOCK!
  28. 28. FIRST RENDER ~600ms
  29. 29. CARREGUE SOMENTE O NECESSÁRIO
  30. 30. CARREGUE TODO O RESTO ASSINCRONAMENTE
  31. 31. <script />
  32. 32. <script async />
  33. 33. INLINE CRITICAL CSS
  34. 34. REDES LENTAS
  35. 35. JÁ TESTOU SEU SITE EM UMA 3G?
  36. 36. REDUZIR REQUESTS AO SERVER
  37. 37. MINIFICAR JAVASCRIPT / CSS
  38. 38. IMAGENS EM SPRITE
  39. 39. GZIP
  40. 40. USE CONTENT DELIVERY NETWORK (CDN)
  41. 41. PRE-FETCH / DNS-PREFETCH / PRE-RENDER
  42. 42. Quick wins
  43. 43. UNCSS
  44. 44. NGX_PAGESPEED
  45. 45. HTTP 2.0/SPDY
  46. 46. FERRAMENTAS
  47. 47. Page speed Insights NewRelic Google Analytics http://stevesouders.com/cuzillion/ > performance.timing Google Web tools
  48. 48. REFERÊNCIAS
  49. 49. HANDS-ON!
  50. 50. RESUMO
  51. 51. Carregue inicialmente somente o que você precisa
  52. 52. Não bloqueie o critical rendering path (usuários não gostam de ver uma tela em branco)
  53. 53. Conheça a sua aplicação, ajude o browser!
  54. 54. Mais performance, economizando recursos! (R$$$$)
  55. 55. Tenha métricas de cada mudança
  56. 56. QUESTIONS? @andrehjr andre.junior@resultadosdigitais.com.br shipit.resultadosdigitais.com.br We're hiring! ;)

×