Slide 1
Slide 1 text
monitoração de
web performance
o melhor da
Davidson Fellipe
Slide 2
Slide 2 text
senior front-end engineer
globo.com ~ 2010
front in bh, rio.js, pernambuco.js e
front in recife
mais em fellipe.com
Slide 3
Slide 3 text
https://github.com/globocom/iwanttoworkatglobocom
Slide 4
Slide 4 text
performance
Slide 5
Slide 5 text
“
wikipédia
designa as apresentações de
dança, canto, teatro, mágica,
mímica, malabarismo,
referindo-se ao seu executante
como performer.
Slide 6
Slide 6 text
https://www.flickr.com/photos/joshholmes/9596598726
Slide 7
Slide 7 text
“
wikipédia
é possível expressar a
performance do que se
pretende avaliar utilizando-se
uma métrica previamente
definida.
Slide 8
Slide 8 text
alto processamento
+
consumo de memória
Slide 9
Slide 9 text
“
- steve souders
Performance golden rule:
Optimize front-end
performance first, that's where
80/90% of the end-user
response time is spent.
Slide 10
Slide 10 text
http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false
94%
tempo de
carregamento
Slide 11
Slide 11 text
web performance
é
user experience
Slide 12
Slide 12 text
usuários
satisfeitos
Slide 13
Slide 13 text
+ engajamento
https://twitter.com/igrigorik/status/300226402496704512
Slide 14
Slide 14 text
o que
irrita?
Slide 15
Slide 15 text
49%
31%
20%
1s - 10 s
10s - 20s
+20s
paciência de
usuários mobile
gomesz.com e akamai.com
Slide 16
Slide 16 text
análise
estática
Slide 17
Slide 17 text
gzip, sprites, concatenar
css e js, css no head, cache
expires, js embaixo,
minificar, uglify
Slide 18
Slide 18 text
reduzir requests
criar sprites
concatenar css e js
data-uri
Slide 19
Slide 19 text
paralelismo
CDNs
diferentes domínios
Slide 20
Slide 20 text
reduzir tráfego
minificar js, css, img e html
domínios sem cookies
gzip
Slide 21
Slide 21 text
https://developers.google.com/speed/pagespeed/module/download
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
PageSpeed
criado pela google em 2010
plugin para chrome e firefox
avalia 27 regras
API aberta limitada a 25k reqs/dia
módulos para Apache e Nginx
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Yslow
criado pela yahoo! em 2007
plugin para chrome e firefox
avalia 23 critérios
código aberto
Slide 26
Slide 26 text
yslow e
pagespeed
não escalam
Slide 27
Slide 27 text
via
task
runners
Slide 28
Slide 28 text
http://gulpjs.com/
Slide 29
Slide 29 text
http://gruntjs.com/
Slide 30
Slide 30 text
Title Text
https://github.com/jrcryer/grunt-pagespeed
Slide 31
Slide 31 text
grunt-
pagespeed
pagespeed: {
options: {
nokey: true,
url: "https://fellipe.com"
},
paths: {
options: {
paths: ["/talks",
"/blog"],
locale: "en_GB",
strategy: "desktop",
threshold: 80
}}}
js
Slide 32
Slide 32 text
grunt-wpt
grunt.initConfig({
wpt: {
options: {
locations: ['Tokyo', 'SanJose_IE9'],
key: process.env.WPT_API_KEY
},
sideroad: {
options: {
url: [
‘http://fellipe.com/blog',
‘http://fellipe.com/talks
]
},
dest: ‘tmp/fellipe/'
}}});
js
Slide 33
Slide 33 text
Title Text
https://github.com/sideroad/grunt-wpt
Slide 34
Slide 34 text
workflow com
gruntjs e gulp
https://github.com/
davidsonfellipe/grunt-workflow
http://yeoman.io/blog/
performance-optimization.html
Slide 35
Slide 35 text
http://globoesporte.globo.com/eu-atleta/calendario.html
Slide 36
Slide 36 text
via
task
runners
Slide 37
Slide 37 text
Apenas um share!
- qual é o valor
desse elemento
na interface?
- posso retardar o
carregamento?
- como melhoro a
percepção do
usuário?
Slide 38
Slide 38 text
Solução
- imagem fake
- carregamento
dependente do scroll
- reduzindo cerca de 40
requests
Slide 39
Slide 39 text
tools para
monitoração
Slide 40
Slide 40 text
Cenário com
monitoração
produção
qa
deploy
dev
feature
ou
bug fix
deploy
redução de
performance
keepfast
Slide 41
Slide 41 text
http://www.webpagetest.org/
Slide 42
Slide 42 text
http://www.webpagetest.org/
Slide 43
Slide 43 text
Webpagetest
criado pela AOL em 2008
teste de velocidade
geolocalizado
permite especificar o browser
mantido pela google
código aberto
Slide 44
Slide 44 text
http://www.showslow.com/
Slide 45
Slide 45 text
http://www.showslow.com/details/1283344/http://fellipe.com/
showslow
Slide 46
Slide 46 text
showslow
url
Slide 47
Slide 47 text
showslow
http://www.showslow.com/details/1283344/http://fellipe.com/
Slide 48
Slide 48 text
https://github.com/macbre/phantomas
Slide 49
Slide 49 text
phantomas
número de eventos via jQuery,
chamadas para window.write
seletores complexos e duplicados
(via analisar-css)
formato de saída JSON e CSV
Slide 50
Slide 50 text
https://github.com/davidsonfellipe/keepfast
Slide 51
Slide 51 text
https://github.com/davidsonfellipe/keepfast
Slide 52
Slide 52 text
wrappers baseados
em phantomjs
https://github.com/jmervine/
node-yslowjs
https://github.com/addyosmani/
psi
Slide 53
Slide 53 text
Pagespeed
Insights
With
Reporting
term
Slide 54
Slide 54 text
algumas soluções
pagas
http://gtmetrix.com/
https://www.pingdom.com/
https://www.dareboost.com/
http://newrelic.com/browser-
monitoring
Slide 55
Slide 55 text
“
um ser
A adição de novas
funcionalidades pode ser um
bom momento para melhorias
na página atual
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
A A A A A
no WPT não garante
que você está livre
de problemas
de performance
Slide 61
Slide 61 text
SPOF
dependências de terceiros
aumento do número de
requests
imagens sem compressão
imagens que poderiam ser
sprites
Slide 62
Slide 62 text
Há um mundo
de conhecimento
em busca do 60 FPS
Slide 63
Slide 63 text
http://google.github.io/tracing-framework/
Slide 64
Slide 64 text
referências
Slide 65
Slide 65 text
http://browserdiet.com/pt
Slide 66
Slide 66 text
https://github.com/davidsonfellipe/awesome-wpo
Slide 67
Slide 67 text
“
Anônimo
você não pode otimizar o que
você não pode mensurar
Slide 68
Slide 68 text
twitter.com/davidsonfellipe
github.com/davidsonfellipe
fellipe.com/talks