Otimizando a performance do

front-end em uma aplicação real

Full stack engineer@andrehjr

andre.junior@resultadosdigitais.com.br

ANDRÉ JUNIOR

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

@andrehjrandre.junior@resultadosdigitais.com.br

shipit.resultadosdigitais.com.br

We're hiring! ;)

QUESTIONS?