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