Successfully reported this slideshow.
PERFORMANCEFRONT-END   Beaga JS - 02/03/2013
GIOVANNI KEPPELENFRONT-END/COORDENADOR - MOBICARE      http://github.com/keppelen/talks
http://braziljs.org
http://frontinbh.com.br
http://riojs.org
http://mobicare.com.br
+20 Milhões usuários+22 Milhões acessos por mês+75 Milhões pageviews mês
“1 - FIRST AND FOREMOST, WE BELIEVE THAT SPEED IS MORETHAN A FEATURE. SPEED IS THE MOST IMPORTANT FEATURE.”               ...
E AI? COMO FAZER MEUSUSUÁRIOS FICAREM ASSIM?
COMO ERA?                    ERA TRISTE MESMO.* Load página em 9.5s* Vários e vários padrões* Pouca documentação (quase ne...
PRECISAMOS FAZER ALGO!!!   MAS O QUE É MAIS     IMPORTANTE?
OTIMIZARDEFINIR PADRÕES  REUTILIZAR   AGILIZAR DOCUMENTAR
OTIMIZARDEFINIR PADRÕES  REUTILIZAR   AGILIZAR DOCUMENTAR
O QUE CONSEGUIMOS COM         ISSO?
O QUE CONSEGUIMOS COM          ISSO?* Aumento de 70% na criação de novas páginas e manutenção do código* Com isso temos ma...
TANTAS REGRAS O QUE FAZER?Habilite GZIP                      Junte arquivos JavascriptMinifique Javascript               J...
ANALISANDO A APLICAÇÃO    Concluimos que fazer os seguintes tópicos traria resultado, e                  seria de grande i...
1 - SERVIR CONTEÚDO ESTÁTICO        Tecnologia usada NGINX
1 - SERVIR CONTEÚDO ESTÁTICO           * Isso era o “pecado” de nossa aplicação.* Era necessário 20 a 45 servidores para d...
1 - SERVIR CONTEÚDO ESTÁTICO                  O que ganhamos com isso? * Diminuimos requisições ao banco, agora ao invés d...
2 - ARQUIVOS ESTÁTICOS
2 - ARQUIVOS ESTÁTICOS Nossa aplicação tinha mais de 4 arquivos JS na página para serexecutado. Na maioria das vezes, eram...
2 - ARQUIVOS ESTÁTICOS       REQUESTS CSS/JS  SquishIt       MAS..... PORQUE....
2 - ARQUIVOS ESTÁTICOS            REQUESTS CSS/JS UglifyJS          LESS                 Compiler   YUI                 Co...
2 - ARQUIVOS ESTÁTICOS                  REQUESTS CSS/JSFÁCIL, ÁGIL, FÁCIL INSTALAÇÃO, FUNCIONA PERFEITAMENTE
2 - ARQUIVOS ESTÁTICOS      REQUESTS IMAGENS
2 - ARQUIVOS ESTÁTICOS      REQUESTS IMAGENS      Problema!!!  Problema!!!Problema!!!
2 - ARQUIVOS ESTÁTICOS      REQUESTS IMAGENS Mas porque??
2 - ARQUIVOS ESTÁTICOS                  REQUESTS IMAGENS   * O carregamento das imagens era o que mais tinhaproblemas, poi...
2 - ARQUIVOS ESTÁTICOS              REQUESTS IMAGENSLazy Load  SOLUÇÃO RÁPIDA, E PARA NOSSA APLICAÇÃO SERVIU MUITO BEM
2 - ARQUIVOS ESTÁTICOS                    REQUESTS IMAGENS Lazy Load é um plugin jQuery. Ele atrasa o carregamento das ima...
2 - ARQUIVOS ESTÁTICOS      REQUESTS IMAGENS    Demo
O QUE CONSEGUIMOS COM         ISSO? * First View para 4s - Second View para menos de 2.5s     * de 10 request de arquivos ...
R$ 1.000.000,00 1 Milhão de Reais      SOU FODA - PICA VOANDO =]
1.000.000,00 1 Milhão de Reais      SOU FODA - PICA VOANDO =]
PENSEM NISSO     Não importa se esteja fazendo um site institucional outrabalhando em um grande portal, mesmo que a quanti...
SEMPREPENSE EMPERFORMANCE  NÃO IMPORTA A COMPLEXIDADE DE APLICAÇÃO
FONTES               Steve SoundersPerformance Best Practices - Google DevelopersPerformance Best Practices - Yahoo Develo...
GITHUB.COM/KEPPELEN
Obrigado!  @KEPPELEN
Performance Front-end
Performance Front-end
Performance Front-end
Performance Front-end
Upcoming SlideShare
Loading in …5
×

