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.

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

November 10, 2014
Tweet

Transcript

  1. monitoração de web performance o melhor da 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. “ wikipédia designa as apresentações de dança, canto, teatro, mágica,

    mímica, malabarismo, referindo-se ao seu executante como performer.
  6. https://www.flickr.com/photos/joshholmes/9596598726

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

    pretende avaliar utilizando-se uma métrica previamente definida.
  8. alto processamento + consumo de memória

  9. “ - steve souders Performance golden rule: Optimize front-end performance

    first, that's where 80/90% of the end-user response time is spent.
  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

  11. web performance é user experience

  12. usuários satisfeitos

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

  14. o que irrita?

  15. 49% 31% 20% 1s - 10 s 10s - 20s

    +20s paciência de usuários mobile 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. None
  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
  24. None
  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 produção qa deploy dev feature ou bug

    fix deploy redução de performance keepfast
  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. http://www.showslow.com/details/1283344/http://fellipe.com/ showslow

  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
  56. None
  57. None
  58. None
  59. None
  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. “ Anônimo você não pode otimizar o que você não

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