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%

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

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

Dentro do HTML: <link rel='stylesheet' href='a.css'> Dentro de a.css: @import url('b.css'); 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“ />

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