Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010

Como fabricar dinheiro: Otimizações de Sites e por que isso vai deixá-lo rico

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

http://googleresearch.blogspot.com/2009/06/speed-matters.html

http://velocityconference.blip.tv/ﬁle/2279751/

http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

Tempo médio: 2 seg Tempo médio: 6 seg

Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb

Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42

Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42 Nota YSlow: 100 Nota YSlow: 67

Time on Site: 3min 17s Time on Site: 2min 33s

Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75

Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84%

Pessoas ﬁcam 21% menos tempo no site Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84%

Pessoas ﬁcam 21% menos tempo no site Time on Site: 3min 17s Pessoas veem 28% Time on Site: 2min 33s menos páginas Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84%

Pessoas ﬁcam 21% menos tempo no site Time on Site: 3min 17s Pessoas veem 28% Time on Site: 2min 33s menos páginas Average Pageview: 3.32 Average Pageview: 2.75 18% menos Conversion Rate: 2.17% Conversion Rate:1.84% contatos enviados

Como não perder dinheiro?

#1 Coloque os JavaScripts no ﬁm da página

Progressive render

#2 Coloque os CSS no <head> da página

Problema do “Flash Screen”

#3 Diminua o número de requests

Junte vários JS em um único arquivo (dinamicamente! sem POG!)

Junte vários CSS em um único arquivo (dinamicamente! sem POG!)

Use CSS Sprites

Cuidado com a área ﬁnal em pixels Difícil e chato de criar e manter

Cuidado com a área ﬁnal em pixels Difícil e chato de criar e manter Spriteme.org

#4 Conﬁgure os headers corretamente

Coloque um Expires alto

Coloque um Expires alto Conﬁgure ETag ou Date-Modiﬁed

#5 Miniﬁque o JS, CSS e HTML e habilite GZIP

27.4 kb YUI Compressor pra JS e CSS 20.1 kb 22.9 kb Google Closure Compiler pra JS 9.54 kb 54.4 kb HTML Compressor pra HTML 36.1 kb

27.4 kb YUI Compressor pra JS e CSS 20.1 kb (ou Minify, web-optimizator) 22.9 kb Google Closure Compiler pra JS 9.54 kb (ou JSMin, Packer,YUI Compressor, Minify) 54.4 kb HTML Compressor pra HTML 36.1 kb (ou Minify, web-optimizator)

27.4 kb YUI Compressor pra JS e CSS 20.1 kb 22.9 kb Google Closure Compiler pra JS 9.54 kb 54.4 kb HTML Compressor pra HTML 36.1 kb

27.4 kb YUI Compressor pra JS e CSS 20.1 kb Cacheie! 22.9 kb Ou faça em Google Closure Compiler pra JS 9.54 kb build time! 54.4 kb HTML Compressor pra HTML 36.1 kb

Habilite GZIP Tamanho sem GZIP: 219.5 kb Tamanho com GZIP: 102.3 kb

#6 Cuidado com os cookies

Sirva conteúdo estático em um domínio cookie-free yimg.com ytimg.com images-amazon.com caelumcombr.appspot.com Diminua quantidade e tamanho dos cookies

#7 Use CDNs

Content Delivery Networks

Content Delivery Networks Sua Aplicação AppEngine Akamai Amazon Cloudfront

Content Delivery Networks Recursos Sua Aplicação comuns AppEngine GoogleApis.com Akamai YahooApis.com Amazon Cloudfront Google-Analytics.com

#8 Otimize suas imagens

17.7 kb Smush.it 8.3 kb

Bonus Minimize o número de DNS lookups Paralelize downloads com vários hostnames Especiﬁque o tamanho das imagens no HTML

diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.com ferramentas modconcat, modpagespeed, Minify, PHP Speedy, Site SpeedUp,YUI Compressor, Google Closure, HTML Compressor, Smush.it, SpriteMe referências ‣ YSlow: developer.yahoo.com/performance ‣ Google Speed: code.google.com/speed ‣ O’Reilly Velocity Conference

400 ms a mais diminuíram as buscas em 0.6% 2 seg a mais diminuíram faturamento em 4.3% 67 no YSlow diminuiu em 18% o número de contatos enviados

400 ms a mais diminuíram as buscas em 0.6% 2 seg a mais diminuíram faturamento em 4.3% 67 no YSlow diminuiu em 18% o número de contatos enviados Otimizar o response-time é obrigatório

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

http://eufacoprogramas.com	328
http://horaextrabh.org	19
http://www.eufacoprogramas.com	4
http://paper.li	1

Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010

by Caelum on Nov 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 352

Statistics

Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010 — Presentation Transcript