O melhor da monitoração de web performance
-
Upload
davidson-fellipe -
Category
Software
-
view
867 -
download
8
description
Transcript of O melhor da monitoração de web performance
monitoração de web performance
o melhor da
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
“
wikipédia
designa as apresentações de dança, canto, teatro, mágica, mímica, malabarismo, referindo-se ao seu executante como performer.
https://www.flickr.com/photos/joshholmes/9596598726
“
wikipédia
é possível expressar a performance do que se pretende avaliar utilizando-se uma métrica previamente definida.
alto processamento +
consumo de memória
“
- steve souders
Performance golden rule:Optimize front-end performance first, that's where 80/90% of the end-user response time is spent.
http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false
94% tempo de
carregamento
web performance é
user experience
usuários satisfeitos
+ engajamento
https://twitter.com/igrigorik/status/300226402496704512
o que irrita?
49% 31% 20%
1s - 10 s 10s - 20s +20s
paciência de usuários mobile
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-wptgrunt.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 valordesse elementona 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
produção
qa
deploy
dev
feature ou
bug fix
deploy
redução de performance
keepfast
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/
http://www.showslow.com/details/1283344/http://fellipe.com/
showslow
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
“
Anônimo
você não pode otimizar o que você não pode mensurar
twitter.com/davidsonfellipe github.com/davidsonfellipe fellipe.com/talks