Como aumentar a performance em lojas VTEX. VTEX Day

PERFORMANCE EM LOJAS VTEX

Leandro OrienteDesenvolvedor Front End

POR QUE INVESTIR EM PERFORMANCE?

ESPERAR É CHATO

PERFORMANCE VENDE

100ms1%

faturamento

1s2%

conversão

100ms1%

receita

400ms9%

tráfego

PARCEIRO

+

NÓS CUIDAMOS

GZIP

CACHE

TEMPO DE RESPOSTA COMPRESSÃO

VOCÊS CUIDAM

OTIMIZAÇÃO DE IMAGENS

83kb 35kb

Imagemin (Grunt, Gulp)

smush.it Save for Web

(Photoshop)

SPRITES

MUITAS IMAGENS

UMA IMAGEM

581ms 287ms

-51%

muitas imagens uma imagem

CSS 3 É MELHOR

QUE IMAGENS

10kb 0.3kb

-97%

IMAGEM CSS

CSSJAVASCRIPT

UGLIFYMINIFYCONCAT

POUCOS REQUESTS

MAIORES

É MELHOR QUE MUITOS REQUESTS

menores

LATÊNCIA

PLUGINS !

VOCÊ REALMENTE PRECISA

DE TODOS ELES?

jQuery UI 250kb

CUSTOM BUILD

REAPROVEITAMENTO

…

…

USE MENOS

DESIGN

MENOS FIRULAS MENOS BANNERS

MENOS TUDO!

MAIS CONVERSÃO

MÉTRICAS

YSlow

PRECISANDO DE AJUDA?

Aqui entra a referência ao VTEX Speed

?

OBRIGADOleandro.oriente@vtex.com.br

pela atenção.

LAB.VTEX.COM

FONTEShttp://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/

http://www.slideshare.net/stoyan/yslow-20-presentation

https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0

http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/