Your SlideShare is downloading. ×
0
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.
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.
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.
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.
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.
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.
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.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

330

Published on

Dicas de performance para aplicações Front end.

Dicas de performance para aplicações Front end.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
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 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% Adopting a single optimization, gzip compression, resulted in a 13-25% speedup and cut their outbound network traffic by 50%.
  • 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 na Google, Chief Performance Yahoo! e Chief Performance Officer na Fastly. Autor de livros e artigos sobre o assunto e criador de 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 front-end. Fonte: http://www.stevesouders.com/blog/2012/02/10/the- performance-golden-rule/
  • 5. SUMÁRIO • HTML • CSS • Javascript • Imagens • Dispositivos • Servidor • Ferramentas
  • 6. RTT (Round-Trip Time) RTT é o tempo que o cliente leva para conversar com o servidor. Geralmente uma comunicação simples (sem configurações de cache, keep alive, CDN ou qualquer outra) entre browser e servidor inicia com pelo menos três RTTs: 1. Resolução do DNS 2. Setup de conexãoTCP 3. Requisição HTTP Processo de Renderização do Browser 1. Processar a marcação HTML e 
 construir a árvore de DOM. 2. Processar a marcação CSS e construir a 
 árvore de CSSOM. 3. Combinar o DOM e o CSSOM em uma 
 árvore de renderização. 4. Executar o layout na árvore de renderização para 
 computar a geometria de cada nó. 5. Pintar cada nó na tela. http://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/
  • 7. HTML Inserção de Javascript e CSS 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>
  • 8. HTML Onde realizar as chamadas externas de CSS? As chamadas de arquivos CSS devem ser realizadas no início do documento, dentro da tag head. … <head> <meta charset="UTF-8"> <title>Título</title> <link rel="stylesheet" href=“style.css”> </head> … Motivos: - Renderização progressiva da página; - Evita o fenômeno FOUC (Flash of Unstyled Content); - Reduza o repaint e reflow inicial; - Causa ao usuário a "sensação" de que a página está carregando mais rápido.
  • 9. HTML Onde realizar as chamadas externas de Javascript? As chamadas de arquivos Javascript devem ser realizadas no fim do documento, antes do fechamento tag body. … <script src=“script.js”></script> </body> </html> Motivos: - Evita o bloqueio da renderização da página e o usuário fique travado numa página em branco enquanto o arquivo de script não for baixado e executado. E quanto aos atributos async e defer? Tanto o async e defer apresentam mal funcionamento na versão oito e nove do Internet Explorer.
  • 10. CSS Minifique A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas as regras CSS. Isso diminuir o tamanho em bytes 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=“grid.css”> Depois: <link rel="stylesheet" href=“main.css”>
  • 11. CSS Seletores Evite utilizar seletores super aninhados: #menu ul li a{…} use: #menu .menu-link{…} Evite utilizar seletores qualificados: h1#titulo-pagina{…} use: #titulo-pagina{…} Evite form[name="signup"] > fieldset > input[type="text"] {…} use a categoria mais específica possível: .form-signup .input-text {…} A interpretação dos seletores CSS começa da direita para a esquerda. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
  • 12. CSS Seletores Evite utilizar seletor universal: #elemento *{….} use algo como: #elemento h1, #elemento p, #elemento li, #elemento label{…} Obs.: Atenção ao seletor universal invisível. body [type=“text”]{…} body [type="text"] = body *[type="text"]
  • 13. JAVASCRIPT Minifique A minificação elimina comentários, espaços em branco, quebras de linha, etc, preservando apenas os scripts. Isso diminuir o tamanho dos arquivos em bytes 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”></script>
  • 14. JAVASCRIPT Manipulação 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;
  • 15. JAVASCRIPT Carregue Scripts de terceiros de forma Assíncrona Scripts de terceiros tais como APIs, botões de like/share/+1, parceiros, web analytics, etc, 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. Exemplo: <script> var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script, scripts); </script>
  • 16. JAVASCRIPT Cuidado com a quantidade de Scripts de Terceiros Os scripts de terceiros podem realizar requisição de outros scripts, desencadeando um efeito cascata.
  • 17. JAVASCRIPT Diminua Repaints e Reflows A alteração de uma propriedade CSS de um elemento da página pode desencadeia um processo de re-renderização ocasionando em repaints e reflows. Repaint - ocorre quando alteramos a aparência (cor, background, cor da borda, padding, etc) de um elemento sem necessariamente ter que recalcular o posicionamento do mesmo na página. 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, pois força o navegador recalcular a posição dos elementos na página.
  • 18. 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 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
  • 19. 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; width: 14px; height: 14px; } .social-facebook { background-xposition: 0 0; } .social-instagram { background-position: 0 -15px; }
  • 20. 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>
  • 21. 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">
  • 22. IMAGENS 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 as meta informações sem impactar a qualidade final da imagem. Existem uma série de ferramentas para otimização de imagens. Photoshop JPEGMini - http://www.jpegmini.com/ Smush It - http://www.smushit.com PNG Optimizer - http://psydk.org/pngoptimizer Grunt Imagemin - https://github.com/gruntjs/grunt-contrib-imagemin
  • 23. 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. AWD (Adaptive Web Design) A técnica consiste em identificar o dispositivo e servir conteúdo adaptado e otimizado para tal. RWD (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. RESS (Responsive Web Design + Server Side Components) É uma técnica híbrida que tende a usar o melhor dos dois mundos. Usa responsive web design com componentes específicos sendo servidos via server side. Fonte: http://visual.ly/adaptive-web-design-vs-responsive-web-design http://www.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
  • 24. 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"
  • 25. FERRAMENTAS PageSpeed O PageSpeed é uma ferramenta do Google que analisa a página dando feedback das possíveis melhorias. YSLOW OYSLOW é uma ferramenta do baseada nas regras de performance doYahoo. 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. É considerada por alguns como a melhor ferramenta de análise de desempenho. 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. Site Speed - www.sitespeed.io É uma ferramenta open source e muito flexível. Possui comunicação com o Graphite para criação de Dashboard. Usa as regras doYSLOW, e possui integração com o WebPageTest.Você pode escrever suas regras, caso ache necessário, ou integrar com uma ferramenta própria. Speed Curve - speedcurve.com Ferramenta criada por Steve Souders e Mark Zeman, baseada no WebPageTest. Realiza benchmark com outros sites, analisa a versão responsiva, scripts de terceiros, possui continuous deployment, etc. Porém, é uma ferramenta paga. New Relic
  • 26. OBRIGADO! Palestrante Gustavo Corrêa Alves http://www.gustavocalves.com.br https://github.com/gcajpa http://br.linkedin.com/in/gustavocorreaalves/

×