Performance Front-end

1,435 views

Published on

Published in: Technology

Performance Front-end

  1. 1. PERFORMANCEFRONT-END Beaga JS - 02/03/2013
  2. 2. GIOVANNI KEPPELENFRONT-END/COORDENADOR - MOBICARE http://github.com/keppelen/talks
  3. 3. http://braziljs.org
  4. 4. http://frontinbh.com.br
  5. 5. http://riojs.org
  6. 6. http://mobicare.com.br
  7. 7. +20 Milhões usuários+22 Milhões acessos por mês+75 Milhões pageviews mês
  8. 8. “1 - FIRST AND FOREMOST, WE BELIEVE THAT SPEED IS MORETHAN A FEATURE. SPEED IS THE MOST IMPORTANT FEATURE.” Fred Wilson http://www.businessinsider.com/10-golden-principles-successful-web-apps-2010-3
  9. 9. E AI? COMO FAZER MEUSUSUÁRIOS FICAREM ASSIM?
  10. 10. 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ços
  11. 11. PRECISAMOS FAZER ALGO!!! MAS O QUE É MAIS IMPORTANTE?
  12. 12. OTIMIZARDEFINIR PADRÕES REUTILIZAR AGILIZAR DOCUMENTAR
  13. 13. OTIMIZARDEFINIR PADRÕES REUTILIZAR AGILIZAR DOCUMENTAR
  14. 14. O QUE CONSEGUIMOS COM ISSO?
  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.
  16. 16. TANTAS REGRAS O QUE FAZER?Habilite GZIP Junte arquivos JavascriptMinifique Javascript Junte arquivos CSSMinifique CSS Use SpritesComprima HTML Coloque o Javascript no fimNão redimensione imagens no HTML Coloque o CSS no topoOtimize as imagens Adie o carregamento do que puderPense no formato das imagens Otimize o First-ViewDiminua Cookies e headers Use ferramentas de diagnóstico
  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” entrasseou desse F5 na página.2 - Minificar e juntar arquivos CSS/JS3 - Diminuir requests (img)
  18. 18. 1 - SERVIR CONTEÚDO ESTÁTICO Tecnologia usada NGINX
  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 :-)
  20. 20. 1 - SERVIR CONTEÚDO ESTÁTICO O que ganhamos com isso? * Diminuimos requisições ao banco, agora ao invés de ir nobanco 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.
  21. 21. 2 - ARQUIVOS ESTÁTICOS
  22. 22. 2 - ARQUIVOS ESTÁTICOS Nossa aplicação tinha mais de 4 arquivos JS na página para serexecutado. Na maioria das vezes, eram chamados arquivos que não estavam sendo utilizados.
  23. 23. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS SquishIt MAS..... PORQUE....
  24. 24. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS UglifyJS LESS Compiler YUI CompilerCompressor (Google)
  25. 25. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JSFÁCIL, ÁGIL, FÁCIL INSTALAÇÃO, FUNCIONA PERFEITAMENTE
  26. 26. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS
  27. 27. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Problema!!! Problema!!!Problema!!!
  28. 28. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Mas porque??
  29. 29. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS * O carregamento das imagens era o que mais tinhaproblemas, 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.
  30. 30. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENSLazy Load SOLUÇÃO RÁPIDA, E PARA NOSSA APLICAÇÃO SERVIU MUITO BEM
  31. 31. 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 asimagnes que estiver na viewport. O que ganhamos isso? Reduzir a carga no servidor.
  32. 32. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Demo
  33. 33. O QUE CONSEGUIMOS COM ISSO? * First View para 4s - Second View para menos de 2.5s * de 10 request de arquivos estáticos para 2 * Economia de $16.000,00 de servidores por dia
  34. 34. R$ 1.000.000,00 1 Milhão de Reais SOU FODA - PICA VOANDO =]
  35. 35. 1.000.000,00 1 Milhão de Reais SOU FODA - PICA VOANDO =]
  36. 36. PENSEM NISSO Não importa se esteja fazendo um site institucional outrabalhando em um grande portal, mesmo que a quantidade de acessos a seu site/portal seja pequena. SEMPRE e SEMPRE pensem em performance, SEMPRE. GIOVANNI KEPPELEN
  37. 37. SEMPREPENSE EMPERFORMANCE NÃO IMPORTA A COMPLEXIDADE DE APLICAÇÃO
  38. 38. FONTES Steve SoundersPerformance Best Practices - Google DevelopersPerformance Best Practices - Yahoo Developers Nicholas C. Zakas Marcel Duran Stoyan Stefanov
  39. 39. GITHUB.COM/KEPPELEN
  40. 40. Obrigado! @KEPPELEN

×