Your SlideShare is downloading. ×
0
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:

        ...
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 ...
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...
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.”...
QUEM?
STEVE SOUDERS
- Trabalha para o Google em
iniciativas de performance
Web e Open Source;
- Ex-Yahoo e criador do
plugin YSl...
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/...
Na view:
<%= javascript_include_tag :all, :cache => true %>


HTML gerado:
<script type="text/javascript" src="/javascript...
Na view:
<%= javascript_include_tag :all, :cache => “shop” %>


HTML gerado:
<script type="text/javascript" src="/javascri...
Na view:
<%= stylesheet_link_tag :all, :cache => “styles” %>


HTML gerado:
<link href="/stylesheets/styles.css" media="sc...
CSS SPRITES
a.buy {
          transparent url(/images/sprites.gif)
          no-repeat
          scroll
          -358px
          -26...
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     ...
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
...
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
  ...
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?200908151420...
USAR TIMESTAMP
        NO NOME DE ARQUIVO

<link
href="/stylesheets/   styles.20090815142059.css“
media="screen" rel="styl...
.htaccess
RewriteRule ^(.+).(d{14}).(js|css|png|gif|jpg)$ $1.$3 [L]
MAX_AGE

                          Define que o
                              conteúdo
                         de uma pág...
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 ...
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 na...
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...
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/defaul...
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 c...
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 con...
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 extra...
Google.com: uma sprite image
     é carregada no “onLoad”.

    Esta imagem não é usada em
google.com, mas somente nas pág...
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 carre...
Search.yahoo.com: você pode ver
 como alguns componentes extras são
requisitados depois que você começa a
       digitar n...
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 ...
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 de...
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 ...
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 perfor...
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...
// event delegation
var setup = function() {
     document.onclick = function(e) {
          e = e || window.event;
      ...
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 br...
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...
OTIMIZAÇÃO
    DE
CSS SPRITES
Arranjar imagens horizontalmente
   geralmente resulta em arquivos
              menores

Manter cores similares dentro do...
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 { }

...
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ê
   ...
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/

  ...
EVENTOS
              Velocity
http://en.oreilly.com/velocity2009
DÚVIDAS?
OBRIGADO!

         FT-SITE
http://levycarneiro.com
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Web Performance Client Side
Upcoming SlideShare
Loading in...5
×

Web Performance Client Side

2,046

Published on

Published in: Technology

Transcript of "Web Performance Client Side"

  1. 1. WEB PERFORMANCE CLIENT-SIDE
  2. 2. SITES LENTOS
  3. 3. RAIVA
  4. 4. FRUSTRAÇÃO
  5. 5. ABANDONO
  6. 6. O QUE É?
  7. 7. ESCALAR UM SITE PARA MILHÕES DE USUÁRIOS
  8. 8. Receber a página do servidor: 200 ms Carregar a página no browser: 3,8 s TOTAL = 4 s
  9. 9. Otimizando server time em 50% 200 ms -> 100 ms
  10. 10. REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  11. 11. REDUÇÃO NO TEMPO TOTAL 4 s -> 3,9 s SÓ 2,5%
  12. 12. DE 80 A 90% DO TEMPO PARA CARREGAR UM SITE É USADO PARA BAIXAR COMPONENTES DA PÁGINA: IMAGENS, CSS, SCRIPTS, FLASH, ETC.
  13. 13. POR QUÊ?
  14. 14. NÚMEROS
  15. 15. Otimizações em imagens tornaram o site de2x a 3x mais rápido, com significante aumento de interação com o usuário
  16. 16. Um delay de 400ms causou uma redução de 0.59% em buscas por usuário
  17. 17. 2 segundos causou uma redução de Demora de 4,3% em receita por usuário
  18. 18. 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
  19. 19. Usuários que experimentam load times mais rápidos visualizam 50% mais páginas por visita
  20. 20. Redução de 2 para 1 segundo em load time, reduziu Exit Rate de 15% para 10%
  21. 21. “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)
  22. 22. QUEM?
  23. 23. 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.
  24. 24. COMO?
  25. 25. YSLOW
  26. 26. PAGE SPEED
  27. 27. SAFARI
  28. 28. INICIATIVAS
  29. 29. YAHOO Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  30. 30. GOOGLE Let’s make the web faster http://code.google.com/speed/
  31. 31. REDUZIR O NÚMERO DE CONEXÕES HTTP
  32. 32. AGRUPAR ARQUIVOS CSS E JS EM ARQUIVOS ÚNICOS E CACHEADOS
  33. 33. 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>
  34. 34. Na view: <%= javascript_include_tag :all, :cache => true %> HTML gerado: <script type="text/javascript" src="/javascripts/all.js"></script>
  35. 35. Na view: <%= javascript_include_tag :all, :cache => “shop” %> HTML gerado: <script type="text/javascript" src="/javascripts/shop.js"></script>
  36. 36. Na view: <%= stylesheet_link_tag :all, :cache => “styles” %> HTML gerado: <link href="/stylesheets/styles.css" media="screen" rel="stylesheet" type="text/css" />
  37. 37. CSS SPRITES
  38. 38. a.buy { transparent url(/images/sprites.gif) no-repeat scroll -358px -268px; }
  39. 39. DIVIDIR COMPONENTES ENTRE DOMÍNIOS
  40. 40. css.static.mysite.com img.static.mysite.com scripts.static.mysite.com
  41. 41. 2 CONEXÕES EM PARALELO
  42. 42. 4 CONEXÕES EM PARALELO
  43. 43. 8 CONEXÕES EM PARALELO
  44. 44. 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
  45. 45. FIREFOX about:config network.http.max-persistent-connections- per-server
  46. 46. IE Chave no Registro
  47. 47. USAR UMA CDN Content Delivery Network
  48. 48. 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
  49. 49. SERVIÇOS PÚBLICOS Google AJAX Libraries YUI hosting on Yahoo! network (somente javascript)
  50. 50. SERVIÇOS PAGOS Amazon Cloudfront S3 Akamai
  51. 51. 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
  52. 52. ARQUIVOS ESTÁTICOS NÃO EXPIRAM NUNCA
  53. 53. AO MUDAR UM ARQUIVO, ADICIONAR UM TIMESTAMP À QUERYSTRING OU AO NOME DE ARQUIVO
  54. 54. DICA: NÃO USAR TIMESTAMP NA QUERYSTRING <link href="/stylesheets/ styles.css?20090815142059“ media="screen" rel="stylesheet" type="text/css" />
  55. 55. USAR TIMESTAMP NO NOME DE ARQUIVO <link href="/stylesheets/ styles.20090815142059.css“ media="screen" rel="stylesheet" type="text/css" />
  56. 56. .htaccess RewriteRule ^(.+).(d{14}).(js|css|png|gif|jpg)$ $1.$3 [L]
  57. 57. 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)
  58. 58. ETAG É uma chave para verificar se uma página ainda é a mesma Etag: "620b360455bf03e96951d2…"
  59. 59. LAST_MODIFIED Quando uma página foi modificada pela última vez?
  60. 60. GZIPAR COMPONENTES CSS, HTML, Scripts (imagens, PDF, Flash já são compactados)
  61. 61. 90% dos browsers atuais suportam gzip
  62. 62. STYLESHEETS NO TOPO DA PÁGINA
  63. 63. Páginas ‘parecem’ carregar mais rapidamente HTML sendo montado serve como indicação do carregamento da página
  64. 64. JAVASCRIPTS NO FINAL DA PÁGINA
  65. 65. Scripts bloqueiam downloads paralelos Scripts com document.write Atributo DEFER
  66. 66. EVITAR EXPRESSÕES CSS
  67. 67. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Eventos são executados muitas vezes (gerando processamento adicional)
  68. 68. USAR JAVASCRIPT E CSS EXTERNAMENTE
  69. 69. Exceção: Sites com poucos pageviews por sessão podem se beneficiar de usar javascript e CSS embutidos diretamente no HTML
  70. 70. REDUZIR QUERIES DNS
  71. 71. Influencia a quantidade de conexões paralelas. O ideal é usar de 2 a 4 hostnames diferentes.
  72. 72. Google Chrome acelera navegação fazendo pre-resolv de links
  73. 73. REDUZIR TAMANHO DE ARQUIVOS JS E CSS (MINIFY)
  74. 74. 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 ); }, (…)
  75. 75. 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)},
  76. 76. EVITAR REDIRECTS Conexões desnecessárias
  77. 77. HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
  78. 78. 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
  79. 79. REMOVER SCRIPTS DUPLICADOS Isso acontece!
  80. 80. CACHEAR AJAX
  81. 81. 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.
  82. 82. EM REQUISIÇÕES AJAX USE O MÉTODO GET
  83. 83. 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.
  84. 84. POST LOAD DE COMPONENTES
  85. 85. Drag-and-drop Animações Imagens e vídeos depois do “fold”
  86. 86. YUI Image Loader YUI Get utility
  87. 87. PRE LOAD DE COMPONENTES
  88. 88. UNCONDITIONAL PRELOAD Assim que o evento “onLoad” é disparado, sua página começa a baixar alguns componentes extras.
  89. 89. 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.
  90. 90. 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.
  91. 91. Search.yahoo.com: você pode ver como alguns componentes extras são requisitados depois que você começa a digitar na caixa de busca.
  92. 92. ANTICIPATED PRELOAD “O novo site é legal, mas está mais lento do que antes”
  93. 93. 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.
  94. 94. REDUZIR A QUANTIDADE ELEMENTOS DOM Buscar otimização de markup
  95. 95. document.getElementsByTagName('*').length
  96. 96. REDUZIR USO DE IFRAMES
  97. 97. 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.
  98. 98. IFRAMES compartilham o pool de conexões do browser, deixando o site mais lento
  99. 99. SEM ERROS 404 Em scripts, css, imagens
  100. 100. REDUZIR TAMANHO DE COOKIES
  101. 101. 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)
  102. 102. DOMÍNIOS SEM COOKIES PARA COMPONENTES Browser não deve enviar cookies ao requisitar css, scripts e imagens
  103. 103. SMART EVENT HANDLERS Event Handling vs. Event Delegation
  104. 104. EVENT HANDLING Atachar eventos a vários links dentro de um DIV
  105. 105. PROBLEMAS Muitos eventos atachados Memory Leaks Possibilidade alta de crash Degradação de performance Precisa atachar eventos novamente, caso o DOM mude
  106. 106. EVENT BUBBLING Atachar eventos a um elemento-pai (um DIV por exemplo) e capturar os eventos de seus links
  107. 107. 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)
  108. 108. // 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;
  109. 109. NÃO USAR @IMPORT
  110. 110. <link rel='stylesheet' href='a.css'>
  111. 111. <style> @import url('a.css'); </style>
  112. 112. <link rel='stylesheet' href='a.css'> <style> @import url('b.css'); </style> IE 6,7,8
  113. 113. Dentro do HTML: <link rel='stylesheet' href='a.css'> Dentro de a.css: @import url('b.css'); Todos os browsers
  114. 114. <link rel='stylesheet' href='a.css'> <link rel='stylesheet' href='b.css'> Downloads em paralelo (em todos os browsers)
  115. 115. OTIMIZAÇÃO DE IMAGENS
  116. 116. Verificar se GIFs estão usando tamanho de paleta de cores adequada Converter GIFs para PNG
  117. 117. Otimizar PNG pngcrush image.png -rem alla -reduce - brute result.png Otimizar JPG jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  118. 118. OTIMIZAÇÃO DE CSS SPRITES
  119. 119. Arranjar imagens horizontalmente geralmente resulta em arquivos menores Manter cores similares dentro do sprite, idealmente dentro de 256 cores, para usar PNG8
  120. 120. SELETORES CSS EFICIENTES
  121. 121. SELETOR-CHAVE Primeiro elemento à direita. Quanto mais abrangente, pior DIV.content * { }
  122. 122. Não qualificar regras de ID com tags ou classes BAD! button#backButton { } .menu-left#newMenuIcon { } GOOD! #backButton { } #newMenuIcon { }
  123. 123. Não qualificar regras de Classe com tags BAD! span.indented { } GOOD! .span-indented { }
  124. 124. USAR ARQUIVOS JS QUE SÓ CONTENHAM CÓDIGO QUE SERÁ USADO NA PÁGINA Framework YUI
  125. 125. COLOQUE O TAMANHO DAS IMAGENS NO HTML Não colocar valores menoresou maiores do que o tamanho real da imagem
  126. 126. Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  127. 127. Imagem original 570x378 pixels <img height=“70“ width=“45" src="img/foto.jpg“ />
  128. 128. FAVICON.ICO PEQUENO E CACHEÁVEL
  129. 129. 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
  130. 130. QUANDO?
  131. 131. SEMPRE!
  132. 132. AS EQUIPES MUDAM OS FRAMEWORKS MUDAM AS NECESSIDADES MUDAM MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE
  133. 133. LIVROS
  134. 134. High Performance Web Sites: Essential Knowledge for Front-End Engineers (Steve Souders)
  135. 135. Even Faster Web Sites: Performance Best Practices for Web Developers (Steve Souders)
  136. 136. BLOGS High Performance Web Sites blog http://www.stevesouders.com/blog/
  137. 137. 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
  138. 138. EVENTOS Velocity http://en.oreilly.com/velocity2009
  139. 139. DÚVIDAS?
  140. 140. OBRIGADO! FT-SITE http://levycarneiro.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×