need for (web) speed: uma introdução a otimização de velocidade de sites e web apps - tchelinux...
TRANSCRIPT
![Page 1: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/1.jpg)
Need for (Web) Speed: ReloadedUma introdução a Web Performance Optimization
![Page 2: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/2.jpg)
Jerônimo Medina MadrugaMatheus Lorenzato Braga
Ricardo de la Rocha Ladeira
![Page 3: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/3.jpg)
![Page 4: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/4.jpg)
![Page 5: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/5.jpg)
![Page 6: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/6.jpg)
![Page 7: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/7.jpg)
![Page 8: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/8.jpg)
![Page 9: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/9.jpg)
![Page 10: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/10.jpg)
![Page 11: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/11.jpg)
![Page 12: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/12.jpg)
![Page 13: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/13.jpg)
![Page 14: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/14.jpg)
![Page 15: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/15.jpg)
![Page 16: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/16.jpg)
![Page 17: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/17.jpg)
![Page 18: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/18.jpg)
![Page 19: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/19.jpg)
![Page 20: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/20.jpg)
![Page 21: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/21.jpg)
![Page 22: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/22.jpg)
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 23: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/23.jpg)
![Page 24: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/24.jpg)
WPO
Web Perfomance Optimization
![Page 25: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/25.jpg)
FEO
Front End Optimization
![Page 26: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/26.jpg)
![Page 27: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/27.jpg)
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 28: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/28.jpg)
![Page 29: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/29.jpg)
![Page 30: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/30.jpg)
![Page 31: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/31.jpg)
![Page 32: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/32.jpg)
![Page 33: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/33.jpg)
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 34: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/34.jpg)
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 35: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/35.jpg)
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 36: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/36.jpg)
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 37: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/37.jpg)
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 38: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/38.jpg)
![Page 39: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/39.jpg)
![Page 40: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/40.jpg)
![Page 41: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/41.jpg)
![Page 42: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/42.jpg)
![Page 43: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/43.jpg)
![Page 44: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/44.jpg)
![Page 45: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/45.jpg)
![Page 46: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/46.jpg)
![Page 47: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/47.jpg)
![Page 48: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/48.jpg)
![Page 49: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/49.jpg)
![Page 50: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/50.jpg)
![Page 51: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/51.jpg)
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 52: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/52.jpg)
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 53: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/53.jpg)
Leituras recomendadas
![Page 54: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/54.jpg)
![Page 55: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/55.jpg)
![Page 56: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/56.jpg)
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 57: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/57.jpg)
![Page 59: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/59.jpg)
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 60: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/60.jpg)
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 61: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/61.jpg)
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 62: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/62.jpg)
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 63: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/63.jpg)
![Page 64: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/64.jpg)
![Page 65: Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016](https://reader030.vdocuments.mx/reader030/viewer/2022021500/58f354461a28abda458b45d9/html5/thumbnails/65.jpg)