o melhor da
monitoração de
web performance
Davidson Fellipe

senior front-end engineer
globo.com ~ 2010
front in bh, rio.js, pernambuco.js e
front in recife
mais em fellipe.com

https://github.com/globocom/iwanttoworkatglobocom

performance

“
designa as apresentações de
dança, canto, teatro, mágica,
mímica, malabarismo,
referindo-se ao seu executante
como performer.
wikipédia

https://www.flickr.com/photos/joshholmes/9596598726

“
é possível expressar a
performance do que se
pretende avaliar utilizando-se
uma métrica previamente
definida.
wikipédia

alto processamento
+
consumo de memória

“
Performance golden rule:
Optimize front-end
performance first, that's where
80/90% of the end-user
response time is spent.
- steve souders

94%
tempo de
carregamento
http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false

web performance
é
user experience

usuários
satisfeitos

+ engajamento
https://twitter.com/igrigorik/status/300226402496704512

o que
irrita?

paciência de
usuários mobile
49%
31%
20%
1s - 10 s
10s - 20s
+20s
gomesz.com e akamai.com

análise
estática

gzip, sprites, concatenar
css e js, css no head, cache
expires, js embaixo,
minificar, uglify

reduzir requests
criar sprites
concatenar css e js
data-uri

paralelismo
CDNs
diferentes domínios

reduzir tráfego
minificar js, css, img e html
domínios sem cookies
gzip

https://developers.google.com/speed/pagespeed/module/download

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

Yslow
criado pela yahoo! em 2007
plugin para chrome e firefox
avalia 23 critérios
código aberto

yslow e
pagespeed
não escalam

via
task
runners

http://gulpjs.com/

http://gruntjs.com/

Title Text
https://github.com/jrcryer/grunt-pagespeed

grunt-pagespeed
pagespeed: {
options: {
nokey: true,
url: "https://fellipe.com"
},
paths: {
options: {
paths: ["/talks",
"/blog"],
locale: "en_GB",
strategy: "desktop",
threshold: 80
}}} js

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

Title Text
https://github.com/sideroad/grunt-wpt

workflow com
gruntjs e gulp
https://github.com/
davidsonfellipe/grunt-workflow
http://yeoman.io/blog/
performance-optimization.html

http://globoesporte.globo.com/eu-atleta/calendario.html

via
task
runners

Apenas um share!
- qual é o valor
desse elemento
na interface?
- posso retardar o
carregamento?
- como melhoro a
percepção do
usuário?

Solução
- imagem fake
- carregamento
dependente do scroll
- reduzindo cerca de 40
requests

tools para
monitoração

Cenário com
monitoração
qa
deploy
produção
dev
feature
ou
bug fix
deploy
keepfast
redução de
performance

http://www.webpagetest.org/

http://www.webpagetest.org/

Webpagetest
criado pela AOL em 2008
teste de velocidade
geolocalizado
permite especificar o browser
mantido pela google
código aberto

http://www.showslow.com/

showslow
http://www.showslow.com/details/1283344/http://fellipe.com/

showslow
url

showslow
http://www.showslow.com/details/1283344/http://fellipe.com/

https://github.com/macbre/phantomas

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

https://github.com/davidsonfellipe/keepfast

https://github.com/davidsonfellipe/keepfast

wrappers baseados
em phantomjs
https://github.com/jmervine/
node-yslowjs
https://github.com/addyosmani/
psi

Pagespeed
Insights
With
Reporting
term

algumas soluções
pagas
http://gtmetrix.com/
https://www.pingdom.com/
https://www.dareboost.com/
http://newrelic.com/browser-monitoring

“
um ser
A adição de novas
funcionalidades pode ser um
bom momento para melhorias
na página atual

A A A A A
no WPT não garante
que você está livre
de problemas
de performance

SPOF
dependências de terceiros
aumento do número de
requests
imagens sem compressão
imagens que poderiam ser
sprites

Há um mundo
de conhecimento
em busca do 60 FPS

http://google.github.io/tracing-framework/

referências

http://browserdiet.com/pt

https://github.com/davidsonfellipe/awesome-wpo

“
você não pode otimizar o que
você não pode mensurar
Anônimo

twitter.com/davidsonfellipe
github.com/davidsonfellipe
fellipe.com/talks