Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

hoje vamos falar de performance

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

“Otimize a performance do front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.” - Steve Souders

Slide 14

Slide 14 text

http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

• Economizar 1kb significa: • Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/

Slide 17

Slide 17 text

• Economizar 1kb significa: • Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/

Slide 18

Slide 18 text

• Economizar 1kb significa: • Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

• + 15.000.000 de acessos por dia • De 3mb para 267kb • De 7.5s para 4.3s Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/

Slide 21

Slide 21 text

• Diminuir 3.2s resultou em: • Redução de custo em servidores de R$ 16.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/

Slide 22

Slide 22 text

• Diminuir 3.2s resultou em: • Aumento de receita de R$ 1.000.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/

Slide 23

Slide 23 text

html CSS imagens servidor jquery JS

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

html

Slide 26

Slide 26 text

#27 evite códigos inline

Slide 27

Slide 27 text

inline #27 .center { width: 960px; margin: 0 auto; } - requisições +tamanho

Slide 28

Slide 28 text

externo #27 + organização - tamanho + cache

Slide 29

Slide 29 text

#26 estilos no topo, scripts no rodapé

Slide 30

Slide 30 text

#26 Browser Diet

Slide 31

Slide 31 text

#26

Lorem ipsum dolor sit amet.

Slide 32

Slide 32 text

comprima seu html #25

Slide 33

Slide 33 text

normal #25

Lorem ipsum dolor sit amet.

Slide 34

Slide 34 text

#25

Lorem ipsum dolor sit amet. p>

  • li>
comprimido

Slide 35

Slide 35 text

https://code.google.com/p/htmlcompressor/

Slide 36

Slide 36 text

https://github.com/jney/grunt-htmlcompressor

Slide 37

Slide 37 text

#24 experimente async & defer

Slide 38

Slide 38 text

#24 script normal

Slide 39

Slide 39 text

#24 script async +ie10

Slide 40

Slide 40 text

#24 script defer +ie5

Slide 41

Slide 41 text

CSS

Slide 42

Slide 42 text

comprima seu css #23

Slide 43

Slide 43 text

normal #23 .center { width: 960px; margin: 0 auto; } /* --- Structure --- */ .intro { margin: 100px; }

Slide 44

Slide 44 text

#23 comprimido .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}

Slide 45

Slide 45 text

http://yui.github.com/yuicompressor/

Slide 46

Slide 46 text

http://www.cssminifier.com/

Slide 47

Slide 47 text

https://github.com/jzaefferer/grunt-css

Slide 48

Slide 48 text

combine vários arquivos em um só #22

Slide 49

Slide 49 text

#22 vs

Slide 50

Slide 50 text

http://yui.github.com/yuicompressor/

Slide 51

Slide 51 text

http://www.cssminifier.com/

Slide 52

Slide 52 text

https://github.com/jzaefferer/grunt-css

Slide 53

Slide 53 text

não use seletor universal #21

Slide 54

Slide 54 text

* { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0; } #21

Slide 55

Slide 55 text

http://meyerweb.com/eric/tools/css/reset/

Slide 56

Slide 56 text

http://necolas.github.com/normalize.css/

Slide 57

Slide 57 text

prefira ao @import #20

Slide 58

Slide 58 text

#20 vs @import url('style.css');

Slide 59

Slide 59 text

pense e repense seu key selector #19

Slide 60

Slide 60 text

key selector >> a header nav ul li a {} #19

Slide 61

Slide 61 text

key selector header nav ul li * { /* Péssimo */ } header nav ul li a { /* Muito Ruim */ } nav a { /* Ruim */ } nav a.nav-link { /* Bom */ } nav .nav-link { /* Ótimo */ } .nav-link { /* Excelente */ } #19

Slide 62

Slide 62 text

JAVASCRIPT

Slide 63

Slide 63 text

códigos de terceiros? sempre assíncronos #18

Slide 64

Slide 64 text

async var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script, #18

Slide 65

Slide 65 text

guarde o tamanho do array #17

Slide 66

Slide 66 text

ruim... var arr = new Array(1000); for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000 } #17

Slide 67

Slide 67 text

bom! var arr = new Array(1000); for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado } #17

Slide 68

Slide 68 text

http://jsperf.com/browser-diet-cache-array-length

Slide 69

Slide 69 text

http://jsperf.com/browser-diet-cache-array-length

Slide 70

Slide 70 text

evite o document.write #16

Slide 71

Slide 71 text

html5 boilerplate window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/ script>') #16

Slide 72

Slide 72 text

minimize repaints e reflows #15

Slide 73

Slide 73 text

ruim... var myList = document.getElementById("myList"); for (var i = 0; i < 100; i++) { myList.innerHTML += "" + i + ""; } #15

Slide 74

Slide 74 text

var myList = ""; for (var i = 0; i < 100; i++) { myList += "" + i + ""; } document.getElementById("myList").innerHTML = myList; bom! #15

Slide 75

Slide 75 text

http://jsperf.com/browser-diet-dom-manipulation

Slide 76

Slide 76 text

http://jsperf.com/browser-diet-dom-manipulation

Slide 77

Slide 77 text

comprima seu js #14

Slide 78

Slide 78 text

normal #14 BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } }; };

Slide 79

Slide 79 text

