+ All Categories
Home > Technology > Need for (web) speed - Tchelinux Pelotas 2014

Need for (web) speed - Tchelinux Pelotas 2014

Date post: 04-Dec-2014
Category:
Upload: jeronimo-medina-madruga
View: 211 times
Download: 0 times
Share this document with a friend
Description:
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.
Popular Tags:
66
Need for (Web) Speed Uma introdução a Web Performance Optimization
Transcript
Page 1: Need for (web) speed - Tchelinux Pelotas 2014

Need for (Web) SpeedUma introdução a Web Performance Optimization

Page 2: Need for (web) speed - Tchelinux Pelotas 2014

Jerônimo Medina MadrugaMatheus Lorenzato Braga

Ricardo de la Rocha Ladeira

Page 3: Need for (web) speed - Tchelinux Pelotas 2014
Page 4: Need for (web) speed - Tchelinux Pelotas 2014
Page 5: Need for (web) speed - Tchelinux Pelotas 2014
Page 6: Need for (web) speed - Tchelinux Pelotas 2014
Page 7: Need for (web) speed - Tchelinux Pelotas 2014
Page 8: Need for (web) speed - Tchelinux Pelotas 2014
Page 9: Need for (web) speed - Tchelinux Pelotas 2014
Page 10: Need for (web) speed - Tchelinux Pelotas 2014
Page 11: Need for (web) speed - Tchelinux Pelotas 2014
Page 12: Need for (web) speed - Tchelinux Pelotas 2014
Page 13: Need for (web) speed - Tchelinux Pelotas 2014
Page 14: Need for (web) speed - Tchelinux Pelotas 2014
Page 15: Need for (web) speed - Tchelinux Pelotas 2014
Page 16: Need for (web) speed - Tchelinux Pelotas 2014
Page 17: Need for (web) speed - Tchelinux Pelotas 2014
Page 18: Need for (web) speed - Tchelinux Pelotas 2014
Page 19: Need for (web) speed - Tchelinux Pelotas 2014
Page 20: Need for (web) speed - Tchelinux Pelotas 2014
Page 21: Need for (web) speed - Tchelinux Pelotas 2014
Page 22: Need for (web) speed - Tchelinux Pelotas 2014
Page 23: Need for (web) speed - Tchelinux Pelotas 2014

Citando Fred Wilson:

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

Page 24: Need for (web) speed - Tchelinux Pelotas 2014
Page 25: Need for (web) speed - Tchelinux Pelotas 2014

WPO

Web Perfomance Optimization

Page 26: Need for (web) speed - Tchelinux Pelotas 2014

FEO

Front End Optimization

Page 27: Need for (web) speed - Tchelinux Pelotas 2014
Page 28: Need for (web) speed - Tchelinux Pelotas 2014

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

Page 29: Need for (web) speed - Tchelinux Pelotas 2014
Page 30: Need for (web) speed - Tchelinux Pelotas 2014
Page 31: Need for (web) speed - Tchelinux Pelotas 2014
Page 32: Need for (web) speed - Tchelinux Pelotas 2014
Page 33: Need for (web) speed - Tchelinux Pelotas 2014
Page 34: Need for (web) speed - Tchelinux Pelotas 2014

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

Page 35: Need for (web) speed - Tchelinux Pelotas 2014

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

Page 36: Need for (web) speed - Tchelinux Pelotas 2014

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

Page 37: Need for (web) speed - Tchelinux Pelotas 2014

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

Page 38: Need for (web) speed - Tchelinux Pelotas 2014

As principais regras para uma boa perfomance web

#25 – Escreva código eficiente#26 – Dispare logo o onload

E saiba quando quebrar as regras!

Page 39: Need for (web) speed - Tchelinux Pelotas 2014
Page 40: Need for (web) speed - Tchelinux Pelotas 2014
Page 41: Need for (web) speed - Tchelinux Pelotas 2014
Page 42: Need for (web) speed - Tchelinux Pelotas 2014
Page 43: Need for (web) speed - Tchelinux Pelotas 2014
Page 44: Need for (web) speed - Tchelinux Pelotas 2014
Page 45: Need for (web) speed - Tchelinux Pelotas 2014
Page 46: Need for (web) speed - Tchelinux Pelotas 2014
Page 47: Need for (web) speed - Tchelinux Pelotas 2014
Page 48: Need for (web) speed - Tchelinux Pelotas 2014
Page 49: Need for (web) speed - Tchelinux Pelotas 2014
Page 50: Need for (web) speed - Tchelinux Pelotas 2014
Page 51: Need for (web) speed - Tchelinux Pelotas 2014
Page 52: Need for (web) speed - Tchelinux Pelotas 2014

Ferramentas ligadas a WPO

http://sebastien.godard.pagesperso-orange.fr/http://getfirebug.com/https://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/http://www.webpagetest.org/http://www.softwareishard.com/blog/netexport/http://www.softwareishard.com/har/viewer/http://pgtune.leopard.in.ua/

Page 53: Need for (web) speed - Tchelinux Pelotas 2014

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

Page 54: Need for (web) speed - Tchelinux Pelotas 2014

Leituras recomendadas

Page 55: Need for (web) speed - Tchelinux Pelotas 2014
Page 56: Need for (web) speed - Tchelinux Pelotas 2014
Page 57: Need for (web) speed - Tchelinux Pelotas 2014

Leituras recomendadas

http://developer.yahoo.com/performance/rules.htmlhttps://developers.google.com/speed/docs/best-practices/rules_introhttp://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-lopeshttp://www.webperformancetoday.com/http://www.bookofspeed.com/http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

Page 58: Need for (web) speed - Tchelinux Pelotas 2014
Page 60: Need for (web) speed - Tchelinux Pelotas 2014

Referências

https://www.flickr.com/photos/91369701@N00/473868198/in/photostream/https://www.flickr.com/photos/fulbert05/3099175563/http://upload.wikimedia.org/wikipedia/commons/5/57/Who_is_it.pnghttp://topnews.in/sports/files/Dida-goalkw334.jpghttp://i.ytimg.com/vi/35JBKDm1qmE/hqdefault.jpghttp://itsthelife.typepad.com/Nsmb-mystery-block.jpghttp://www.planet-science.com/umbraco/ImageGen.ashx?image=/media/113640/sprinter_92373968.jpg&width=600&constrain=true

Page 61: Need for (web) speed - Tchelinux Pelotas 2014

Referências

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

Page 62: Need for (web) speed - Tchelinux Pelotas 2014

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.jpghttp://www.careerealism.com/home/jtodonnell/careerealism.com/wp-content/uploads/2010/12/12.17.10-Career-Fulfillment-Why-it-Matters.jpghttp://www.breathofoptimism.com/wp-content/uploads/2014/06/the-golden-rule.gifhttp://upload.wikimedia.org/wikipedia/commons/f/f4/20060513_toolbox.jpg

Page 63: Need for (web) speed - Tchelinux Pelotas 2014

Referências

http://akamaicovers.oreilly.com/images/9780596529307/cat.gifhttp://en.hdyo.org/assets/ask-question-3-049ac6f2a4e25267fa670b61ee734100.jpghttps://talesfrom1lhell.files.wordpress.com/2014/08/thankyou.jpg

Page 64: Need for (web) speed - Tchelinux Pelotas 2014
Page 65: Need for (web) speed - Tchelinux Pelotas 2014
Page 66: Need for (web) speed - Tchelinux Pelotas 2014

Recommended