Como encarar os desafios da área de web performance e conhecer quais são as melhores ferramentas para auxiliar o desenvolvimento de páginas rápidas e mantê-las rápidas. Além disso, fazer a integração de algumas dessas ferramentas de uma forma fácil para melhorar a compreensão desses indicadores para toda a equipe de desenvolvimento.

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

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

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

26. yslow e
pagespeed
não escalam

27. via
task
runners

28. http://gulpjs.com/

29. http://gruntjs.com/

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

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

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

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

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

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

36. via
task
runners

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

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

39. tools para
monitoração

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

41. http://www.webpagetest.org/

42. http://www.webpagetest.org/

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

44. http://www.showslow.com/

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

46. showslow
url

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

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

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

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

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

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

53. Pagespeed
Insights
With
Reporting
term

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

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

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

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

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

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

64. referências

65. http://browserdiet.com/pt

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

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

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