Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 64 views

Dicas de performance para aplicações Front end.

Dicas de performance para aplicações Front end.

Statistics

Views

Total Views
64
Views on SlideShare
64
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Performance - Acelere seu site! Na web tempo é mais que dinheiro. Presentation 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/ ! !