Performance - Acelere seu site! Na web tempo é mais que dinheiro.

  • 54 views
Uploaded on

Dicas de performance para aplicações Front end.

Dicas de performance para aplicações Front end.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
54
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PERFORMANCE Acelere seu site! Na web tempo é mais que dinheiro.
  • 2. Fontes: http://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/ Amazon’s revenue increased 1% per 100ms of reduced loading time Every 1second reduction in loading time correlated to a 2% increase in web traffic. Every 100ms of reduced loading time lead to an increase in incremental revenue of as much as 1%. After cutting down their page load time from 6 seconds to as little as 1.2 seconds, Shopzilla saw revenue increase by 12% After Mozilla made their page 2.2 seconds quicker to load, the company saw downloads of Firefox increase by 5 million per month. For every 400ms’ reduction in loading time,Yahoo’s traffic increased by 9%
  • 3. No que diz respeito a performance no client-side, se uníssemos… + + teríamos ninguém menos que… = Steve Souders Ex Head Performance Engineer at Google e atual Chief Performance Officer at Fastly Autor de vários livros sobre o assunto e criador de inúmeras ferramentas que auxiliam a melhora de performance
  • 4. No post "the Performance Golden Rule” Steve diz que: 80-90% of the end-user response time is spent on the frontend. Fonte: http://www.stevesouders.com/blog/2012/02/10/the- performance-golden-rule/
  • 5. SUMÁRIO • HTML • CSS • Javascript • Imagens • Dispositivos • Servidor • Ferramentas
  • 6. HTML Javascript/CSS - Chamadas Evite ao máximo usar estilos e scripts de forma inline ou incorporada, a menos que você esteja desenvolvendo uma aplicação com pouquíssimos recursos de Javascript e CSS, ou se sua aplicação for acessada apenas uma única vez. Isso beneficiaria na diminuição de requests, mas aumentaria consideravelmente o documento HTML. Ao utilizarmos uma chamada de um arquivo externo temos o benefício do cache, modularização e reaproveitamento. ! Evite <style></style> e <script></script>; <p style=“color:#000;”>CSS Inline</p> <a href=“#” onclick=“funcaoJavascript(‘parametro')”>Javascript Inline</a> ! Use <link rel="stylesheet" href=“style.css”> <script src="script.js"></script>
  • 7. HTML Javascript/CSS - Local da chamada As chamadas de arquivos CSS devem ser realizadas no início do documento, dentro da tag head, para que ocorra a redenrização progressiva da página. … <head> <link rel="stylesheet" href=“style.css”> </head> … ! As chamadas de arquivos Javascript devem ser realizadas no fim do documento, antes do fechamento tag body, para evitar o bloqueio na renderização da página. … <script src=“script.js”></script> </body> </html>
  • 8. CSS Minifique A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas as regras CSS. Isso tende a diminuir o tamanho dos arquivos e acelerar o download. Antes: .p{ font-family:Arial, sans-serif; font-size: 14px; line-height: 20px; } Depois: .p{font-family:Arial,sans-serif;font-size:14px;color:#777;line-height:20px;} Concatene A concatenação de arquivos diminui a quantidades de requisições HTTP. Antes: <link rel="stylesheet" href=“layout.css”> <link rel="stylesheet" href=“tipografia.css”> <link rel="stylesheet" href=“box.css”> <link rel="stylesheet" href=“grid.css”> … Depois: <link rel="stylesheet" href=“main.css”>
  • 9. CSS Dicas Gerais Evite utilizar seletores super qualificados: <nav id=“menu"> <ul> <li><a href=“#”>Link 1</a></li> <li><a href=“#”>Link 2</a></li> </ul> </nav> #menu ul li a{ color: “777; } use: <nav id=“menu"> <ul> <li><a href=“#” class="link">Link 1</a></li> <li><a href=“#” class="link">Link 2</a></li> </ul> </nav> #menu .link{ color: #777; } Evite utilizar seletor universal: #elemento *{ color: #777; } use: #elemento p, #elemento li, #elemento label, #elemento h1, #elemento h2, #elemento h3, #elemento h4{ color: #777; } A interpretação dos seletores CSS começa da direita para a esquerda.
  • 10. JAVASCRIPT Minifique A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas os scripts. Isso tende a diminuir o tamanho dos arquivos e acelerar o download. Antes: var square = function(x){ return x*x; }; Depois: var square=function(x){return x*x;}; Concatene A concatenação de arquivos diminui a quantidades de requisições HTTP. Antes: <script src=“modal.js”></script> <script src=“alert.js”></script> <script src=“tooltip.js”></script> … Depois: <script src=“main.js” async="true"></script>
  • 11. JAVASCRIPT Armazene o Array.length no momento do Loop Loops podem impactar consideravelmente na aplicação. Por isso, devemos tomar alguns cuidados. Armazene o tamanho do array em uma variável para evitar recalculos desnecessários Evite: var i, size, arr = new Array(99999); for( i = 0; i < arr.length; i++ ){ // isso é ruim porque o array está sendo recalculado a toda interação } Use: var i = 0, arr = new Array(99999), len = arr.length; for( ; i < len; i++ ){ // isso é bom porque já sabemos o tamanho do array } Carregue Scripts de terceiros de forma Assíncrona Scripts de terceiros tais como APIs ou botões de like/share/+1 podem onerar a aplicação no momento do carregamento caso o servidor que hospeda o mesmo esteja fora, lento, ou quem sabe bloqueado por algum serviço de Firewall da empresa que o usuário trabalha. <script> var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script, scripts); </script>
  • 12. JAVASCRIPT Evite manipulação desnecessária de DOM A manipulação do DOM é algo custoso para o browser, sempre que possível evite-a ou pense na melhor forma de fazê-la. Nicholas C. Zacas no livro “Javascript de Alto Desempenho" faz uma analogia comparando acessar o DOM como a travessia de uma ponte. Ou seja, evite atravessar várias vezes a ponte. Evite: // o dom será acessado 10x for (var i = 0; i < 10; i++) { document.getElementById("lista").innerHTML += "<li>" + i + "</li>"; } Use: // o dom será acessado 1x var listaHTML = ""; for (var i = 0; i < 10; i++) { listaHTML += "<li>" + i + "</li>"; } document.getElementById("lista").innerHTML = listaHTML;
  • 13. JAVASCRIPT Diminua Repaints e Reflows A alteração de uma propriedade ou elemento da página desencadeia um processo de re-renderização no DOM ocasionando em repaints e reflows. Repaint - ocorre quando alteramos a aparência (cor, background, cor da borda, padding, etc) de um elemento sem impactar o layout. Reflow - ocorre quando a alteração no elemento tem impacto direto na estrutura do layout (largura, altura, posicionamento, etc). O reflow tende a ser bem oneroso. !
  • 14. JAVASCRIPT Evite bibliotecas demasiadas pesadas quando for algo simples Atualmente existem uma gama de bibliotecas, frameworks, plugins, etc que podem auxiliar bastante o desenvolvimento do seu projeto. Porém, é necessário muito bom senso em saber quando realmente usá-los, dependendo da ocasião o impacto pode ser negativo na performance. jQuery Bibliotecas como o jQuery estão sempre sendo aperfeiçoadas, portanto, procure suar as novas versões. Zepto Zepto.js é uma biblioteca minimalista, com larga compatibilidade com a API do jQuery e mais leve. Sua utilização aconselhável quando o objetivo for simples e podemos ignorar os browsers antigos. Javascript Nativo O acesso direto usando Javascript nativo pode ser a melhor opção quando se deseja fazer coisas como simplesmente acessar um atributo de um elemento no DOM. ! ! ! ! ! ! ! ! ! ! ! !Fonte: http://jsperf.com/zepto-vs-jquery-2013/38
  • 15. IMAGENS Sprites Unifique suas imagens e use CSS para exibi-ás. Essa técnica diminui o número de requisições feitas pelo site e consequentemente o tempo de carregamento. ! ! ! ! .social-link { background: url(/assets/sprite-social.png) no-repeat top left; display: block; } .social-facebook { background-position: 0 0; width: 14px; height: 14px; } .social-instagram { background-position: 0 -15px; width: 14px; height: 14px; }
  • 16. IMAGENS Icon Fonts Uma alternativa a técnica de sprite é usar icon fonts. Essa técnica consiste em transformar imagens em svg em fontes e importá-las no projeto utilizando propriedade @font-face do CSS. Há vários sites que ajudam no processo como o http:// icomoon.io/. A grande vantagem da técnica é não precisar ter um sprite com inúmeras variações de tamanho e cor de imagens, uma vez que podemos manipular essas propriedas direto com CSS. ! CSS @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-rn4ypd'); src:url('fonts/icomoon.eot?#iefix-rn4ypd') format('embedded-opentype'), url('fonts/icomoon.woff?-rn4ypd') format('woff'), url('fonts/icomoon.ttf?-rn4ypd') format('truetype'), url('fonts/icomoon.svg?-rn4ypd#icomoon') format('svg'); font-weight: normal; font-style: normal; } ! [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; ! /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ! .icon-facebook:before { content: "e600"; } .icon-instagram:before { content: "e601"; } ! HTML <span class=“icon-facebook"></span> <span class="icon-instagram"></span>
  • 17. IMAGENS data URI Utilizando data URI é possível inserir imagens inline utilizando codificação base 64. Essa técnica diminui o número de requisições HTTP tendo em vista que as imagens estão sendo inseridas direto no documento. Uma desvantagem é que pode aumentar consideravelmente o tamanho do documento HTML/CSS. <img alt="" src="data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAACCCAMAAAD7a0NlAAABAlBMVEUAAAD////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////95EvdTAAAAVXRSTlMA+QPkmQb8M2bM8PYJG+oVDwwk0ts28+1REi0wcsmNGNXAq1qiPEV+vWzesWAhJx7YOZ +Et0J7XcYqnKjnuuGQV5NOz4p4gUhvda6Hw2M/lkultGlU5PjTGAAABR5JREFUGBm1wQV2pAoQBdAHBNKBpt077u7uLiPJ2Nv/Vv4Kqn6dU3Av/ tfcZEFQqnHCYgxQqisWYz5EmXYTFuMMpbpkMTohyrQXsBgVlOqBxYhilGmux2K8o1TPLMZ1E2UapizGKUq1xmL0GyhTs89ivKJU0yxGr44yVSMWYxal +stiZDnKFG+yGF8o1TaLEeygTOE8rbK/Fc2E6AN+/2i2DUXzmqIx/J5otRlD8U7RMfzeaLYBRXxL0Sf8zmkVVaH4SdE5/D5pNg1FuE/RI/ xuaFVrQnFPUTuEW5dmp1CETxSdwe8brdIhFI8UbcZwGyW0OoJmhqJ3+P2mVa8OxQlFtSbcWgmtZqFZp2gNfpe0ynIouhT1hnDLA1pNQLNF0Sz87mgV7EAxTi gJcrjN9Wh1CM0VRZfwO6JVsgvFbkJJsgu3YUqrK2guKVqE3ymtkjEUewFFXbg1a7TaguaOonX4vdOsC8Vcj6JVuMURrW6g +U7RFPwqNPuEYphS9A9uYYdWP6BZo2g/hNsZzd6gaNYo+gm3sE2rKWimKYpiuA1oNoAijiiaht8UrdohFBWK+g24rdJsCYq4Q9ER/ BZo1QmhOKOoNwe3FZr9hCKcp+gBfse0uo2hGFAU7MBtkmYb0ExRtAy/RVpFTShWKUpGcLtIaPUBzQJFW/BbplW/ CcUKZQdw2wlotQbNMUUL8JugVTqEYkzZL7jlGa2+Q7NI0VMIt1la9eaguEgoWoJbvUerO2gOKerEcHulVZBDsRNQ9BdujT6tJqD5oihqwu2FVkELijyj6AVuzWtaL UPzTFF/ CK9uSqttKKoLFG3FcBr1abUBRfyHopsYTq1rWp1CEV5RdF6F015Eq2doDimaasBprkOrL2juKGrX4VRv02oZmiOKOjmcGjO0+hZC8UFRtAen6g9a3cRQVCi6bs EpvqHVjyoUSxT1R3AKv9FqqgHFIKEk7cLrN63m61CsBpRkK/CaoFUnh +IgoyRYhdcsraIdKCZTSpIBvNZoVduF4qJGSbIEr2lapWMoWhFFFXhVaJUdQJFvUjQNr6WERsEJFPV5itbg9ZjQKHiEovFE0TO8VgMaJUtQVM8pmoDXSkarChTxO kXL8JpMaTUNRbxF0bcQTqMarV6hCH9TdBzDqXVNq1loLilaqMIpv6XVJTSzFM004VTv0OoqhOKVovYQTsM2rbZiKD4o2q/DqTFDq/ UqFBWKNnM4VRdoNVOFYomiqAWn +JhW7QYUg4SS2gWcwkVa7dehWA0oScfwWqbVbQ7FSkZJdgCvL1pFLSgmU0qyE3g906o2gmJUoyT4Ba81WqVdKFoRJck9vN5pla1Akd9StA2vn7QK3qCo71O 0Aa/7hEbJAIpGm6IXeD0GtDqDojlD0RG8TgJabUBRXaDoDl4HGa1eoIj/UHQIr3FKq+9QhIsUXYVwuqjR6gGaQ4q2Yji1IlotQ/NA0XoMp3yTVoshFEcUnVfhVN +n1XEMxQtFUw04Ndq0+lGFYoOi+TqcmjO0mmlAcUZRJ4dTdZ1W7ToU/xJKoj04xX9o1ZmD4i2gpNaCU7hIq2gPis +Mkv4IXoe0qu1C0U0pSbvweqBVsj2puZkSrcDrO4txu4cSnbIYUQsl2mAxahco0TaL0R +hRPcJC5F2UaJfAQuRHaBEJxkLkZ2gRN0eCxG8oUTjlIUIBijRbo2FSO5Rop2IxdhGifJNFqOCEtXnWYxplKjxxGKcokTVcxbjFSWqrrMYsyjRf/ dApFXR0HsQAAAAAElFTkSuQmCC" />
  • 18. IMAGENS Evite Escalar Imagens no HTML Escalar imagens direto na página não é uma boa prática e pode afetar consideravelmente a performance da sua aplicação. Escalando para cima, ou seja aumentando, a imagem perderá qualidade podendo pixelar. Escalando para baixo, ou seja diminuindo, será carregada uma imagem desnecessariamente mais pesada. É aconselhável setar o tamanho real da imagem, pois isso evitará reflows. E manter imagens com dimensões diferentes para cada circunstância. <img src=“avatar.png” alt=“Avatar" width=“100" height=“100"> <img src=“avatar-mini.png” alt=“Avatar Menor" width=“50" height="50"> Otimize suas Imagens Imagens geralmente possuem informações que são desnecessárias e que acabam acarretando em bytes a mais no tamanho do arquivo. É possível eliminar essas informações sem impactar na renderização final na página. Em ferramentas como o Photoshop é possível salvar para web e alterar a qualidade do arquivo a fim de alcançar um melhor custo x benefício.
  • 19. DISPOSITIVOS:AWD, RWD OU RESS? A versão para dispositivos do seu site é algo que deve ser muito bem estudado. Existem alguns caminhos a seguir que podem implicar consideravelmente na performance, todos eles tem seus prós e contras. Adaptive Web Design A técnica consiste em identificar o dispositivo e servir conteúdo adaptado e otimizado para tal. Requer um conhecimento avançado para trabalhar com a enorme gama de dispositivos. Ideal para quem quer performance. ! Responsive Web Design A técnica é bem simples de se aplicar, no entanto peca na performance, pois o mesmo conteúdo é serviço para todos os dispositivos. Ideal para quem quer simplicidade. ! Responsive Web Design + Server Side Components É uma técnica híbrida que tende a usar o melhor dos dois mundos. Fonte: http://visual.ly/adaptive-web-design-vs-responsive-web-design http://www.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
  • 20. SERVIDOR Use um Content Delivery Network Use o CDN para hospedar seus assets (Javascript, CSS, Imagens,Vídeos, etc). Com CDN é possível diminuir o tempo de resposta, aumentar downloads paralelos e aliviar o servidor da aplicação.Alguns CDNs otimizam o recurso no momento da entrega. Há vários serviços como o Akamai, CloudFront, CloudFlare, etc. Compressão GZIP Todos os navegadores modernos aceitam o método de compressão GZIP. Habilitando o módulo no servidor seus arquivos de texto (HTML, JS, CSS, XML, JSON) serão comprimidos diminuindo o tráfego de dados e acelerando o downlaod. # Exemplo no Servidor Apache editando o arquivo .htaccss AddOutputFilterByType DEFLATE text/htm AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript Cache O browser por padrão não realiza o cache dos arquivos, isso obriga o usuário fazer requisições desnecessárias. Determine uma data para armazenamento de cache local dos arquivos. # Exemplo no Servidor Apache editando o arquivo .htaccss ExpiresActive On ExpiresByType image/jpeg "access plus 3 months" ExpiresByType image/png "access plus 3 months" ExpiresByType text/css "access plus 3 months" ExpiresByType application/javascript "access plus 3 months" ExpiresByType text/javascript "access plus 3 months" Localização A localização do servidor influencia na latência. Procure ter servidores mais próximos do usuário final.
  • 21. FERRAMENTAS PageSpeed O PageSpeed é uma ferramenta do Google que analisa a página dando feedback das possíveis melhorias. Chrome DevTools O Chrome DevTools é uma ferramenta do Google Chrome. Através da ferramenta é possível analisar o carregamento da página, renderização, processamento, analisar funções Javascript e performance do CSS. WebPageTest - www.webpagetest.org O WebPageTest gera um relatório completo da página analisada. JSPerf - jsperf.com Com JSPerf é possível analisar trechos de código Javascript e efetuar comparações a fim de descobrir qual oferece melhor desempenho. Grunt O Grunt possui alguns módulos como grunt-phantomas (https://www.npmjs.org/package/grunt- phantomas) que auxiliam na análise de desempenho.
  • 22. OBRIGADO! Palestrante Gustavo Corrêa Alves http://www.gustavocalves.com.br https://github.com/gcajpa http://br.linkedin.com/in/gustavocorreaalves/ ! !