Potencial de Vendas do e-Commerce no Frontend - WOB2012

623 views
545 views

Published on

Palestra realizada no WOB2012

Published in: Technology

Potencial de Vendas do e-Commerce no Frontend - WOB2012

  1. 1. Leo Balter WOB 2012 Frontend + e-commerce Mozilla Rep
  2. 2. FrontEnd? • HTML • CSS • JavaScript
  3. 3. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  4. 4. Performance
  5. 5. Performance
  6. 6. 3 regras básicas OMU• Otimizar• Minimizar• Unir @keppelen http://bygiovanni.com.br/talks/performance/#10
  7. 7. • Otimizar compressão ao • Otimizar outros habilitar GZIP carregamentos• Otimizar dimensões de • Otimizar First-View imagens no HTML • Minimizar JavaScript• Otimizar compressão Imagens sem perda de qualidade • Minimizar CSS• Otimizar formato das imagens • Minimizar HTML• Otimizar Cookies e Headers • Unir arquivos JS• Otimizar carregamento do JS • Unir arquivos CSS• Otimizar carregamento do • Unir Imagens em Background CSS Sprites
  8. 8. • 3MB para 287K• Redução de custos em Servidores: R$ 16.000.00/dia• 7.5s para 4.3s• -3.3s ~= aumento de receita em R$ 1.000.000,00/dia!
  9. 9. http://goo.gl/zSd8q
  10. 10. • +100ms = -1% de vendas http://goo.gl/zSd8q
  11. 11. • +100ms = -1% de vendas• vendas ~= $67 milhões/dia http://goo.gl/zSd8q
  12. 12. • +100ms = -1% de vendas• vendas ~= $67 milhões/dia• 1seg = - $2.4 bilhões por ano! http://goo.gl/zSd8q
  13. 13. Otimizar
  14. 14. Minimizarfunction f(a, b, c, d, e) { function f(a,b,c){var f,g,h,i;function j() var q; {}function k(){}g=10,f=20;for(h=1;h<10;+ var w; +h)i=j(a);for(h=0;h<1;++h)i=k(c)} w = 10; q = 20; for (var i = 1; i < 10; ++i) { var boo = foo(a); } for (var i = 0; i < 1; ++i) { var boo = bar(c); } function foo(){ /*...*/ } function bar(){ /*...*/ } function baz(){ /*...*/ }}
  15. 15. http://pimpmyjs.com
  16. 16. Unir• 13 arquivos• 729KB• 4,46 segundos
  17. 17. • 2 arquivos• 729KB• 1,87 segundos
  18. 18. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  19. 19. Manutenção• Manutenção é dolorosa• Nenhum desenvolvedor gosta
  20. 20. Projeto ideal• Crossbrowser• Flexível• Customizável
  21. 21. 1 milhão de bootstraps“Bootstraps são documentações de módulos eelementos de interface de projetos. Eventualmenteeles são disponibilizados como projetos Open Source.” http://ht.ly/dT0cW
  22. 22. • Peixe Urbano Bootstrap• Abril Bootstrap• Skeleton• 99line• ...
  23. 23. Documentação• Grid• Tipografia• Tabelas• Botões• Formulários
  24. 24. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  25. 25. Testing Sucks!Como você testa o que faz? Mexe e vê?
  26. 26. “Testar código é minimizar riscos.” http://ht.ly/dT2OH
  27. 27. Alto Ri sc o C Ri rí t sc ico o deOcorrência Ri ní sc ve o ml de éd ba io ix o ní ve Baixo l Baixo Impacto Alto Gerenciamento de Risco http://bit.ly/11tTwN
  28. 28. FuncionaFaz o que deveria
  29. 29. PerformanceCarrinho de Compras Novos projetos...
  30. 30. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  31. 31. “Todo e-commerce expõe seupotencial através de um bom trabalho no frontend” http://ht.ly/dTc2S
  32. 32. Obrigado!Contatos: Agradecimentos: • @garu_rj• @leobalter • @bernarddeluna• leo@balter.com.br • @jaydson

×