tdc 2015 - otimizando a performance do front end
TRANSCRIPT
Otimizando a performance do
front-end em uma aplicação real
1.52M+ de requests
~3 segundos
8M+ de requests
~2 segundos
Performance é a
feature mais importante.
NO FRONT-END?
MicrosoftAmazonGoogle
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ÇÃODE USUÁRIOS
MAIS CONVERSÕES
Como eles se sentem?
SPEED MATTERS
MÉTRICAS
REAL USERMONITORING
(RUM)
Requisição http
Requisição http
Requisição http
Requisição http
80% do tempoé gasto no Front-
end.
DEFINIR METAS
FIRST RENDER
~600ms
Critical Rendering Path
Critical Rendering Path
DO NOT BLOCK!
CARREGUE SOMENTE
O NECESSÁRIO
CARREGUE TODO O RESTO
ASSINCRONAMENTE
<script />
<script async />
REDES LENTAS
JÁ TESTOU SEU SITE EM UMA 3G?
INLINE CRITICAL CSS
REDUZIR REQUESTSAO SERVER
IMAGENS EM SPRITE
MINIFICARJAVASCRIPT / CSS
GZIP
Net flix gain
USE CONTENT DELIVERY
NETWORK (CDN)
Cuidado com JS de terceiros.
PRE-FETCH / DNS-PREFETCH
/ PRE-RENDER
Don't stop.
HANDS-ON!
Confreaks
Confreaks
Confreaks
Confreaks
Confreaks
Confreaks
9to5mac
One more
Quick wins
NGX_PAGESPEED
HTTP 2.0/SPDY
FERRAMENTAS
Page speed Insights
NewRelic
Google Analytics
http://stevesouders.com/cuzillion/
> performance.timing
Google Web tools
REFERÊNCIAS
RESUMO
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
