Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016

208 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
208
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Need for (web) speed: Uma introdução a otimização de velocidade de sites e Web Apps - Tchelinux Bagé 2016

  1. 1. Need for (Web) Speed: Reloaded Uma introdução a Web Performance Optimization
  2. 2. Jerônimo Medina Madruga Matheus Lorenzato Braga Ricardo de la Rocha Ladeira
  3. 3. Citando Fred Wilson: “Em primeiro lugar, acreditamos que a velocidade é mais do que mais uma característica. A velocidade é a característica mais importante”
  4. 4. WPO Web Perfomance Optimization
  5. 5. FEO Front End Optimization
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. As principais regras para uma boa perfomance web #25 – Escreva código eficiente #26 – Dispare logo o onload E saiba quando quebrar as regras!
  12. 12. 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/
  13. 13. 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
  14. 14. Leituras recomendadas
  15. 15. 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/
  16. 16. Contatos jeronimo.madruga@gmail.com matheuslbraga@gmail.com ricardo.delarocha@gmail.com
  17. 17. 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
  18. 18. 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+
  19. 19. 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
  20. 20. 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

×