TDC 2015 - Otimizando a performance do front end

336 visualizações

Publicada em

Palestra sobre otimização de performance no Front-end e no brwoser

Publicada em: Engenharia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

TDC 2015 - Otimizando a performance do front end

  1. 1. Otimizando a performance do front- end em uma aplicação real
  2. 2. Full stack engineer @andrehjr andre.junior@resultadosdigitais.com. br ANDRÉ JUNIOR
  3. 3. 1.52M+ de requests ~3 segundos
  4. 4. 8M+ de requests ~2 segundos
  5. 5. Performance é a feature mais importante.
  6. 6. NO FRONT-END?
  7. 7. Microsoft Amazon Google
  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. Requisição http
  21. 21. Requisição http
  22. 22. Requisição http
  23. 23. Requisição http
  24. 24. 80% do tempo é gasto no Front-end.
  25. 25. DEFINIR METAS
  26. 26. FIRST RENDER ~600m
  27. 27. Critical Rendering Path
  28. 28. Critical Rendering Path
  29. 29. DO NOT BLOCK!
  30. 30. CARREGUE SOMENTE O NECESSÁRIO
  31. 31. CARREGUE TODO O RESTO ASSINCRONAMENTE
  32. 32. <script />
  33. 33. <script async />
  34. 34. REDES LENTAS
  35. 35. JÁ TESTOU SEU SITE EM UMA 3G?
  36. 36. INLINE CRITICAL CSS
  37. 37. REDUZIR REQUESTS AO SERVER
  38. 38. IMAGENS EM SPRITE
  39. 39. MINIFICAR JAVASCRIPT / CSS
  40. 40. GZIP
  41. 41. Net flix gain
  42. 42. USE CONTENT DELIVERY NETWORK (CDN)
  43. 43. Cuidado com JS de terceiros.
  44. 44. PRE-FETCH / DNS- PREFETCH / PRE-RENDER
  45. 45. Don't stop.
  46. 46. HANDS-ON!
  47. 47. Confreaks
  48. 48. Confreaks
  49. 49. Confreaks
  50. 50. Confreaks
  51. 51. Confreaks
  52. 52. Confreaks
  53. 53. 9to5mac
  54. 54. One more
  55. 55. Quick wins
  56. 56. NGX_PAGESPEED
  57. 57. HTTP 2.0/SPDY
  58. 58. FERRAMENTAS
  59. 59. Page speed Insights NewRelic Google Analytics http://stevesouders.com/cuzillion/ > performance.timing Google Web tools
  60. 60. REFERÊNCIAS
  61. 61. RESUMO
  62. 62. Carregue inicialmente somente o que você precisa
  63. 63. Não bloqueie o critical rendering path (usuários não gostam de ver uma tela em branco)
  64. 64. Conheça a sua aplicação, ajude o browser!
  65. 65. Mais performance, economizando recursos! (R$$$$)
  66. 66. Tenha métricas de cada mudança
  67. 67. @andrehjr andre.junior@resultadosdigitais.com.br shipit.resultadosdigitais.com.br We're hiring! ;) QUESTIONS?

×