Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performance Front-end | Front In Maceió

1,589 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

×