[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites

por uma web mais rápida: técnicas de otimização de sites

Sérgio Lopes sergio.lopes@caelum.com.br facebook.com/ sergio.caelum@sergio_caelum

Post completo sobre a palestra:http://bit.ly/n0e40x

Por que vocêdeve otimizar seu Site?

esperar é muito muitoirritante!

Para c ada 400ms de melhora,o tráfe go do Yahoo! aumenta 9%

Ao diminuir 2.2s de sua landing page, a Mozilla aumentou em 15% osdownloads do Firefox.

100ms de melhora aumentam ofaturamento da Amazon em 1%

Um experimento doGoogle aumentou onúmero de resultadosde 10 para 30, indode 0.4s para 0.9s.O tráfego caiu 20%.

2s a mais na busca do Bingdiminuíram o faturamento em 4.3%

Tamanho: de 100kb para 300kb Requests: de 12 para 42 Carregamento: de 2s para 6s

queda de 21% no time on site, 28% nos pageviews e18% no conversion rate

média de9s paracarregara página

75% demoram 400msou menos no servidor

“ Diminua o tamanhodos requests

#1 Habilite GZIP

43% dos requestssem GZIP

#2 Miniﬁque JavaScript

só13%comprimiram todos os JavaScripts

#3 Miniﬁque CSS

#4 Comprima HTML

#5 Não redimensione imagens no HTML

#6 Otimize as imagens

22%economizariam mais de 40%

#7 Pense no formato das imagens

PNGJPGGIF

PNG AlphaJPGGIF

PNG AlphaJPG LossyGIF

PNG AlphaJPG LossyGIF Animações

PNG8PNG Alpha PNG32JPG LossyGIF Animações

#8 Diminua cookies e headers

“ Diminuaa quantidade de requests

#9 Junte arquivos JavaScript

média de10 arquivos JavaScript

#10 Junte arquivos CSS

média de5arquivos CSS

#11 Use Sprites

metade tem 36mais de imagens

#12 Use Data URIs

#13 Conﬁgure os headers

87% fazemmais que 10requests no2º pageview

#14 Tire ﬁrulas do design

“Performance é medida pelapercepção do usuário

#15 Especiﬁque o tamanho das imagens

#16 Coloque o JavaScript no ﬁm

média até mostraralguma coisa é 4.3s

#17 Coloque o CSS no topo

#18 Adie o carregamento do que puder

#19 Abuse do carregamento assíncrono

#20 Otimize o First-View

#21 Design performático

N U SB Ô ! !!

#22 Automatize

#23 Use ferramentas de diagnóstico

#24 Pré-carregue componentes

#25 Escreva código eﬁciente

#26 Dispare logo o onload

Diminua o tamanhodos requests

Diminua o tamanhodos requests S Diminuaa quantidade de requests

Diminua Priorize o tamanho carregamentodos requests e renderização S Diminuaa quantidade de requests

Diminua Priorize o tamanho carregamentodos requests e renderização S S Diminua Performance éa quantidade medida pela de requests percepção do usuário

#1 Fácil e rápido, faça já!#2 Importante, mas não trivial#3 Desaﬁador e eﬁcaz

Obrigado! sergio.lopes@caelum.com.br facebook.com/ sergio.caelum@sergio_caelum

Post completo sobre a palestra:http://bit.ly/n0e40x

http://blog.caelum.com.br	19046
http://vosiro.com	93
http://candidosalesg.wordpress.com	45
http://paper.li	9
http://twitter.com	7
http://webcache.googleusercontent.com	7
http://candidosg.com	5
http://www.jardelmorais.com	4
http://www.plugmasters.com.br	3
http://flavors.me	3
http://us-w1.rockmelt.com	2
http://www.cleancss.com	2
http://translate.google.com	1
http://notify.bluecoat.com	1
http://webcache-exp-test.googleusercontent.com	1

[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites

by Caelum on Sep 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 19,229

Statistics

[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites — Presentation Transcript