O melhor da monitoração de web performance

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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. performance
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. alto processamento
   +
   consumo de memória
   

   View Slide

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

   View Slide

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

    View Slide

11. web performance
    é
    user experience
    

    View Slide

12. usuários
    satisfeitos
    

    View Slide

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

    View Slide

14. o que
    irrita?
    

    View Slide

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

    View Slide

16. análise
    estática
    

    View Slide

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

    View Slide

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

    View Slide

19. paralelismo
    CDNs
    diferentes domínios
    

    View Slide

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

    View Slide

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

    View Slide

22. View Slide

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
    

    View Slide

24. View Slide

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

    View Slide

26. yslow e
    pagespeed
    não escalam
    

    View Slide

27. via
    task
    runners
    

    View Slide

28. http://gulpjs.com/
    

    View Slide

29. http://gruntjs.com/
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. via
    task
    runners
    

    View Slide

37. Apenas um share!
    - qual é o valor

    desse elemento

    na interface?
    - posso retardar o
    carregamento?
    - como melhoro a
    percepção do
    usuário?
    

    View Slide

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

    View Slide

39. tools para
    monitoração
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. showslow
    url
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. Pagespeed
    Insights
    With
    Reporting
    term
    

    View Slide

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

    View Slide

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

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. referências
    

    View Slide

65. http://browserdiet.com/pt
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide