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
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ÇÃODE USUÁRIOS
Performance é a feature mais importante.
REAL USERMONITORING (RUM)
FIRST RENDER
~600ms
~80% do tempoé gasto no Front-end.
Critical Rendering Path
Critical Rendering Path
JÁ TESTOU SEU SITE EM UMA 3G?
INLINE CRITICAL CSS
CARREGUE SOMENTEO NECESSÁRIO
CARREGUE TODO O RESTOASSINCRONAMENTE
REDUZIR REQUESTSAO SERVER
IMAGENS EM SPRITE
MINIFICAR/CONCATENARJAVASCRIPT/CSS
USE CONTENT DELIVERY NETWORK (CDN)
Cuidado com JS de terceiros.
Processo de renderização.
60 FPS
~16ms por frame
Page speed InsightsNewRelic
Google Analyticshttp://stevesouders.com/cuzillion/
> performance.timing
Carregue inicialmente somenteo 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
@andrehjrandre.junior@resultadosdigitais.com.br
shipit.resultadosdigitais.com.br
We're hiring! ;)
QUESTIONS?