Este documento apresenta 25 regras principais para otimizar o desempenho de sites web, como habilitar GZIP, minificar arquivos, otimizar imagens e carregar scripts no final da página. A velocidade é a característica mais importante para sites, de acordo com Fred Wilson. Ferramentas como YSlow e PageSpeed Insights podem ajudar a diagnosticar problemas de desempenho.

1. Need for (Web) Speed
Uma introdução a Web Performance Optimization

2. Jerônimo Medina Madruga
Matheus Lorenzato Braga
Ricardo de la Rocha Ladeira

23. Citando Fred Wilson:
“Em primeiro lugar, acreditamos que a
velocidade é mais do que mais uma
característica. A velocidade é a
característica mais importante”

25. WPO
Web Perfomance
Optimization

26. FEO
Front End Optimization

28. A regra de ouro da Otimização de
Performance Web
“80-90% do tempo de resposta do
usuário final é gasto no frontend.
Comece por aí.”
Steve Souders

34. As principais regras para uma boa
perfomance web
#1 – Habilite GZIP
#2 – Minifique JavaScript
#3 – Minifique CSS
#4 – Comprima o HTML
#5 – Não redimensione imagens no
HTML
#6 – Otimize as imagens

35. As principais regras para uma boa
perfomance web
#7 – Pense no formato das imagens
#8 – Diminua cookies e headers
#9 – Junte arquivos JavaScript
#10 – Juntar arquivos CSS
#11 – Use Sprites
#12 – Use Data URIs
#13 – Configure os headers

36. As principais regras para uma boa
perfomance web
#14 – Tire firulas do design
#15 – Especifique o tamanho das
imagens
#16 – Coloque o JavaScript no fim
#17 – Coloque o CSS no topo
#18 e #19 – Adie o carregamento do
que puder e Abuse do carregamento
assíncrono

37. As principais regras para uma boa
perfomance web
#20 – Otimize o First-View e o Above
the Fold Time
#21 – Design performático
#22 – Automatize
#23 – Use ferramentas de
diagnóstico
#24 – Pré-carregue componentes

38. As principais regras para uma boa
perfomance web
#25 – Escreva código eficiente
#26 – Dispare logo o onload
E saiba quando quebrar as regras!

52. Ferramentas ligadas a WPO
http://sebastien.godard.pagesperso-orange.fr/
http://getfirebug.com/
https://developer.yahoo.com/yslow/
https://developers.google.com/speed/pagespee
d/
http://www.webpagetest.org/
http://www.softwareishard.com/blog/netexport/
http://www.softwareishard.com/har/viewer/
http://pgtune.leopard.in.ua/

53. Ferramentas ligadas a WPO
http://www.smushit.com/ysmush.it/
https://developers.google.com/speed/webp/
http://akamai.com/stateoftheinternet/
http://httparchive.org/
https://code.google.com/p/zopfli/
https://developers.google.com/speed/spdy/
http://httpd.apache.org/docs/2.2/programs/ab.h
tml

54. Leituras recomendadas

57. Leituras recomendadas
http://developer.yahoo.com/performance/rules.html
https://developers.google.com/speed/docs/best-practices/
rules_intro
http://www.stevesouders.com/blog/
http://www.phpied.com/
http://blog.radware.com/author/tammye/
http://pt.slideshare.net/caelumdev/frontinbh-2012-por-uma-web-
mais-rpida-tcnicas-de-otimizaes-de-sites-por-srgio-lopes
http://www.webperformancetoday.com/
http://www.bookofspeed.com/
http://kylerush.net/blog/meet-the-obama-campaigns-250-
million-fundraising-platform/

59. Contatos
jeronimo.madruga@gmail.com
matheuslbraga@gmail.com
ricardo.delarocha@gmail.com

60. Referências
https://www.flickr.com/photos/91369701@N00/4738681
98/in/photostream/
https://www.flickr.com/photos/fulbert05/3099175563/
http://upload.wikimedia.org/wikipedia/commons/5/57/W
ho_is_it.png
http://topnews.in/sports/files/Dida-goalkw334.jpg
http://i.ytimg.com/vi/35JBKDm1qmE/hqdefault.jpg
http://itsthelife.typepad.com/Nsmb-mystery-block.jpg
http://www.planet-science.
com/umbraco/ImageGen.ashx?image=/media/1
13640/sprinter_92373968.jpg&width=600&constrain=tru
e

61. Referências
http://wfiles.brothersoft.com/f/ferrari-458-italia-2011-
fast_117909-1920x1200.jpg
http://cache-assets.
flogao.com.br/s40/13/01/07/69/90209583.jpg
http://www.duremais.com/blog/files/2013/01/Ejacula%C
3%A7%C3%A3o-precoce-n%C3%A3o-precisa-ser-um-problema.
jpg
http://www.gabichanas.com/pequenograndeamor/wp-content/
uploads/sites/6/2014/09/sorteio-capa.jpg
http://3.bp.blogspot.com/-UxqxYTV-sfE/
ULA14kfxtyI/AAAAAAAABxY/Xi5gighQ5k0/s1600/In
trepidas+Aventuras+de+um+Jovem+Executivo_Daniel
+Pink.jpg

62. Referências
http://i1.zst.com.br/images/desenvolvimento-de-grandes-
aplicacoes-web-produzindo-codigo-capaz-de-crescer-
e-evoluir-loudon-kyle-9788575222515-
photo14352464-12-16-10.jpg
http://www.careerealism.com/home/jtodonnell/careerea
lism.com/wp-content/uploads/2010/12/12.17.10-Career-
Fulfillment-Why-it-Matters.jpg
http://www.breathofoptimism.com/wp-content/
uploads/2014/06/the-golden-rule.gif
http://upload.wikimedia.org/wikipedia/commons/f/f4/20
060513_toolbox.jpg

63. Referências
http://akamaicovers.oreilly.com/images/9780596529307
/cat.gif
http://en.hdyo.org/assets/ask-question-3-
049ac6f2a4e25267fa670b61ee734100.jpg
https://talesfrom1lhell.files.wordpress.com/2014/08/tha
nkyou.jpg