O documento apresenta as APIs de Navegação, Recursos e Tempo de Usuário para medir o desempenho de aplicações web. Essas APIs fornecem métricas para analisar o carregamento da página e recursos, além de marcações para medir trechos de código JavaScript. A palestrante discute como utilizar essas ferramentas nativas para otimizar o desempenho.

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. 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. PERFORMANCE MATTERS
#perfmatters
16/05/2014 3DevCamp 2014 | Web Performance

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. 16/05/2014 DevCamp 2014 | Web Performance 5
“YOU CAN’T
OPTIMIZE WHAT
YOU CAN’T
MEASURE”

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. 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. NAVIGATION TIMING API
16/05/2014 8DevCamp 2014 | Web Performance

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. NAVIGATION
TIMING API
window.performance {
object navigation;
object timing;
}
16/05/2014 10DevCamp 2014 | Web Performance

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. 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. 16/05/2014 DevCamp 2014 | Web Performance 13

14. UTILIZANDO AS MÉTRICAS NO GOOGLE ANALYTICS
16/05/2014 DevCamp 2014 | Web Performance 14
https://gist.github.com/talitapagani/196fcc5da84aa35f64d1

15. RESOURCE TIMING API
16/05/2014 15DevCamp 2014 | Web Performance

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. 16/05/2014 DevCamp 2014 | Web Performance 17

18. 16/05/2014 DevCamp 2014 | Web Performance 18
https://gist.github.com/talitapagani/a4a211f45ce31425c963

19. USER TIMING API
16/05/2014 19DevCamp 2014 | Web Performance

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. 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. 16/05/2014 DevCamp 2014 | Web Performance 22
https://gist.github.com/talitapagani/11c6f59b96b6a074caa5

23. 16/05/2014 DevCamp 2014 | Web Performance 23
https://gist.github.com/talitapagani/8505c8014e14f26b2795

24. FERRAMENTAS
16/05/2014 DevCamp 2014 | Web Performance 24

25. 16/05/2014 DevCamp 2014 | Web Performance 25
Console

26. 16/05/2014 DevCamp 2014 | Web Performance 26
Bookmarklet: https://code.google.com/p/navlet/

27. 16/05/2014 DevCamp 2014 | Web Performance 27
Bookmarklet: http://kaaes.github.io/timing/

28. 16/05/2014 DevCamp 2014 | Web Performance 28
Extensão: Page Speed Test

29. POSSO UTILIZAR?
16/05/2014 29DevCamp 2014 | Web Performance

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. 16/05/2014 DevCamp 2014 | Web Performance 31
http://caniuse.com/#feat=nav-timing

32. CONCLUSÕES
16/05/2014 DevCamp 2014 | Web Performance 32

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. 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. 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. 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. OBRIGADA!
@talitapagani | talita.cpb@gmai.com
16/05/2014 DevCamp 2014 | Web Performance 37