Conexões mais velozes. Computadores mais potentes. Latências cada vez menores. Mesmo com toda essa evolução tecnológica, muito sites ainda conseguem ficar mais lentos com o passar do tempo. O que fazer para solucionar esse problema? A resposta é simples: Web Performance Optimization (WPO). Um nicho que agrega técnicas e ferramentas que comprovadamente tem um impacto benéfico ao tempo de resposta de sites. Esta palestra será uma apresentação dos principais conceitos envolvendo WPO, além de apresentar alguns casos práticos de como identificar os gargalos e otimizar o desempenho de um site.

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

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

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

24. WPO
Web Perfomance
Optimization

25. FEO
Front End Optimization

27. 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

33. 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

34. 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

35. 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

36. 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

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

51. 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/

52. 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

53. Leituras recomendadas

56. 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/

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

59. 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/113640/sprinter_92373968.jpg&width=60
0&constrain=true

60. 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
%C3%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+

61. 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

62. 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