medindo o desempenho de sua aplicação com as apis de web performance

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



PORQUE DEVEMOS NOS IMPORTAR COM

PERFORMANCE?

Usuários

Mecanismos de busca

Percepção de que nativo é mais rápido do que web


“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.


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.


Performance Timeline

NAVIGATION TIMING API




NAVIGATION

Como o usuário chegou à página.

TIMING

Dados de navegação de eventos de carregamento da página.


window.performance {

object navigation;

object timing;

}




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



TIMING navigationStart;

unloadEventStart;

unloadEventEnd;

redirectStart;

redirectEnd;

fetchStart;

domainLookupStart;

domainLookupEnd;

connectStart;

connectEnd;

secureConnectionStart;

requestStart;

responseStart;

responseEnd;

domLoading;

domInteractive;

domContentLoadedEventStart;

domContentLoadedEventEnd;

domComplete;

loadEventStart;

loadEventEnd;

UTILIZANDO AS MÉTRICAS NO GOOGLE ANALYTICS


https://gist.github.com/talitapagani/196fcc5da84aa35f64d1



RESOURCE TIMING API


RESOURCE TIMING API

• Mensurar carregamento dos recursos externos: CSS, JS, imagens, etc.

window.performance

.getEntriesByType(

"resource")



https://gist.github.com/talitapagani/a4a211f45ce31425c963



USER TIMING API


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');


USER TIMING API

• Descartando marcações e métricas

window.performance.clearMarks();

window.performance.clearMark(‘nome_

da_marcacao');

window.performance.clearMeasures();



https://gist.github.com/talitapagani/11c6f59b96b6a074caa5




https://gist.github.com/talitapagani/8505c8014e14f26b2795



FERRAMENTAS



Console


Bookmarklet: https://code.google.com/p/navlet/

https://code.google.com/p/navlet/

https://code.google.com/p/navlet/


Bookmarklet: http://kaaes.github.io/timing/

http://kaaes.github.io/timing/

http://kaaes.github.io/timing/


Extensão: Page Speed Test

POSSO UTILIZAR?


STATUS NAVIGATION TIMING

W3C Recommendation 17 December 2012

RESOURCE TIMING

W3C Candidate Recommendation 25 March 2014

USER TIMING

W3C Recommendation 12 December 2013



http://caniuse.com/#feat=nav-timing

http://caniuse.com/

http://caniuse.com/

http://caniuse.com/

http://caniuse.com/

http://caniuse.com/

http://caniuse.com/

CONCLUSÕES


NAVIGATION, RESOURCE E USER TIMING

• Simples de utilizar

• Métricas acuradas

• End-to-end

• Nativo


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/


http://www.w3.org/TR/navigation-timing/




http://www.w3.org/TR/2014/CR-resource-timing-20140325/








http://www.w3.org/TR/user-timing/




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/


http://blog.newrelic.com/2012/05/16/its-all-in-the-timing-how-to-use-the-navigation-timing-specification-to-improve-web-performance/

































http://www.html5rocks.com/en/tutorials/webperformance/basics/



http://www.sitepoint.com/profiling-page-loads-with-the-navigation-timing-api/
















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/


http://msdn.microsoft.com/en-us/library/ff975075




https://developer.mozilla.org/en-US/docs/Navigation_timing




http://aerotwist.com/presentations/dont-guess-it-test-it/










http://googledevelopers.blogspot.com.br/2013/12/measuring-network-performance-with.html








http://calendar.perfplanet.com/2012/an-introduction-to-the-resource-timing-api/














OBRIGADA!

@talitapagani | [email protected]


medindo o desempenho de sua aplicação com as apis de web performance

Technology