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

3.5M+ de requests

~2 segundos

Net flix gain

Performance é a feature mais importante.

NO FRONT-END?

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)

DEFINIR METAS

Requisição http

Requisição http

Requisição http

Requisição http

Critical Rendering Path

Critical Rendering Path

DO NOT BLOCK!

FIRST RENDER

~600ms

CARREGUE SOMENTEO NECESSÁRIO

CARREGUE TODO O RESTOASSINCRONAMENTE

<script />

<script async />

INLINE CRITICAL CSS

REDES LENTAS

JÁ TESTOU SEU SITE EM UMA 3G?

REDUZIR REQUESTSAO SERVER

MINIFICARJAVASCRIPT / CSS

IMAGENS EM SPRITE

GZIP

USE CONTENT DELIVERY NETWORK (CDN)

PRE-FETCH / DNS-PREFETCH / PRE-RENDER

Quick wins

UNCSS

NGX_PAGESPEED

HTTP 2.0/SPDY

FERRAMENTAS

Page speed InsightsNewRelic

Google Analyticshttp://stevesouders.com/cuzillion/

> performance.timingGoogle Web tools

REFERÊNCIAS

HANDS-ON!

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?