Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O melhor da monitoração de web performance

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.

Davidson Fellipe

November 10, 2014
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide


  6. wikipédia
    é possível expressar a
    performance do que se

    pretende avaliar utilizando-se
    uma métrica previamente
    definida.

    View full-size slide

  7. alto processamento
    +
    consumo de memória

    View full-size slide


  8. - steve souders
    Performance golden rule:

    Optimize front-end
    performance first, that's where
    80/90% of the end-user
    response time is spent.

    View full-size slide

  9. 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 full-size slide

  10. web performance
    é
    user experience

    View full-size slide

  11. usuários
    satisfeitos

    View full-size slide

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

    View full-size slide

  13. o que
    irrita?

    View full-size slide

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

    View full-size slide

  15. análise
    estática

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. paralelismo
    CDNs
    diferentes domínios

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. yslow e
    pagespeed
    não escalam

    View full-size slide

  24. via
    task
    runners

    View full-size slide

  25. http://gulpjs.com/

    View full-size slide

  26. http://gruntjs.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. via
    task
    runners

    View full-size slide

  34. Apenas um share!
    - qual é o valor

    desse elemento

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

    View full-size slide

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

    View full-size slide

  36. tools para
    monitoração

    View full-size slide

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

    View full-size slide

  38. http://www.webpagetest.org/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. http://www.showslow.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Pagespeed
    Insights
    With
    Reporting
    term

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. referências

    View full-size slide

  57. http://browserdiet.com/pt

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide