Performance Front-end | Front In Maceió

1,558 views

Published on

Por uma web mais rápida, mostrarei um pouco como é importante a performance em uma aplicação web e como isso pode retornar grande valor para você(profissional) e empresa. Grandes dicas bobas mas que bem usadas são de grande valor.

Performance Front-end | Front In Maceió

  1. 1. PERFORMANCE FRONT-END Com resultadosegunda-feira, 29 de outubro de 12
  2. 2. GIOVANNI KEPPELEN http://github.com/keppelen/talkssegunda-feira, 29 de outubro de 12
  3. 3. http://braziljs.orgsegunda-feira, 29 de outubro de 12
  4. 4. +20 Milhões usuários +22 Milhões acessos por mês +75 Milhões pageviews mês Presente em 4 países(Brasil, Argentina Chile, México)segunda-feira, 29 de outubro de 12
  5. 5. “1 - FIRST AND FOREMOST, WE BELIEVE THAT SPEED IS MORE THAN A FEATURE. SPEED IS THE MOST IMPORTANT FEATURE.” Fred Wilson http://www.businessinsider.com/10-golden-principles-successful-web-apps-2010-3segunda-feira, 29 de outubro de 12
  6. 6. segunda-feira, 29 de outubro de 12
  7. 7. segunda-feira, 29 de outubro de 12
  8. 8. E AI? COMO FAZER MEUS USUÁRIOS FICAREM ASSIM?segunda-feira, 29 de outubro de 12
  9. 9. COMO ERA? ERA TRISTE MESMO. * Load página em 9.5s * Vários e vários padrões * Pouca documentação (quase nenhuma) * Código redundante * Crescimento muito acelerado * Novos Serviçossegunda-feira, 29 de outubro de 12
  10. 10. PRECISAMOS FAZER ALGO!!! MAS O QUE É MAIS IMPORTANTE?segunda-feira, 29 de outubro de 12
  11. 11. OTIMIZAR DEFINIR PADRÕES REUTILIZAR AGILIZAR DOCUMENTARsegunda-feira, 29 de outubro de 12
  12. 12. segunda-feira, 29 de outubro de 12
  13. 13. OTIMIZAR DEFINIR PADRÕES REUTILIZAR AGILIZAR DOCUMENTARsegunda-feira, 29 de outubro de 12
  14. 14. O QUE CONSEGUIMOS COM ISSO?segunda-feira, 29 de outubro de 12
  15. 15. O QUE CONSEGUIMOS COM ISSO? * Aumento de 70% na criação de novas páginas e manutenção do código * Com isso temos mais tempo para criar coisas novas.segunda-feira, 29 de outubro de 12
  16. 16. TANTAS REGRAS O QUE FAZER? Habilite GZIP Junte arquivos Javascript Minifique Javascript Junte arquivos CSS Minifique CSS Use Sprites Comprima HTML Coloque o Javascript no fim Não redimensione imagens no HTML Coloque o CSS no topo Otimize as imagens Adie o carregamento do que puder Pense no formato das imagens Otimize o First-View Diminua Cookies e headers Use ferramentas de diagnósticosegunda-feira, 29 de outubro de 12
  17. 17. ANALISANDO A APLICAÇÃO Concluimos que fazer os seguintes tópicos traria resultado, e seria de grande importância. 1- Servir sempre o conteúdo estático, sem ir ao banco toda vez que um “usuário” entrasse ou desse F5 na página. 2 - Minificar e juntar arquivos CSS/JS/ 3 - Diminuir requests (img)segunda-feira, 29 de outubro de 12
  18. 18. 1 - SERVIR CONTEÚDO ESTÁTICO Tecnologia usada NGINXsegunda-feira, 29 de outubro de 12
  19. 19. 1 - SERVIR CONTEÚDO ESTÁTICO * Isso era o “pecado” de nossa aplicação. * Era necessário 20 a 45 servidores para dar conta dos acessos. * Load da página em 8s a 10s. Inaceitável :-)segunda-feira, 29 de outubro de 12
  20. 20. 1 - SERVIR CONTEÚDO ESTÁTICO O que ganhamos com isso? * Diminuimos requisições ao banco, agora ao invés de ir no banco toda hora que o usuário entra no site, vamos apenas de 5 em 5min, pois alguma coisa na oferta pode ter mudado. * Dimuimos de 20/45 para apenas 5/10 servidores. * Load da página em 6 - 7s, pois agora isso já está no cache, só precisamos chamar arquivos estáticos.segunda-feira, 29 de outubro de 12
  21. 21. 2 - ARQUIVOS ESTÁTICOSsegunda-feira, 29 de outubro de 12
  22. 22. 2 - ARQUIVOS ESTÁTICOS Nossa aplicação tinha mais de 4 arquivos JS na página para ser executado. Na maioria das vezes, eram chamados arquivos que não estavam sendo utilizados.segunda-feira, 29 de outubro de 12
  23. 23. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS SquishIt MAS..... PORQUE....segunda-feira, 29 de outubro de 12
  24. 24. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS UglifyJS LESS Compiler YUI CompilerCompressor (Google)segunda-feira, 29 de outubro de 12
  25. 25. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS FÁCIL, ÁGIL, FÁCIL INSTALAÇÃO, FUNCIONA PERFEITAMENTEsegunda-feira, 29 de outubro de 12
  26. 26. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENSsegunda-feira, 29 de outubro de 12
  27. 27. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Problema!!!segunda-feira, 29 de outubro de 12
  28. 28. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Problema!!! Problema!!!segunda-feira, 29 de outubro de 12
  29. 29. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Problema!!! Problema!!! Problema!!!segunda-feira, 29 de outubro de 12
  30. 30. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Mas porque??segunda-feira, 29 de outubro de 12
  31. 31. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS * O carregamento das imagens era o que mais tinha problemas, pois eram publicada mais de 90 ofertas por dia. * Como resolver isso de forma rápida e prática? * Não podemos reescrever “back-end” para isso.segunda-feira, 29 de outubro de 12
  32. 32. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Lazy Load SOLUÇÃO RÁPIDA, E PARA NOSSA APLICAÇÃO SERVIU MUITO BEMsegunda-feira, 29 de outubro de 12
  33. 33. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Lazy Load é um plugin jQuery. Ele atrasa o carregamento das imagens. Imagens fora da viewport não será carregado antes que o usuário role a página. Isto é o oposto do pré- carregamento de imagem. Com isso o browser depois da rolagem so tera que carregar as imagnes que estiver na viewport. O que ganhamos isso? Reduzir a carga no servidor.segunda-feira, 29 de outubro de 12
  34. 34. O QUE CONSEGUIMOS COM ISSO? * First View para 5s - Second View para menos de 4s * de 10 request de arquivos estáticos para apenas 2 * Economia de $16.000,00 de servidores por diasegunda-feira, 29 de outubro de 12
  35. 35. R$ 1.000.000,00segunda-feira, 29 de outubro de 12
  36. 36. PRÓXIMOS PASSOS * Otimizar ainda mais. ( Claro =] ) * Uso de Apis HTML5/JS * Open Social APIsegunda-feira, 29 de outubro de 12
  37. 37. GITHUB.COM/KEPPELEN GITHUB.COM/PEIXEURBANOsegunda-feira, 29 de outubro de 12
  38. 38. Obrigado @KEPPELENsegunda-feira, 29 de outubro de 12

×