Globalcode – Open4educationOrganizando a casa. O front-end dojeitinho que a mamãe gosta
Globalcode – Open4educationQuem é esse aí que tá falando?11 anos de estrada.Coordenador (Um dos) do PHPSC.Analista de Sist...
Globalcode – Open4educationE vocês? O que fazem?Vamos trocar uma ideia?
Globalcode – Open4educationVocê também tem problemas dedesempenho?
Globalcode – Open4educationMuita calma nessa hora!Não otimize seu código agora!Você pode até assumir uma posturaconstrutiv...
Globalcode – Open4educationPorque tenho que otimizar?Uma otimização decente deixa um site/sistema entre50% e 90% mais rápi...
Globalcode – Open4educationSério? No front-end?A maioria (entre 80% e 90%) do tempo decarregamento e problemas de desempen...
Globalcode – Open4educationO que pode afetar ocarregamento?Imagens (Muitas imagens, imagens pesadas)Arquivos CSSArquivos J...
Globalcode – Open4educationE no servidor?O que roda no servidor também conta, masraramente é a causa do problema.
Globalcode – Open4educationO exemplo do GoogleEm 2009 o Google fez um experimento ondeexpôs a um grupo de usuários uma bus...
Globalcode – Open4educationO exemplo do portal Terra60 segundos no portal terra significam:- autenticações: 535 mil- e-mai...
Globalcode – Open4educationReduzir 1K na requisição significa:A cada 60s: 3,6GBA cada 1 hora: 180GBA cada um dia 4,2TBInfo...
Globalcode – Open4educationVamos ao o que interessa!Todas as práticas a seguir são recomendadas, masnão adote todas de uma...
Globalcode – Open4educationAntes de começar aotimizar...Conheça o Google Analytics Real TimejsPerf — JavaScript performanc...
Globalcode – Open4educationAntes de começar aotimizar...Avalie o seu site no PageSpeed InsightsInstale o plugin Yslow noFi...
Globalcode – Open4educationMínimo possível de requisições.CSS Image SpritesCausa um aumento no código CSS e JS, mascompens...
Globalcode – Open4educationOtimize a qualidade das imagens carregadas.No HTML, sempre adicione as dimensões dasimagens que...
Globalcode – Open4educationMínimo possível de requisições.Unifique arquivos JavaScript, CSS e HTML.Sempre pondere a possib...
Globalcode – Open4educationMínimo possível de requisições.13 arquivos JavaScript Diferentes729k de tamanhoTempo de carrega...
Globalcode – Open4educationMínimo possível de requisições.2 arquivos JavaScript Diferentes729k de tamanho (Os mesmos)Tempo...
Globalcode – Open4educationAgilizando o carregamentoCSS e JavaScript sempre em arquivos externos.Eles podem ser usados em ...
Globalcode – Open4educationAgilizando o carregamentoCSS no topo do código.Se necessário, coloque um arquivo com asinstruçõ...
Globalcode – Open4educationAgilizando o carregamentoArquivos JavaScript no fimComplementa a prática de manter os arquivos ...
Globalcode – Open4educationAgilizando o carregamentoMinifique arquivos JavaScript e CSS.A redução de tamanho do arquivo é ...
Globalcode – Open4educationAgilizando o carregamentoCompacte os arquivos JavaScript e CSS.Habilite o mod_deflate ou o mod_...
Globalcode – Open4educationAgilizando o carregamentoCustomize as E-tagsUtilize subdomínios para download de arquivosJavaSc...
Globalcode – Open4educationAgilizando o carregamentoUtilize um gerenciador de módulos.Evite Bad Requests.Quando possível, ...
Globalcode – Open4educationE no código JavaScript?Os livros indicados contém dezenas de práticas paraagilizar a execução d...
Globalcode – Open4educationPalavras de quem sabeModern web applications have a lot of JavaScript.Between libraries like jQ...
Globalcode – Open4educationSe o JavaScript demora para executar, seusite/sistema demora pra responder. Isso quer dizerque ...
Globalcode – Open4educationQuando o longo é longo demais?"0.1 segundo (100ms) é o tempo limite para que ousuário sinta que...
Globalcode – Open4educationCompartilhe Conhecimento!Ferramentas WikiBlogs da equipe de desenvolvimentoJavaScript Coding St...
Globalcode – Open4educationTome atitudes e assuma novas posturas
Globalcode – Open4educationObtenha apoio da direçãoSeus colegas e superiores imediatos também devem pensar da mesmaforma. ...
Globalcode – Open4educationUtilize o vocabulário adequadoA cada setor interessa ouvir os termos relativos à própria área. ...
Globalcode – Open4educationEscolha o produto certoNão escolha o produto mais importante da empresa para começar. Melhorum ...
Globalcode – Open4educationUtilize métricas confiáveisNão comece a otimizar agora, tenha calma. Estabeleça as métricasadeq...
Globalcode – Open4educationSeja apaixonado por performanceGostar só um pouquinho não fará com que seus colegas (pares esup...
Globalcode – Open4educationBusque Conhecimento (ET Bilú)Compareça a eventos.Faça parte de um grupo de usuários.Mantenha um...
Globalcode – Open4educationLeia!JavaScript de Alto DesempenhoNicholas ZakasOReilly Mediahttp://oreilly.com/catalog/9780596...
Globalcode – Open4educationLeia!High Performance Web SitesSteve SoudersOReilly MediaCriando sites com HTML, Construindo Si...
Globalcode – Open4educationSiga!@cmilfont (Christiano Milfont)@leobalter (Leo Balter)@felipenmoura (Felipe Moura)@slicknet...
Globalcode – Open4educationLeia mais sobre otimizaçãohttps://gist.github.com/djhonyy/5653197
Globalcode – Open4educationPerguntas?Não se acanhe, a sua dúvida também pode ser amesma do amiguinho do seu lado.
Globalcode – Open4educationObrigado!Obrigado pela presença de todos, eu sei que vocêspoderiam estar roubando ou matando, a...
Globalcode – Open4educationVamos trocar umas ideias?var myProfile = {nome: Johnathan Cardoso,email: johnathancardoso@gmail...
Próximos SlideShares
Carregando em…5
×

Organizando a casa. o front end do jeitinho que a mamãe gosta

1.284 visualizações

Publicada em

Sim, sua mamãe gosta de tudo arrumado. Você também deveria gostar de organizar seu código do front-end da melhor maneira possível. Serão apresentadas diversas práticas "maneiras" para tornar seu sistema/site mais leve e bacana, reduzindo o tempo de carregamento, melhorando a navegação do usuário e possibilitando melhores resultados.

Publicada em: Tecnologia
0 comentários
8 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.284
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
8
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Imaginem os resultados para um site de e-commerce
  • Quando o servidor demora muito para responder a uma requisição. Quando a conexão do usuário com a Internet é ruim. Quando há uma latência considerável entre o servidor e o cliente. Quando há requisição de muita informação.
  • Organizando a casa. o front end do jeitinho que a mamãe gosta

    1. 1. Globalcode – Open4educationOrganizando a casa. O front-end dojeitinho que a mamãe gosta
    2. 2. Globalcode – Open4educationQuem é esse aí que tá falando?11 anos de estrada.Coordenador (Um dos) do PHPSC.Analista de Sistemas (Severino Feelings) atuandono ramo de Cooperativismo de Crédito.Formado em Gestão de TI pelo SENAC.Cursando Sistemas de Informação pela UNISUL.Chato pra cara%&@!.
    3. 3. Globalcode – Open4educationE vocês? O que fazem?Vamos trocar uma ideia?
    4. 4. Globalcode – Open4educationVocê também tem problemas dedesempenho?
    5. 5. Globalcode – Open4educationMuita calma nessa hora!Não otimize seu código agora!Você pode até assumir uma posturaconstrutiva desde o início, mas guardesuas forças para a parte final da tarefa(ou do projeto).
    6. 6. Globalcode – Open4educationPorque tenho que otimizar?Uma otimização decente deixa um site/sistema entre50% e 90% mais rápido (o front-end).
    7. 7. Globalcode – Open4educationSério? No front-end?A maioria (entre 80% e 90%) do tempo decarregamento e problemas de desempenho dossites, esta no front-end.
    8. 8. Globalcode – Open4educationO que pode afetar ocarregamento?Imagens (Muitas imagens, imagens pesadas)Arquivos CSSArquivos JavaScriptLendo o HTML da páginaFlash (Sim, alguns sites ainda usam)
    9. 9. Globalcode – Open4educationE no servidor?O que roda no servidor também conta, masraramente é a causa do problema.
    10. 10. Globalcode – Open4educationO exemplo do GoogleEm 2009 o Google fez um experimento ondeexpôs a um grupo de usuários uma busca 300msmais lenta.Resultado: Redução de 0.6 no índice de buscasdiários por usuário, dentro do grupo de controle.
    11. 11. Globalcode – Open4educationO exemplo do portal Terra60 segundos no portal terra significam:- autenticações: 535 mil- e-mails: 32 mil enviados / 17 mil recebidos- capa: 150 mil- hits: 3,6 milhões- banners: 540 mil exibições- tráfego de rede: 2,7Tbits (72 DVDs)
    12. 12. Globalcode – Open4educationReduzir 1K na requisição significa:A cada 60s: 3,6GBA cada 1 hora: 180GBA cada um dia 4,2TBInformações cedidas por Jaydson Gomes - http://www.slideshare.net/jaydson
    13. 13. Globalcode – Open4educationVamos ao o que interessa!Todas as práticas a seguir são recomendadas, masnão adote todas de uma vez, agora.Implemente uma de cada vez, sempreacompanhando os resultados e comparando-oscom a situação anterior à alteração.
    14. 14. Globalcode – Open4educationAntes de começar aotimizar...Conheça o Google Analytics Real TimejsPerf — JavaScript performance playgroundhttp://jsperf.com/JSLint - The JavaScript Code Quality Toolhttp://www.jslint.com/Instale o Firebug
    15. 15. Globalcode – Open4educationAntes de começar aotimizar...Avalie o seu site no PageSpeed InsightsInstale o plugin Yslow noFirefoxTeste a performance do seu site no WebPage Test
    16. 16. Globalcode – Open4educationMínimo possível de requisições.CSS Image SpritesCausa um aumento no código CSS e JS, mascompensa pela redução do tempo de carregamentoda página.
    17. 17. Globalcode – Open4educationOtimize a qualidade das imagens carregadas.No HTML, sempre adicione as dimensões dasimagens que serão exibidas, ajude o navegador aprocessar menos.
    18. 18. Globalcode – Open4educationMínimo possível de requisições.Unifique arquivos JavaScript, CSS e HTML.Sempre pondere a possibilidade de unificar todos osarquivos JavaScript e CSS do sistema em apenasum.Menos arquivos JavaScript e CSS significa menosrequisições HTTP. O ganho pode chegar a 80%
    19. 19. Globalcode – Open4educationMínimo possível de requisições.13 arquivos JavaScript Diferentes729k de tamanhoTempo de carregamento: 4,46s
    20. 20. Globalcode – Open4educationMínimo possível de requisições.2 arquivos JavaScript Diferentes729k de tamanho (Os mesmos)Tempo de carregamento: 1,87s
    21. 21. Globalcode – Open4educationAgilizando o carregamentoCSS e JavaScript sempre em arquivos externos.Eles podem ser usados em outras partes do sistematambém. Pra que replicar código?Considere colocar em um arquivo separado ecarregado posteriormente os trechos de códigosde funções pouco usadas.
    22. 22. Globalcode – Open4educationAgilizando o carregamentoCSS no topo do código.Se necessário, coloque um arquivo com asinstruções para montagem do layout básico dapágina. Aquele que dá a cara principal ao site. Assimvocê evita o FOUC.
    23. 23. Globalcode – Open4educationAgilizando o carregamentoArquivos JavaScript no fimComplementa a prática de manter os arquivos CSSno topo da página.A não ser que o JavaScript altere o layout da página.Nesse caso separe o trecho que altera o layout ecoloque-o no início. Após o CSS.
    24. 24. Globalcode – Open4educationAgilizando o carregamentoMinifique arquivos JavaScript e CSS.A redução de tamanho do arquivo é em média de60%.Existem inúmeras ferramentas de minificação de código JavaScriptdisponíveis. Recomendo: http://fmarcia.info/jsmin/test.html
    25. 25. Globalcode – Open4educationAgilizando o carregamentoCompacte os arquivos JavaScript e CSS.Habilite o mod_deflate ou o mod_gzip no apache. Oupeça para que o responsável pelos servidores ofaça.A redução de tamanho do arquivo é em média de80%.O Add-on do Firefox Webmaster Toolbar mostra bem os resultados através de comparativo.
    26. 26. Globalcode – Open4educationAgilizando o carregamentoCustomize as E-tagsUtilize subdomínios para download de arquivosJavaScript, para maximizar o número de downloadsparalelos.Avalie a possibilidade de utilizar uma CDN (ContentDelivery Network)
    27. 27. Globalcode – Open4educationAgilizando o carregamentoUtilize um gerenciador de módulos.Evite Bad Requests.Quando possível, faça cache de requisições ajax.
    28. 28. Globalcode – Open4educationE no código JavaScript?Os livros indicados contém dezenas de práticas paraagilizar a execução do seu código JavaScript.É pano pra manga...
    29. 29. Globalcode – Open4educationPalavras de quem sabeModern web applications have a lot of JavaScript.Between libraries like jQuery and YUI, and customJavaScript that application developers write, itsnow more important than ever to understand whatsexecuting on your site. JavaScript performancedirectly affects the user experience, and as such,should always be part of a larger performancestrategy.Nicholas Zakas.
    30. 30. Globalcode – Open4educationSe o JavaScript demora para executar, seusite/sistema demora pra responder. Isso quer dizerque você tem um problema para resolver!
    31. 31. Globalcode – Open4educationQuando o longo é longo demais?"0.1 segundo (100ms) é o tempo limite para que ousuário sinta que o sistema esta respondendoinstantâneamente, significa que nada em especialprecisa ser feito alémdaexibição do resultado."Jakob Nielsen
    32. 32. Globalcode – Open4educationCompartilhe Conhecimento!Ferramentas WikiBlogs da equipe de desenvolvimentoJavaScript Coding StandardsProjetos ModeloCompre Livros para sua equipe. Peça para sua empresacomprar. Mostre o quanto é importante compartilhar conhecimento.Revisões de código em paresPeça para um colega de profissão avaliar seu código, apontar erros esugerir melhorias. (Alguém em quem você confie muito).
    33. 33. Globalcode – Open4educationTome atitudes e assuma novas posturas
    34. 34. Globalcode – Open4educationObtenha apoio da direçãoSeus colegas e superiores imediatos também devem pensar da mesmaforma. (Steve Souders)
    35. 35. Globalcode – Open4educationUtilize o vocabulário adequadoA cada setor interessa ouvir os termos relativos à própria área. Evitejargões técnicos. (Steve Souders)Quem não é da área não fará outra coisa a não ser ficar confuso e fazercara feira.
    36. 36. Globalcode – Open4educationEscolha o produto certoNão escolha o produto mais importante da empresa para começar. Melhorum produto de importância intermediária. (Steve Souders)Não aposte todas as fichas na galinha dos ovos de ouro da empresa. Ese alguma otimização não sair como esperado?
    37. 37. Globalcode – Open4educationUtilize métricas confiáveisNão comece a otimizar agora, tenha calma. Estabeleça as métricasadequadas e separe um tempo para captação de estatísticas. (SteveSouders)
    38. 38. Globalcode – Open4educationSeja apaixonado por performanceGostar só um pouquinho não fará com que seus colegas (pares esuperiores) se convençam em priorizar a performance (Steve Souders).Seja apaixonado, mas não seja xiita. Nem sempre a solução maisperformática será a mais adequada para a situação.
    39. 39. Globalcode – Open4educationBusque Conhecimento (ET Bilú)Compareça a eventos.Faça parte de um grupo de usuários.Mantenha uma rotina regular de estudos.Aprenda com os mais experientes.
    40. 40. Globalcode – Open4educationLeia!JavaScript de Alto DesempenhoNicholas ZakasOReilly Mediahttp://oreilly.com/catalog/9780596802806/Padrões JavaScriptStoyan StefanovOReilly MediaEven Faster Web Sites: Performance Best Practices for Web DevelopersSteve SoudersOReilly Media
    41. 41. Globalcode – Open4educationLeia!High Performance Web SitesSteve SoudersOReilly MediaCriando sites com HTML, Construindo Sites com CSS e XHTML,CSS3 e HTML5Maurício Samy SilvaNovatec
    42. 42. Globalcode – Open4educationSiga!@cmilfont (Christiano Milfont)@leobalter (Leo Balter)@felipenmoura (Felipe Moura)@slicknet (Nicholas Zakas)@stoyanstefanov (Stoyan Stefanov)@thomasfuchs (Thomas Fuchs)@del_javascript
    43. 43. Globalcode – Open4educationLeia mais sobre otimizaçãohttps://gist.github.com/djhonyy/5653197
    44. 44. Globalcode – Open4educationPerguntas?Não se acanhe, a sua dúvida também pode ser amesma do amiguinho do seu lado.
    45. 45. Globalcode – Open4educationObrigado!Obrigado pela presença de todos, eu sei que vocêspoderiam estar roubando ou matando, até mesmofapeando no redtube, mas estão aqui na humildade.
    46. 46. Globalcode – Open4educationVamos trocar umas ideias?var myProfile = {nome: Johnathan Cardoso,email: johnathancardoso@gmail.com,blog: blog.johnathan.com.br,twitter: @djhonyy,fone: (48) 8829-6420};

    ×