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. senior front-end engineer globo.com ~ 2010 front in bh, rio.js,

    pernambuco.js e front in recife mais em fellipe.com
  2. “ wikipédia designa as apresentações de dança, canto, teatro, mágica,

    mímica, malabarismo, referindo-se ao seu executante como performer.
  3. “ wikipédia é possível expressar a performance do que se

    pretende avaliar utilizando-se uma métrica previamente definida.
  4. “ - steve souders Performance golden rule: Optimize front-end performance

    first, that's where 80/90% of the end-user response time is spent.
  5. 49% 31% 20% 1s - 10 s 10s - 20s

    +20s paciência de usuários mobile gomesz.com e akamai.com
  6. gzip, sprites, concatenar css e js, css no head, cache

    expires, js embaixo, minificar, uglify
  7. 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
  8. Yslow criado pela yahoo! em 2007 plugin para chrome e

    firefox avalia 23 critérios código aberto
  9. grunt- pagespeed pagespeed: { options: { nokey: true, url: "https://fellipe.com"

    }, paths: { options: { paths: ["/talks", "/blog"], locale: "en_GB", strategy: "desktop", threshold: 80 }}} js
  10. 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
  11. Apenas um share! - qual é o valor
 desse elemento


    na interface? - posso retardar o carregamento? - como melhoro a percepção do usuário?
  12. Cenário com monitoração produção qa deploy dev feature ou bug

    fix deploy redução de performance keepfast
  13. Webpagetest criado pela AOL em 2008 teste de velocidade geolocalizado

    permite especificar o browser mantido pela google código aberto
  14. 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
  15. “ um ser A adição de novas funcionalidades pode ser

    um bom momento para melhorias na página atual
  16. A A A A A no WPT não garante que

    você está livre de problemas de performance
  17. SPOF dependências de terceiros aumento do número de requests imagens

    sem compressão imagens que poderiam ser sprites