Upload
jeronimo-medina-madruga
View
211
Download
0
Tags:
Embed Size (px)
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.
Citation preview
Need for (Web) SpeedUma introdução a Web Performance Optimization
Jerônimo Medina MadrugaMatheus Lorenzato Braga
Ricardo de la Rocha Ladeira
Citando Fred Wilson:
“Em primeiro lugar, acreditamos que a velocidade é mais do que mais uma característica. A velocidade é a característica mais importante”
WPO
Web Perfomance Optimization
FEO
Front End Optimization
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
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
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
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
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
As principais regras para uma boa perfomance web
#25 – Escreva código eficiente#26 – Dispare logo o onload
E saiba quando quebrar as regras!
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/
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
Leituras recomendadas
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/
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
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
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
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