Web Performance Client Side
Upcoming SlideShare
Loading in...5
×
 

Web Performance Client Side

on

  • 3,320 views

 

Statistics

Views

Total Views
3,320
Views on SlideShare
3,294
Embed Views
26

Actions

Likes
6
Downloads
44
Comments
0

1 Embed 26

http://www.slideshare.net 26

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

Web Performance Client Side Web Performance Client Side Presentation Transcript

  • WEB PERFORMANCE CLIENT-SIDE
  • SITES LENTOS
  • RAIVA
  • FRUSTRAÇÃO
  • ABANDONO
  • O QUE É?
  • ESCALAR UM SITE PARA MILHÕES DE USUÁRIOS
  • Receber a página do servidor: 200 ms Carregar a página no browser: 3,8 s TOTAL = 4 s
  • Otimizando server time em 50% 200 ms -> 100 ms
  • REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  • REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  • DE 80 A 90% DO TEMPO PARA CARREGAR UM SITE É USADO PARA BAIXAR COMPONENTES DA PÁGINA: IMAGENS, CSS, SCRIPTS, FLASH, ETC.
  • POR QUÊ?
  • NÚMEROS
  • Otimizações em imagens tornaram o site de2x a 3x mais rápido, com significante aumento de interação com o usuário
  • Um delay de 400ms causou uma redução de 0.59% em buscas por usuário
  • 2 segundos causou uma redução de Demora de 4,3% em receita por usuário
  • Redesign de 1 ano reduziu o load time de 7 para 2 segundos, com aumento de 7 a 12% em receita e redução de 50% em custos de hardware
  • Usuários que experimentam load times mais rápidos visualizam 50% mais páginas por visita
  • Redução de 2 para 1 segundo em load time, reduziu Exit Rate de 15% para 10%
  • “When an interface is faster, you feel good. You feel in control. The web app isn't controlling me, I'm controlling it.” Matt Mullenweg (Criador do Wordpress)
  • QUEM?
  • STEVE SOUDERS - Trabalha para o Google em iniciativas de performance Web e Open Source; - Ex-Yahoo e criador do plugin YSlow; - Palestrante em conferências como OSCON, Web 2.0 Expo e Velocity.
  • COMO?
  • YSLOW
  • PAGE SPEED
  • SAFARI
  • INICIATIVAS
  • YAHOO Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  • GOOGLE Let’s make the web faster http://code.google.com/speed/
  • REDUZIR O NÚMERO DE CONEXÕES HTTP
  • AGRUPAR ARQUIVOS CSS E JS EM ARQUIVOS ÚNICOS E CACHEADOS
  • RUBY ON RAILS Na view: <%= javascript_include_tag :all %> HTML gerado: <script type="text/javascript“ src="/javascripts/prototype.js"></script> <script type="text/javascript" src="/javascripts/effects.js"></script> <script type="text/javascript" src="/javascripts/app.js"></script> <script type="text/javascript" src="/javascripts/shop.js"></script> <script type="text/javascript" src="/javascripts/check.js"></script>
  • Na view: <%= javascript_include_tag :all, :cache => true %> HTML gerado: <script type="text/javascript" src="/javascripts/all.js"></script>
  • Na view: <%= javascript_include_tag :all, :cache => “shop” %> HTML gerado: <script type="text/javascript" src="/javascripts/shop.js"></script>
  • Na view: <%= stylesheet_link_tag :all, :cache => “styles” %> HTML gerado: <link href="/stylesheets/styles.css" media="screen" rel="stylesheet" type="text/css" />
  • CSS SPRITES
  • a.buy { transparent url(/images/sprites.gif) no-repeat scroll -358px -268px; }
  • DIVIDIR COMPONENTES ENTRE DOMÍNIOS
  • css.static.mysite.com img.static.mysite.com scripts.static.mysite.com
  • 2 CONEXÕES EM PARALELO
  • 4 CONEXÕES EM PARALELO
  • 8 CONEXÕES EM PARALELO
  • CONEXÕES PARALELAS POR BROWSER Browser HTTP/1.1 HTTP/1.0 IE 6,7 2 4 IE 8 6 6 Firefox 2 2 8 Firefox 3 6 6 Safari 3,4 4 4 Chrome 1,2 6 ? Opera 9.63,10a 4 4
  • FIREFOX about:config network.http.max-persistent-connections- per-server
  • IE Chave no Registro
  • USAR UMA CDN Content Delivery Network
  • YAHOO! Sites do Yahoo! que moveram seu conteúdo estático para uma CDN tiveram uma melhora de20% ou mais no tempo de carregamento do site
  • SERVIÇOS PÚBLICOS Google AJAX Libraries YUI hosting on Yahoo! network (somente javascript)
  • SERVIÇOS PAGOS Amazon Cloudfront S3 Akamai
  • USAR CONTROLES DE CACHE Sem isto usuários visitam um site baixando as mesmas imagens, scripts e CSS (que raramente são atualizados) todas as vezes que acessam o site
  • ARQUIVOS ESTÁTICOS NÃO EXPIRAM NUNCA
  • AO MUDAR UM ARQUIVO, ADICIONAR UM TIMESTAMP À QUERYSTRING OU AO NOME DE ARQUIVO
  • DICA: NÃO USAR TIMESTAMP NA QUERYSTRING <link href="/stylesheets/ styles.css?20090815142059“ media="screen" rel="stylesheet" type="text/css" />
  • USAR TIMESTAMP NO NOME DE ARQUIVO <link href="/stylesheets/ styles.20090815142059.css“ media="screen" rel="stylesheet" type="text/css" />
  • .htaccess RewriteRule ^(.+).(d{14}).(js|css|png|gif|jpg)$ $1.$3 [L]
  • MAX_AGE Define que o conteúdo de uma página é válido por N segundos Cache-Control: max-age=600 (se o botão Refresh for usado, o browser baixa o conteúdo novamente)
  • ETAG É uma chave para verificar se uma página ainda é a mesma Etag: "620b360455bf03e96951d2…"
  • LAST_MODIFIED Quando uma página foi modificada pela última vez?
  • GZIPAR COMPONENTES CSS, HTML, Scripts (imagens, PDF, Flash já são compactados)
  • 90% dos browsers atuais suportam gzip
  • STYLESHEETS NO TOPO DA PÁGINA
  • Páginas ‘parecem’ carregar mais rapidamente HTML sendo montado serve como indicação do carregamento da página
  • JAVASCRIPTS NO FINAL DA PÁGINA
  • Scripts bloqueiam downloads paralelos Scripts com document.write Atributo DEFER
  • EVITAR EXPRESSÕES CSS
  • background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Eventos são executados muitas vezes (gerando processamento adicional)
  • USAR JAVASCRIPT E CSS EXTERNAMENTE
  • Exceção: Sites com poucos pageviews por sessão podem se beneficiar de usar javascript e CSS embutidos diretamente no HTML
  • REDUZIR QUERIES DNS
  • Influencia a quantidade de conexões paralelas. O ideal é usar de 2 a 4 hostnames diferentes.
  • Google Chrome acelera navegação fazendo pre-resolv de links
  • REDUZIR TAMANHO DE ARQUIVOS JS E CSS (MINIFY)
  • JQUERY 1.3.2 (Sem compressão) (function(){ var // Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, (…)
  • JQUERY 1.3.2 (Compressão) (function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},
  • EVITAR REDIRECTS Conexões desnecessárias
  • HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
  • Opening http://www.somesite.com HTTP request sent, awaiting response… 302 Found Location: http://www.somesite.com/default.html HTTP request sent, awaiting response... 200 OK
  • REMOVER SCRIPTS DUPLICADOS Isso acontece!
  • CACHEAR AJAX
  • Exemplo: Usuário baixa lista de contatos no Gmail. Se esta lista não muda frequentemente, esta resposta Ajax deve estar cacheada no browser. E devidamente identificada com um serial na URL, para diferenciar quando houver uma atualização na lista de contatos.
  • EM REQUISIÇÕES AJAX USE O MÉTODO GET
  • Ao usar XMLHttpRequest, o método POST faz 2 conexões TCP para enviar dados. Já o método GET faz somente 1 conexão.
  • POST LOAD DE COMPONENTES
  • Drag-and-drop Animações Imagens e vídeos depois do “fold”
  • YUI Image Loader YUI Get utility
  • PRE LOAD DE COMPONENTES
  • UNCONDITIONAL PRELOAD Assim que o evento “onLoad” é disparado, sua página começa a baixar alguns componentes extras.
  • Google.com: uma sprite image é carregada no “onLoad”. Esta imagem não é usada em google.com, mas somente nas páginas seguintes, no resultado da busca.
  • CONDITIONAL PRELOAD Baseado na ação do usuário a página faz um “chute” para onde o usuário deverá ir em seguida, e carrega previamente os componentes necessários.
  • Search.yahoo.com: você pode ver como alguns componentes extras são requisitados depois que você começa a digitar na caixa de busca.
  • ANTICIPATED PRELOAD “O novo site é legal, mas está mais lento do que antes”
  • Usuários visitando site novo com empty cache. Pré-carregar componentes ainda no site antigo, enquanto o browser está ocioso, requisitando imagens e scripts que serão usados no layout novo.
  • REDUZIR A QUANTIDADE ELEMENTOS DOM Buscar otimização de markup
  • document.getElementsByTagName('*').length
  • REDUZIR USO DE IFRAMES
  • O evento “onLoad” só é disparado quando o browser termina de carregar todos os iframes, e os componentes dentro destes iframes. Até lá, o browser mostra o ícone de “ocupado”, e o usuário tem a sensação de site mais lento.
  • IFRAMES compartilham o pool de conexões do browser, deixando o site mais lento
  • SEM ERROS 404 Em scripts, css, imagens
  • REDUZIR TAMANHO DE COOKIES
  • Eliminar quando não for necessário Reduzir tamanho Somente para informações estritamente necessárias (dados da sessão devem ficar no banco de dados)
  • DOMÍNIOS SEM COOKIES PARA COMPONENTES Browser não deve enviar cookies ao requisitar css, scripts e imagens
  • SMART EVENT HANDLERS Event Handling vs. Event Delegation
  • EVENT HANDLING Atachar eventos a vários links dentro de um DIV
  • PROBLEMAS Muitos eventos atachados Memory Leaks Possibilidade alta de crash Degradação de performance Precisa atachar eventos novamente, caso o DOM mude
  • EVENT BUBBLING Atachar eventos a um elemento-pai (um DIV por exemplo) e capturar os eventos de seus links
  • VANTAGENS Usa menos memória Página fica mais ágil Fácil de usar Eventos centralizados em um único trecho de código (manutenção)
  • // event delegation var setup = function() { document.onclick = function(e) { e = e || window.event; var t = e.target || e.srcElement; // Pegando um link dentro de uma lista if (t.nodeName.toLowerCase() === 'a‘ && t.parentNode.getElementsByTagName('ul').length>0) { doSomethingElse(); } return false; } }; window.onload = setup;
  • NÃO USAR @IMPORT
  • <link rel='stylesheet' href='a.css'>
  • <style> @import url('a.css'); </style>
  • <link rel='stylesheet' href='a.css'> <style> @import url('b.css'); </style> IE 6,7,8
  • Dentro do HTML: <link rel='stylesheet' href='a.css'> Dentro de a.css: @import url('b.css'); Todos os browsers
  • <link rel='stylesheet' href='a.css'> <link rel='stylesheet' href='b.css'> Downloads em paralelo (em todos os browsers)
  • OTIMIZAÇÃO DE IMAGENS
  • Verificar se GIFs estão usando tamanho de paleta de cores adequada Converter GIFs para PNG
  • Otimizar PNG pngcrush image.png -rem alla -reduce - brute result.png Otimizar JPG jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  • OTIMIZAÇÃO DE CSS SPRITES
  • Arranjar imagens horizontalmente geralmente resulta em arquivos menores Manter cores similares dentro do sprite, idealmente dentro de 256 cores, para usar PNG8
  • SELETORES CSS EFICIENTES
  • SELETOR-CHAVE Primeiro elemento à direita. Quanto mais abrangente, pior DIV.content * { }
  • Não qualificar regras de ID com tags ou classes BAD! button#backButton { } .menu-left#newMenuIcon { } GOOD! #backButton { } #newMenuIcon { }
  • Não qualificar regras de Classe com tags BAD! span.indented { } GOOD! .span-indented { }
  • USAR ARQUIVOS JS QUE SÓ CONTENHAM CÓDIGO QUE SERÁ USADO NA PÁGINA Framework YUI
  • COLOQUE O TAMANHO DAS IMAGENS NO HTML Não colocar valores menoresou maiores do que o tamanho real da imagem
  • Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  • Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  • FAVICON.ICO PEQUENO E CACHEÁVEL
  • Sem 404 Manter pequeno, até 1KB Expires setado (mas não 10 anos à frente). Ao precisar mudar o ícone, você não poderá renomeá-lo
  • QUANDO?
  • SEMPRE!
  • AS EQUIPES MUDAM OS FRAMEWORKS MUDAM AS NECESSIDADES MUDAM MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE
  • LIVROS
  • High Performance Web Sites: Essential Knowledge for Front-End Engineers (Steve Souders)
  • Even Faster Web Sites: Performance Best Practices for Web Developers (Steve Souders)
  • BLOGS High Performance Web Sites blog http://www.stevesouders.com/blog/
  • VÍDEOS Curso - High Performance Web Sites http://www.stevesouders.com/blog/200 9/05/20/stanford-videos-available/ Speed Up Your JavaScript http://www.youtube.com/watch?v=mHt dZgou0qU
  • EVENTOS Velocity http://en.oreilly.com/velocity2009
  • DÚVIDAS?
  • OBRIGADO! FT-SITE http://levycarneiro.com