Otimizando a
performance do front-end
em uma aplicação real
Full stack engineer
@andrehjr
andre.junior@resultadosdigitais.com.br
ANDRÉ JUNIOR
1M+ de requests
~3 segundos
10M+ de requests
~2 segundos
Responsividade
Usabilidade
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
Performance é a feature
mais importante.
MÉTRICAS
REAL USER
MONITORING (RUM)
DEFINIR METAS
FIRST RENDER
~600ms
Requisição http
Requisição http
Requisição http
Requisição http
~80% do tempo
é gasto no Front-end.
Critical Rendering Path
Critical Rendering Path
Requisição http
Requisição http
DO NOT BLOCK!
REDES LENTAS
JÁ TESTOU SEU SITE EM UMA 3G?
INLINE CRITICAL CSS
CARREGUE SOMENTE
O NECESSÁRIO
CARREGUE TODO O RESTO
ASSINCRONAMENTE
<script />
<script async />
REDUZIR REQUESTS
AO SERVER
IMAGENS EM SPRITE
MINIFICAR/CONCATENAR
JAVASCRIPT/CSS
GZIP
Net flix gain
USE CONTENT DELIVERY
NETWORK (CDN)
Cuidado com JS de
terceiros.
HTTP 2.0/SPDY
Processo de
renderização.
Janky Free
60 FPS
~16ms por frame
Requisição http
Requisição http
Don't stop.
FERRAMENTAS
Page speed Insights
NewRelic
Google Analytics
http://stevesouders.com/cuzillion/
> performance.timing
REFERÊNCIAS
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
BÔNUS
Confreaks
Confreaks
Confreaks
Confreaks
Confreaks
Confreaks
9to5mac
@andrehjr
andre.junior@resultadosdigitais.com.br
shipit.resultadosdigitais.com.br
We're hiring! ;)
QUESTIONS?
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real
Próximos SlideShares
Carregando em…5
×

TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real

217 visualizações

Publicada em

Dicas de performance, otimização e lições aprendidas no Front-end e renderização no Browser. Boas práticas, e como identificar possíveis gargalos de performance.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

TDC São Paulo 2015 Trilha Web - Otimizando a performance do front-end em uma aplicação real

  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. 1M+ de requests ~3 segundos
  4. 4. 10M+ de requests ~2 segundos
  5. 5. Responsividade
  6. 6. Usabilidade
  7. 7. PERCEPÇÃO HUMANA
  8. 8. Tempo de primeira resposta
  9. 9. Tempo de primeira resposta
  10. 10. Tempo de primeira resposta
  11. 11. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
  12. 12. MELHOR ENGAJAMENTO
  13. 13. MAIOR RETENÇÃO DE USUÁRIOS
  14. 14. MAIS CONVERSÕES
  15. 15. Performance é a feature mais importante.
  16. 16. MÉTRICAS
  17. 17. REAL USER MONITORING (RUM)
  18. 18. DEFINIR METAS
  19. 19. FIRST RENDER ~600ms
  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. Critical Rendering Path
  26. 26. Critical Rendering Path
  27. 27. Requisição http
  28. 28. Requisição http
  29. 29. DO NOT BLOCK!
  30. 30. REDES LENTAS
  31. 31. JÁ TESTOU SEU SITE EM UMA 3G?
  32. 32. INLINE CRITICAL CSS
  33. 33. CARREGUE SOMENTE O NECESSÁRIO
  34. 34. CARREGUE TODO O RESTO ASSINCRONAMENTE
  35. 35. <script />
  36. 36. <script async />
  37. 37. REDUZIR REQUESTS AO SERVER
  38. 38. IMAGENS EM SPRITE
  39. 39. MINIFICAR/CONCATENAR 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. HTTP 2.0/SPDY
  45. 45. Processo de renderização.
  46. 46. Janky Free
  47. 47. 60 FPS ~16ms por frame
  48. 48. Requisição http
  49. 49. Requisição http
  50. 50. Don't stop.
  51. 51. FERRAMENTAS
  52. 52. Page speed Insights NewRelic Google Analytics http://stevesouders.com/cuzillion/ > performance.timing
  53. 53. REFERÊNCIAS
  54. 54. RESUMO
  55. 55. Carregue inicialmente somente o que você precisa
  56. 56. Não bloqueie o critical rendering path (usuários não gostam de ver uma tela em branco)
  57. 57. Conheça a sua aplicação, ajude o browser!
  58. 58. Mais performance, economizando recursos! (R$$$$)
  59. 59. Tenha métricas de cada mudança
  60. 60. BÔNUS
  61. 61. Confreaks
  62. 62. Confreaks
  63. 63. Confreaks
  64. 64. Confreaks
  65. 65. Confreaks
  66. 66. Confreaks
  67. 67. 9to5mac
  68. 68. @andrehjr andre.junior@resultadosdigitais.com.br shipit.resultadosdigitais.com.br We're hiring! ;) QUESTIONS?

×