View
1.009
Download
4
Category
Preview:
DESCRIPTION
Palestra do DevCamp 2014, na trilha de DevRoots
Citation preview
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
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
PERFORMANCE MATTERS
#perfmatters
16/05/2014 3 DevCamp 2014 | Web Performance
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
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 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
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
NAVIGATION TIMING API
16/05/2014 8 DevCamp 2014 | Web Performance
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.
NAVIGATION TIMING API
window.performance {
object navigation;
object timing;
}
16/05/2014 10 DevCamp 2014 | Web Performance
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
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;
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/talitapagani/196fcc5da84aa35f64d1
RESOURCE TIMING API
16/05/2014 15 DevCamp 2014 | Web Performance
RESOURCE TIMING API
• Mensurar carregamento dos recursos externos: CSS, JS, imagens, etc.
window.performance
.getEntriesByType(
"resource")
16/05/2014 DevCamp 2014 | Web Performance 16
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 19 DevCamp 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');
window.performance.measure(‘nome_da
_metrica', ‘marcacao1',
‘marcacao2');
16/05/2014 DevCamp 2014 | Web Performance 20
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
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 29 DevCamp 2014 | Web Performance
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
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 | Web Performance 33
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
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
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
OBRIGADA!
@talitapagani | talita.cpb@gmai.com
16/05/2014 DevCamp 2014 | Web Performance 37
Recommended