medindo o desempenho de sua aplicação com as apis de web performance
DESCRIPTION
Palestra do DevCamp 2014, na trilha de DevRootsTRANSCRIPT
![Page 1: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/1.jpg)
MEDINDO O DESEMPENHO DE SUA APLICAÇÃO COM AS APIS DE
WEB PERFORMANCE
Talita Pagani MSTECH | @talitapagani
16/05/2014 1 DevCamp 2014 | Web Performance
![Page 2: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/2.jpg)
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
![Page 3: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/3.jpg)
PERFORMANCE MATTERS
#perfmatters
16/05/2014 3 DevCamp 2014 | Web Performance
![Page 4: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/4.jpg)
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
![Page 5: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/5.jpg)
16/05/2014 DevCamp 2014 | Web Performance 5
“YOU CAN’T OPTIMIZE WHAT
YOU CAN’T MEASURE”
![Page 6: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/6.jpg)
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 6 DevCamp 2014 | Web Performance
![Page 7: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/7.jpg)
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 7 DevCamp 2014 | Web Performance
Performance Timeline
![Page 8: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/8.jpg)
NAVIGATION TIMING API
16/05/2014 8 DevCamp 2014 | Web Performance
![Page 9: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/9.jpg)
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.
![Page 10: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/10.jpg)
NAVIGATION TIMING API
window.performance {
object navigation;
object timing;
}
16/05/2014 10 DevCamp 2014 | Web Performance
![Page 11: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/11.jpg)
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
![Page 12: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/12.jpg)
NAVIGATION TIMING API
16/05/2014 DevCamp 2014 | Web Performance 12
TIMING navigationStart;
unloadEventStart;
unloadEventEnd;
redirectStart;
redirectEnd;
fetchStart;
domainLookupStart;
domainLookupEnd;
connectStart;
connectEnd;
secureConnectionStart;
requestStart;
responseStart;
responseEnd;
domLoading;
domInteractive;
domContentLoadedEventStart;
domContentLoadedEventEnd;
domComplete;
loadEventStart;
loadEventEnd;
![Page 13: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/13.jpg)
16/05/2014 DevCamp 2014 | Web Performance 13
![Page 14: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/14.jpg)
UTILIZANDO AS MÉTRICAS NO GOOGLE ANALYTICS
16/05/2014 DevCamp 2014 | Web Performance 14
https://gist.github.com/talitapagani/196fcc5da84aa35f64d1
![Page 15: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/15.jpg)
RESOURCE TIMING API
16/05/2014 15 DevCamp 2014 | Web Performance
![Page 16: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/16.jpg)
RESOURCE TIMING API
• Mensurar carregamento dos recursos externos: CSS, JS, imagens, etc.
window.performance
.getEntriesByType(
"resource")
16/05/2014 DevCamp 2014 | Web Performance 16
![Page 17: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/17.jpg)
16/05/2014 DevCamp 2014 | Web Performance 17
![Page 18: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/18.jpg)
16/05/2014 DevCamp 2014 | Web Performance 18
https://gist.github.com/talitapagani/a4a211f45ce31425c963
![Page 19: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/19.jpg)
USER TIMING API
16/05/2014 19 DevCamp 2014 | Web Performance
![Page 20: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/20.jpg)
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
![Page 21: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/21.jpg)
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
![Page 22: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/22.jpg)
16/05/2014 DevCamp 2014 | Web Performance 22
https://gist.github.com/talitapagani/11c6f59b96b6a074caa5
![Page 23: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/23.jpg)
16/05/2014 DevCamp 2014 | Web Performance 23
https://gist.github.com/talitapagani/8505c8014e14f26b2795
![Page 24: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/24.jpg)
FERRAMENTAS
16/05/2014 DevCamp 2014 | Web Performance 24
![Page 25: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/25.jpg)
16/05/2014 DevCamp 2014 | Web Performance 25
Console
![Page 26: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/26.jpg)
16/05/2014 DevCamp 2014 | Web Performance 26
Bookmarklet: https://code.google.com/p/navlet/
![Page 27: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/27.jpg)
16/05/2014 DevCamp 2014 | Web Performance 27
Bookmarklet: http://kaaes.github.io/timing/
![Page 28: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/28.jpg)
16/05/2014 DevCamp 2014 | Web Performance 28
Extensão: Page Speed Test
![Page 29: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/29.jpg)
POSSO UTILIZAR?
16/05/2014 29 DevCamp 2014 | Web Performance
![Page 30: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/30.jpg)
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 30 DevCamp 2014 | Web Performance
![Page 31: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/31.jpg)
16/05/2014 DevCamp 2014 | Web Performance 31
http://caniuse.com/#feat=nav-timing
![Page 32: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/32.jpg)
CONCLUSÕES
16/05/2014 DevCamp 2014 | Web Performance 32
![Page 33: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/33.jpg)
NAVIGATION, RESOURCE E USER TIMING
• Simples de utilizar
• Métricas acuradas
• End-to-end
• Nativo
16/05/2014 DevCamp 2014 | Web Performance 33
![Page 34: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/34.jpg)
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
![Page 35: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/35.jpg)
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/basics/
• 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
![Page 36: Medindo o Desempenho de sua aplicação com as APIs de Web Performance](https://reader031.vdocuments.mx/reader031/viewer/2022020116/55878aaed8b42a42318b4709/html5/thumbnails/36.jpg)
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