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ÇÃODE USUÁRIOS

MAIS CONVERSÕES

Performance é a feature mais importante.

MÉTRICAS

REAL USERMONITORING (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 SOMENTEO NECESSÁRIO

CARREGUE TODO O RESTOASSINCRONAMENTE

<script />

<script async />

REDUZIR REQUESTSAO SERVER

IMAGENS EM SPRITE

MINIFICAR/CONCATENARJAVASCRIPT/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 InsightsNewRelic

Google Analyticshttp://stevesouders.com/cuzillion/

> performance.timing

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

BÔNUS

Confreaks

Confreaks

Confreaks

Confreaks

Confreaks

Confreaks

9to5mac

@andrehjrandre.junior@resultadosdigitais.com.br

shipit.resultadosdigitais.com.br

We're hiring! ;)

QUESTIONS?