MEDINDO O DESEMPENHO DE
SUA APLICAÇÃO COM AS APIS DE
WEB PERFORMANCE
Talita Pagani
MSTECH | @talitapagani
16/05/2014 1DevC...
SOBRE • Mestranda em Ciência da Computação –
UFSCar
– Bacharel em Ciência da Computação – USC
– Especialista em Gerenciame...
PERFORMANCE MATTERS
#perfmatters
16/05/2014 3DevCamp 2014 | Web Performance
16/05/2014 DevCamp 2014 | Web Performance 4
PORQUE DEVEMOS
NOS IMPORTAR COM
PERFORMANCE?
Usuários
Mecanismos de busca
Perc...
16/05/2014 DevCamp 2014 | Web Performance 5
“YOU CAN’T
OPTIMIZE WHAT
YOU CAN’T
MEASURE”
APIs
Nativas
NAVIGATION TIMING
Métricas de
carregamento da página.
RESOURCE TIMING
Métricas de
carregamento dos
recursos d...
APIs
Nativas
NAVIGATION TIMING
Métricas de
carregamento da página.
RESOURCE TIMING
Métricas de
carregamento dos
recursos d...
NAVIGATION TIMING API
16/05/2014 8DevCamp 2014 | Web Performance
NAVIGATION
TIMING API
16/05/2014 DevCamp 2014 | Web Performance 9
NAVIGATION
Como o usuário
chegou à página.
TIMING
Dados ...
NAVIGATION
TIMING API
window.performance {
object navigation;
object timing;
}
16/05/2014 10DevCamp 2014 | Web Performance
NAVIGATION
TIMING API
16/05/2014 DevCamp 2014 | Web Performance 11
NAVIGATION
Mensurar o tipo de navegação, se é
reload, s...
NAVIGATION
TIMING API
16/05/2014 DevCamp 2014 | Web Performance 12
TIMING
navigationStart;
unloadEventStart;
unloadEventEn...
16/05/2014 DevCamp 2014 | Web Performance 13
UTILIZANDO AS MÉTRICAS NO GOOGLE ANALYTICS
16/05/2014 DevCamp 2014 | Web Performance 14
https://gist.github.com/talitapaga...
RESOURCE TIMING API
16/05/2014 15DevCamp 2014 | Web Performance
RESOURCE
TIMING API
• Mensurar
carregamento dos
recursos externos:
CSS, JS, imagens, etc.
window.performance
.getEntriesBy...
16/05/2014 DevCamp 2014 | Web Performance 17
16/05/2014 DevCamp 2014 | Web Performance 18
https://gist.github.com/talitapagani/a4a211f45ce31425c963
USER TIMING API
16/05/2014 19DevCamp 2014 | Web Performance
USER
TIMING
API
• Marcar trechos de código para
mensurar o tempo de
execução
window.performance.mark(‘nome_da_ma
rcacao');...
USER
TIMING
API
• Descartando marcações e
métricas
window.performance.clearMarks();
window.performance.clearMark(‘nome_
da...
16/05/2014 DevCamp 2014 | Web Performance 22
https://gist.github.com/talitapagani/11c6f59b96b6a074caa5
16/05/2014 DevCamp 2014 | Web Performance 23
https://gist.github.com/talitapagani/8505c8014e14f26b2795
FERRAMENTAS
16/05/2014 DevCamp 2014 | Web Performance 24
16/05/2014 DevCamp 2014 | Web Performance 25
Console
16/05/2014 DevCamp 2014 | Web Performance 26
Bookmarklet: https://code.google.com/p/navlet/
16/05/2014 DevCamp 2014 | Web Performance 27
Bookmarklet: http://kaaes.github.io/timing/
16/05/2014 DevCamp 2014 | Web Performance 28
Extensão: Page Speed Test
POSSO UTILIZAR?
16/05/2014 29DevCamp 2014 | Web Performance
STATUS
NAVIGATION TIMING
W3C Recommendation
17 December 2012
RESOURCE TIMING
W3C Candidate
Recommendation 25
March 2014
US...
16/05/2014 DevCamp 2014 | Web Performance 31
http://caniuse.com/#feat=nav-timing
CONCLUSÕES
16/05/2014 DevCamp 2014 | Web Performance 32
NAVIGATION, RESOURCE E USER TIMING
• Simples de utilizar
• Métricas acuradas
• End-to-end
• Nativo
16/05/2014 DevCamp 2014...
REFERÊNCIAS
• Navigation Timing
http://www.w3.org/TR/navigation-timing/
• Resource Timing
• http://www.w3.org/TR/2014/CR-r...
REFERÊNCIAS
• It’s All in the Timing: How to Use the Navigation Timing
Specification to Improve Web Performance
http://blo...
REFERÊNCIAS
• performanceTiming object
http://msdn.microsoft.com/en-us/library/ff975075
• Navigation Timing
https://develo...
OBRIGADA!
@talitapagani | talita.cpb@gmai.com
16/05/2014 DevCamp 2014 | Web Performance 37
Próximos SlideShares
Carregando em…5
×

Medindo o Desempenho de sua aplicação com as APIs de Web Performance

1.699 visualizações

Publicada em

Palestra do DevCamp 2014, na trilha de DevRoots

Publicada em: Tecnologia

Medindo o Desempenho de sua aplicação com as APIs de Web Performance

  1. 1. MEDINDO O DESEMPENHO DE SUA APLICAÇÃO COM AS APIS DE WEB PERFORMANCE Talita Pagani MSTECH | @talitapagani 16/05/2014 1DevCamp 2014 | Web Performance
  2. 2. SOBRE • Mestranda em Ciência da Computação – UFSCar – Bacharel em Ciência da Computação – USC – Especialista em Gerenciamento de Projetos – Senac • Assistente de Gestão de Projetos – MSTECH – Projetos educacional, EaD e de acessibilidade digital • Professora (Especialização em Engenharia de Software) – USC • Comunidade de desenvolvimento – Palestrante de eventos técnicos – Autora: Tableless, UX.Blog – GitHub, Mozillian (comunidade Mozilla), Interaction Design Foundation 16/05/2014 DevCamp 2014 | Web Performance 2
  3. 3. PERFORMANCE MATTERS #perfmatters 16/05/2014 3DevCamp 2014 | Web Performance
  4. 4. 16/05/2014 DevCamp 2014 | Web Performance 4 PORQUE DEVEMOS NOS IMPORTAR COM PERFORMANCE? Usuários Mecanismos de busca Percepção de que nativo é mais rápido do que web
  5. 5. 16/05/2014 DevCamp 2014 | Web Performance 5 “YOU CAN’T OPTIMIZE WHAT YOU CAN’T MEASURE”
  6. 6. APIs Nativas NAVIGATION TIMING Métricas de carregamento da página. RESOURCE TIMING Métricas de carregamento dos recursos da página. USER TIMING Marcações para medir a performance de trechos específicos do seu JS. 16/05/2014 6DevCamp 2014 | Web Performance
  7. 7. APIs Nativas NAVIGATION TIMING Métricas de carregamento da página. RESOURCE TIMING Métricas de carregamento dos recursos da página. USER TIMING Marcações para medir a performance de trechos específicos do seu JS. 16/05/2014 7DevCamp 2014 | Web Performance Performance Timeline
  8. 8. NAVIGATION TIMING API 16/05/2014 8DevCamp 2014 | Web Performance
  9. 9. NAVIGATION TIMING API 16/05/2014 DevCamp 2014 | Web Performance 9 NAVIGATION Como o usuário chegou à página. TIMING Dados de navegação de eventos de carregamento da página.
  10. 10. NAVIGATION TIMING API window.performance { object navigation; object timing; } 16/05/2014 10DevCamp 2014 | Web Performance
  11. 11. NAVIGATION TIMING API 16/05/2014 DevCamp 2014 | Web Performance 11 NAVIGATION Mensurar o tipo de navegação, se é reload, se é navegação pelos botões voltar/avançar do navegador (histórico). window.performance.navigation.type TYPE_NAVIGATE = 0 TYPE_RELOAD = 1 TYPE_BACK_FORWARD = 2 TYPE_RESERVED = 255 window.performance.navigation. redirectCount
  12. 12. NAVIGATION TIMING API 16/05/2014 DevCamp 2014 | Web Performance 12 TIMING navigationStart; unloadEventStart; unloadEventEnd; redirectStart; redirectEnd; fetchStart; domainLookupStart; domainLookupEnd; connectStart; connectEnd; secureConnectionSt art; requestStart; responseStart; responseEnd; domLoading; domInteractive; domContentLoaded EventStart; domContentLoaded EventEnd; domComplete; loadEventStart; loadEventEnd;
  13. 13. 16/05/2014 DevCamp 2014 | Web Performance 13
  14. 14. UTILIZANDO AS MÉTRICAS NO GOOGLE ANALYTICS 16/05/2014 DevCamp 2014 | Web Performance 14 https://gist.github.com/talitapagani/196fcc5da84aa35f64d1
  15. 15. RESOURCE TIMING API 16/05/2014 15DevCamp 2014 | Web Performance
  16. 16. RESOURCE TIMING API • Mensurar carregamento dos recursos externos: CSS, JS, imagens, etc. window.performance .getEntriesByType( "resource") 16/05/2014 DevCamp 2014 | Web Performance 16
  17. 17. 16/05/2014 DevCamp 2014 | Web Performance 17
  18. 18. 16/05/2014 DevCamp 2014 | Web Performance 18 https://gist.github.com/talitapagani/a4a211f45ce31425c963
  19. 19. USER TIMING API 16/05/2014 19DevCamp 2014 | Web Performance
  20. 20. USER TIMING API • Marcar trechos de código para mensurar o tempo de execução window.performance.mark(‘nome_da_ma rcacao'); window.performance.measure(‘nome_da _metrica', ‘marcacao1', ‘marcacao2'); 16/05/2014 DevCamp 2014 | Web Performance 20
  21. 21. USER TIMING API • Descartando marcações e métricas window.performance.clearMarks(); window.performance.clearMark(‘nome_ da_marcacao'); window.performance.clearMeasures(); 16/05/2014 DevCamp 2014 | Web Performance 21
  22. 22. 16/05/2014 DevCamp 2014 | Web Performance 22 https://gist.github.com/talitapagani/11c6f59b96b6a074caa5
  23. 23. 16/05/2014 DevCamp 2014 | Web Performance 23 https://gist.github.com/talitapagani/8505c8014e14f26b2795
  24. 24. FERRAMENTAS 16/05/2014 DevCamp 2014 | Web Performance 24
  25. 25. 16/05/2014 DevCamp 2014 | Web Performance 25 Console
  26. 26. 16/05/2014 DevCamp 2014 | Web Performance 26 Bookmarklet: https://code.google.com/p/navlet/
  27. 27. 16/05/2014 DevCamp 2014 | Web Performance 27 Bookmarklet: http://kaaes.github.io/timing/
  28. 28. 16/05/2014 DevCamp 2014 | Web Performance 28 Extensão: Page Speed Test
  29. 29. POSSO UTILIZAR? 16/05/2014 29DevCamp 2014 | Web Performance
  30. 30. STATUS NAVIGATION TIMING W3C Recommendation 17 December 2012 RESOURCE TIMING W3C Candidate Recommendation 25 March 2014 USER TIMING W3C Recommendation 12 December 2013 16/05/2014 30DevCamp 2014 | Web Performance
  31. 31. 16/05/2014 DevCamp 2014 | Web Performance 31 http://caniuse.com/#feat=nav-timing
  32. 32. CONCLUSÕES 16/05/2014 DevCamp 2014 | Web Performance 32
  33. 33. NAVIGATION, RESOURCE E USER TIMING • Simples de utilizar • Métricas acuradas • End-to-end • Nativo 16/05/2014 DevCamp 2014 | Web Performance 33
  34. 34. REFERÊNCIAS • Navigation Timing http://www.w3.org/TR/navigation-timing/ • Resource Timing • http://www.w3.org/TR/2014/CR-resource- timing-20140325/ • User Timing http://www.w3.org/TR/user-timing/ 16/05/2014 DevCamp 2014 | Web Performance 34
  35. 35. REFERÊNCIAS • It’s All in the Timing: How to Use the Navigation Timing Specification to Improve Web Performance http://blog.newrelic.com/2012/05/16/its-all-in-the-timing- how-to-use-the-navigation-timing-specification-to-improve- web-performance/ • Measuring Page Load Speed with Navigation Timing http://www.html5rocks.com/en/tutorials/webperformance/ba sics/ • Profiling Page Loads with the Navigation Timing API http://www.sitepoint.com/profiling-page-loads-with-the- navigation-timing-api/ 16/05/2014 DevCamp 2014 | Web Performance 35
  36. 36. REFERÊNCIAS • performanceTiming object http://msdn.microsoft.com/en-us/library/ff975075 • Navigation Timing https://developer.mozilla.org/en-US/docs/Navigation_timing • Don’t guess it, test it! http://aerotwist.com/presentations/dont-guess-it-test-it/#1 • Measuring network performance with Resource Timing API http://googledevelopers.blogspot.com.br/2013/12/measuring-network- performance-with.html • An Introduction to the Resource Timing API http://calendar.perfplanet.com/2012/an-introduction-to-the-resource- timing-api/ 16/05/2014 DevCamp 2014 | Web Performance 36
  37. 37. OBRIGADA! @talitapagani | talita.cpb@gmai.com 16/05/2014 DevCamp 2014 | Web Performance 37

×