SlideShare uma empresa Scribd logo
PERFORMANCE
FRONT-END
   Beaga JS - 02/03/2013
GIOVANNI KEPPELEN
FRONT-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 MORE
THAN A FEATURE. SPEED IS THE
 MOST IMPORTANT FEATURE.”

                                                                     Fred Wilson


   http://www.businessinsider.com/10-golden-principles-successful-web-apps-2010-3
E AI? COMO FAZER MEUS
USUÁ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 nenhuma)
* Código redundante
* Crescimento muito acelerado
* Novos Serviços
PRECISAMOS FAZER ALGO!!!


   MAS O QUE É MAIS
     IMPORTANTE?
OTIMIZAR
DEFINIR PADRÕES
  REUTILIZAR
   AGILIZAR
 DOCUMENTAR
OTIMIZAR
DEFINIR 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 mais tempo para criar coisas novas.
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óstico
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)
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 dar conta dos acessos.

           * Load da página em 8s a 10s. Inaceitável :-)
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.
2 - ARQUIVOS ESTÁTICOS
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.
2 - ARQUIVOS ESTÁTICOS
       REQUESTS CSS/JS




  SquishIt
       MAS..... PORQUE....
2 - ARQUIVOS ESTÁTICOS
            REQUESTS CSS/JS



 UglifyJS          LESS
                 Compiler
   YUI                 Compiler
Compressor             (Google)
2 - ARQUIVOS ESTÁTICOS
                  REQUESTS CSS/JS




FÁ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 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.
2 - ARQUIVOS ESTÁTICOS
              REQUESTS IMAGENS




Lazy 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
 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.
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 estáticos para 2

  * Economia de $16.000,00 de servidores por dia
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 ou
trabalhando 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
SEMPRE
PENSE EM
PERFORMANCE
  NÃO IMPORTA A COMPLEXIDADE DE APLICAÇÃO
FONTES

               Steve Sounders
Performance Best Practices - Google Developers

Performance Best Practices - Yahoo Developers

              Nicholas C. Zakas

                Marcel Duran

               Stoyan Stefanov
GITHUB.COM/KEPPELEN
Obrigado!
  @KEPPELEN

Mais conteúdo relacionado

Mais procurados

Meetup Wordpress SEO - Porto Janeiro 2015
Meetup Wordpress SEO - Porto Janeiro 2015Meetup Wordpress SEO - Porto Janeiro 2015
Meetup Wordpress SEO - Porto Janeiro 2015
Miguel Brandão
 
Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
Dan Vitoriano
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
Diego Narducci
 
Sweet Child O' Themes
Sweet Child O' ThemesSweet Child O' Themes
Sweet Child O' Themes
Breno Alves
 
Blog
BlogBlog
Blog
jumatdu
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
Dan Vitoriano
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Toninho Sousa
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
E-Commerce Brasil
 
XPT Framework
XPT FrameworkXPT Framework
XPT Framework
Alexsandro Pereira
 
Do marketplace ao WordPress - WordCamp BH 2015
Do marketplace ao WordPress -  WordCamp BH 2015Do marketplace ao WordPress -  WordCamp BH 2015
Do marketplace ao WordPress - WordCamp BH 2015
Fellyph Cintra
 
Word press
Word pressWord press
Word press
Leonardo Mello
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
Carlos Santos
 
Qualidade no Desenvolvimento utilizando WordPress
Qualidade no Desenvolvimento utilizando WordPressQualidade no Desenvolvimento utilizando WordPress
Qualidade no Desenvolvimento utilizando WordPress
Lorain Pazzetto
 
Otimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo MobileOtimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo Mobile
Caelum
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
José Barbosa
 
TDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor em .Net Core
TDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor  em .Net CoreTDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor  em .Net Core
TDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor em .Net Core
tdc-globalcode
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Paolo Almeida
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
Fellyph Cintra
 
SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA
SEO –  A PEÇA CHAVE DO QUEBRA-CABEÇASEO –  A PEÇA CHAVE DO QUEBRA-CABEÇA
SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA
Leonardo Ferreira
 
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Andre Baltieri
 

Mais procurados (20)

Meetup Wordpress SEO - Porto Janeiro 2015
Meetup Wordpress SEO - Porto Janeiro 2015Meetup Wordpress SEO - Porto Janeiro 2015
Meetup Wordpress SEO - Porto Janeiro 2015
 
Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
Sweet Child O' Themes
Sweet Child O' ThemesSweet Child O' Themes
Sweet Child O' Themes
 
Blog
BlogBlog
Blog
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
 
XPT Framework
XPT FrameworkXPT Framework
XPT Framework
 
Do marketplace ao WordPress - WordCamp BH 2015
Do marketplace ao WordPress -  WordCamp BH 2015Do marketplace ao WordPress -  WordCamp BH 2015
Do marketplace ao WordPress - WordCamp BH 2015
 
Word press
Word pressWord press
Word press
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 
Qualidade no Desenvolvimento utilizando WordPress
Qualidade no Desenvolvimento utilizando WordPressQualidade no Desenvolvimento utilizando WordPress
Qualidade no Desenvolvimento utilizando WordPress
 
Otimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo MobileOtimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo Mobile
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
TDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor em .Net Core
TDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor  em .Net CoreTDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor  em .Net Core
TDC2018SP | Trilha .Net - Crie SPAs com Razor e C# usando Blazor em .Net Core
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
 
SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA
SEO –  A PEÇA CHAVE DO QUEBRA-CABEÇASEO –  A PEÇA CHAVE DO QUEBRA-CABEÇA
SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA
 
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
 

Semelhante a Performance Front-end

Segredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App ManifestSegredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App Manifest
Eduardo Matos
 
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
iMasters
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
Anderson Aguiar
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
Luiz Tanure
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Gustavo Corrêa Alves
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud Platform
André Paulovich
 
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load TimeConstruindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
João Moura
 
temp EWP
temp EWPtemp EWP
temp EWP
Leonardo Balter
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Marcelo Marques Gonçalves
 
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
Levy Carneiro Jr.
 
Building Scalable Applications
Building Scalable ApplicationsBuilding Scalable Applications
Building Scalable Applications
racx
 
Ux for Developers - Build Better Products
Ux for Developers - Build Better ProductsUx for Developers - Build Better Products
Ux for Developers - Build Better Products
Pedro Marques
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
Flávio Lisboa
 
Por que investir em performance Front-End?
Por que investir em performance Front-End?Por que investir em performance Front-End?
Por que investir em performance Front-End?
Luiz Oliveira
 
VRaptor - Ciclo CASIN 2011
VRaptor - Ciclo CASIN 2011VRaptor - Ciclo CASIN 2011
VRaptor - Ciclo CASIN 2011
Daniel Kist
 
Speed up! Critical css to the rescue
Speed up! Critical css to the rescueSpeed up! Critical css to the rescue
Speed up! Critical css to the rescue
melidevelopers
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
Silvio Dias
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnica
Silvio Dias
 
PORTUGUESE SquashBrochure
PORTUGUESE SquashBrochurePORTUGUESE SquashBrochure
PORTUGUESE SquashBrochure
Andr Moura
 
Performance e otimização no wordpress
Performance e otimização no wordpressPerformance e otimização no wordpress
Performance e otimização no wordpress
Daniel Paz
 

Semelhante a Performance Front-end (20)

Segredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App ManifestSegredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App Manifest
 
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud Platform
 
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load TimeConstruindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
 
temp EWP
temp EWPtemp EWP
temp EWP
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
 
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
 
Building Scalable Applications
Building Scalable ApplicationsBuilding Scalable Applications
Building Scalable Applications
 
Ux for Developers - Build Better Products
Ux for Developers - Build Better ProductsUx for Developers - Build Better Products
Ux for Developers - Build Better Products
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
Por que investir em performance Front-End?
Por que investir em performance Front-End?Por que investir em performance Front-End?
Por que investir em performance Front-End?
 
VRaptor - Ciclo CASIN 2011
VRaptor - Ciclo CASIN 2011VRaptor - Ciclo CASIN 2011
VRaptor - Ciclo CASIN 2011
 
Speed up! Critical css to the rescue
Speed up! Critical css to the rescueSpeed up! Critical css to the rescue
Speed up! Critical css to the rescue
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnica
 
PORTUGUESE SquashBrochure
PORTUGUESE SquashBrochurePORTUGUESE SquashBrochure
PORTUGUESE SquashBrochure
 
Performance e otimização no wordpress
Performance e otimização no wordpressPerformance e otimização no wordpress
Performance e otimização no wordpress
 

Performance Front-end

  • 1. PERFORMANCE FRONT-END Beaga JS - 02/03/2013
  • 2. GIOVANNI KEPPELEN FRONT-END/COORDENADOR - MOBICARE http://github.com/keppelen/talks
  • 7. +20 Milhões usuários +22 Milhões acessos por mês +75 Milhões pageviews mês
  • 8. “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-3
  • 9.
  • 10.
  • 11. E AI? COMO FAZER MEUS USUÁRIOS FICAREM ASSIM?
  • 12. 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
  • 13. PRECISAMOS FAZER ALGO!!! MAS O QUE É MAIS IMPORTANTE?
  • 14. OTIMIZAR DEFINIR PADRÕES REUTILIZAR AGILIZAR DOCUMENTAR
  • 15.
  • 16. OTIMIZAR DEFINIR PADRÕES REUTILIZAR AGILIZAR DOCUMENTAR
  • 17. O QUE CONSEGUIMOS COM ISSO?
  • 18. 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.
  • 19. 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óstico
  • 20. 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)
  • 21. 1 - SERVIR CONTEÚDO ESTÁTICO Tecnologia usada NGINX
  • 22. 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 :-)
  • 23. 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.
  • 24. 2 - ARQUIVOS ESTÁTICOS
  • 25. 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.
  • 26. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS SquishIt MAS..... PORQUE....
  • 27. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS UglifyJS LESS Compiler YUI Compiler Compressor (Google)
  • 28. 2 - ARQUIVOS ESTÁTICOS REQUESTS CSS/JS FÁCIL, ÁGIL, FÁCIL INSTALAÇÃO, FUNCIONA PERFEITAMENTE
  • 29. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS
  • 30. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Problema!!! Problema!!! Problema!!!
  • 31. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Mas porque??
  • 32. 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.
  • 33. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Lazy Load SOLUÇÃO RÁPIDA, E PARA NOSSA APLICAÇÃO SERVIU MUITO BEM
  • 34. 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.
  • 35. 2 - ARQUIVOS ESTÁTICOS REQUESTS IMAGENS Demo
  • 36. 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
  • 37. R$ 1.000.000,00 1 Milhão de Reais SOU FODA - PICA VOANDO =]
  • 38. 1.000.000,00 1 Milhão de Reais SOU FODA - PICA VOANDO =]
  • 39. PENSEM NISSO Não importa se esteja fazendo um site institucional ou trabalhando 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
  • 40. SEMPRE PENSE EM PERFORMANCE NÃO IMPORTA A COMPLEXIDADE DE APLICAÇÃO
  • 41. FONTES Steve Sounders Performance Best Practices - Google Developers Performance Best Practices - Yahoo Developers Nicholas C. Zakas Marcel Duran Stoyan Stefanov
  • 42.