Page 1
Otimizando a performance do front-end
em uma aplicação real
Page 2
Full stack engineer@andrehjr
[email protected]
ANDRÉ JUNIOR
Page 8
1M+ de requests
~3 segundos
Page 9
10M+ de requests
~2 segundos
Page 16
Tempo de primeira resposta
Page 17
Tempo de primeira resposta
Page 18
Tempo de primeira resposta
Page 19
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
Page 20
MELHOR ENGAJAMENTO
Page 21
MAIOR RETENÇÃODE USUÁRIOS
Page 23
Performance é a feature mais importante.
Page 26
REAL USERMONITORING (RUM)
Page 28
FIRST RENDER
~600ms
Page 33
~80% do tempoé gasto no Front-end.
Page 34
Critical Rendering Path
Page 35
Critical Rendering Path
Page 40
JÁ TESTOU SEU SITE EM UMA 3G?
Page 43
INLINE CRITICAL CSS
Page 44
CARREGUE SOMENTEO NECESSÁRIO
Page 45
CARREGUE TODO O RESTOASSINCRONAMENTE
Page 49
REDUZIR REQUESTSAO SERVER
Page 50
IMAGENS EM SPRITE
Page 51
MINIFICAR/CONCATENARJAVASCRIPT/CSS
Page 54
USE CONTENT DELIVERY NETWORK (CDN)
Page 55
Cuidado com JS de terceiros.
Page 57
Processo de renderização.
Page 59
60 FPS
~16ms por frame
Page 69
Page speed InsightsNewRelic
Google Analyticshttp://stevesouders.com/cuzillion/
> performance.timing
Page 73
Carregue inicialmente somenteo que você precisa
Page 74
Não bloqueie o critical rendering path(usuários não gostam de ver uma tela em branco)
Page 75
Conheça a sua aplicação, ajude o browser!
Page 76
Mais performance, economizando recursos!(R$$$$)
Page 77
Tenha métricas de cada mudança
Page 88
@[email protected]
shipit.resultadosdigitais.com.br
We're hiring! ;)
QUESTIONS?