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

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

3.
https://github.com/globocom/iwanttoworkatglobocom

4.
performance

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

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

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

8.
alto processamento
+
consumo de memória

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

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

11.
web performance
é
user experience

12.
usuários
satisfeitos

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

14.
o que
irrita?

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

16.
análise
estática

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

18.
reduzir requests
criar sprites
concatenar css e js
data-uri

19.
paralelismo
CDNs
diferentes domínios

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

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

22.
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

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

24.
yslow e
pagespeed
não escalam

25.
via
task
runners

26.
http://gulpjs.com/

27.
http://gruntjs.com/

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

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

30.
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

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

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

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

34.
via
task
runners

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

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

37.
tools para
monitoração

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

39.
http://www.webpagetest.org/

40.
http://www.webpagetest.org/

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

42.
http://www.showslow.com/

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

44.
showslow
url

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

46.
https://github.com/macbre/phantomas

47.
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

48.
https://github.com/davidsonfellipe/keepfast

49.
https://github.com/davidsonfellipe/keepfast

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

51.
Pagespeed
Insights
With
Reporting
term

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

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

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

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

56.
Há um mundo
de conhecimento
em busca do 60 FPS

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

58.
referências

59.
http://browserdiet.com/pt

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

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

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