comprimido BrowserDiet.app=function() {return{bar:function(){}}}; #14

Slide 80

Slide 80 text

http://yui.github.com/yuicompressor/

Slide 81

Slide 81 text

https://developers.google.com/closure/compiler/?hl=pt

Slide 82

Slide 82 text

https://github.com/mishoo/UglifyJS

Slide 83

Slide 83 text

combine vários arquivos em um só #13

Slide 84

Slide 84 text

#13 vs

Slide 85

Slide 85 text

http://gruntjs.com/

Slide 86

Slide 86 text

jquery

Slide 87

Slide 87 text

use sempre a última versão #12

Slide 88

Slide 88 text

#12 vs

Slide 89

Slide 89 text

seletores #11

Slide 90

Slide 90 text

#11 find children .class #id context

Slide 91

Slide 91 text

#11 $("#foo"); id é mais rapido

Slide 92

Slide 92 text

http://jsperf.com/browser-diet-jquery-selectors

Slide 93

Slide 93 text

http://jsperf.com/browser-diet-jquery-selectors

Slide 94

Slide 94 text

abuse do encadeamento #10

Slide 95

Slide 95 text

não encadeando $("#object").addClass("foo"); $("#object").css("border-color","#f0f"); $("#object").width(200); $("#object").removeClass("bar"); #10

Slide 96

Slide 96 text

encadeando $("#object").addClass("foo").css("border-color", "#ccc").width(200).addClass("bar"); #10

Slide 97

Slide 97 text

http://jsperf.com/browser-diet-chaining

Slide 98

Slide 98 text

http://jsperf.com/browser-diet-chaining

Slide 99

Slide 99 text

use for ao invés de each #9

Slide 100

Slide 100 text

#9 while reverso for $.each for in

Slide 101

Slide 101 text

#9 for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; } for é mais rapido

Slide 102

Slide 102 text

http://jsperf.com/browser-diet-jquery-each-vs-for-loop

Slide 103

Slide 103 text

http://jsperf.com/browser-diet-jquery-each-vs-for-loop

Slide 104

Slide 104 text

não use jquery #8

Slide 105

Slide 105 text

jquery $('a').on('click', function() { console.log( $(this).attr('id') ); }); #8

Slide 106

Slide 106 text

js puro $('a').on('click', function() { console.log( this.id ); }); #8

Slide 107

Slide 107 text

http://jsperf.com/browser-diet-this-attr-id-vs-this-id

Slide 108

Slide 108 text

http://jsperf.com/browser-diet-this-attr-id-vs-this-id

Slide 109

Slide 109 text

imagens

Slide 110

Slide 110 text

css sprites #7

Slide 111

Slide 111 text

imagem #7

Slide 112

Slide 112 text

css #7 .icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px; } .icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px; }

Slide 113

Slide 113 text

http://wearekiss.com/spritepad

Slide 114

Slide 114 text

http://www.spritecow.com/

Slide 115

Slide 115 text

http://compass-style.org/help/tutorials/spriting/

Slide 116

Slide 116 text

não escale as imagens direto no código #6

Slide 117

Slide 117 text

html #6 Logo

Slide 118

Slide 118 text

otimize as imagens #5

Slide 119

Slide 119 text

#5 lossless png 8 png 24 jpg gif

Slide 120

Slide 120 text

servidor

Slide 121

Slide 121 text

habilite o caches dos arquivos #4

Slide 122

Slide 122 text

.htaccess #4 ExpiresActive On ExpiresByType image/gif "access plus 6 months" ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType text/javascript "access plus 6 months"

Slide 123

Slide 123 text

gzip #3

Slide 124

Slide 124 text

.htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript

Slide 125

Slide 125 text

bonus ^

Slide 126

Slide 126 text

ferramentas de análise #2

Slide 127

Slide 127 text

http://yslow.org/

Slide 128

Slide 128 text

https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR

Slide 129

Slide 129 text

http://www.webpagetest.org/

Slide 130

Slide 130 text

performance deve ser pensada no projeto como um todo

Slide 131

Slide 131 text

e não só deixar pra testar no finalzinho

Slide 132

Slide 132 text

lembre-se

Slide 133

Slide 133 text

o preguiçoso trabalha dobrado

Slide 134

Slide 134 text

quero aprender mais, aonde eu vou?

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

https://developers.google.com/speed/docs/best-practices/rules_intro

Slide 138

Slide 138 text

http://developer.yahoo.com/performance/rules.html

Slide 139

Slide 139 text

nada em português?

Slide 140

Slide 140 text

e se a gente juntasse...

Slide 141

Slide 141 text

renato mangini - google

Slide 142

Slide 142 text

sérgio lopes - caelum

Slide 143

Slide 143 text

mike taylor - opera

Slide 144

Slide 144 text

marcel duran - twitter

Slide 145

Slide 145 text

“Pica voando das galáxias criado em cativeiro” browserdiet.com/pt

Slide 146

Slide 146 text

“Pica voando das galáxias criado em cativeiro” - Bernard de Luna

Slide 147

Slide 147 text

“Pica voando das galáxias criado em cativeiro” - Bernard de Luna

Slide 148

Slide 148 text

2º Encontro - 2011

Slide 149

Slide 149 text

fim. zenorocha.com browserdiet.com #1