Perfume is a tiny JavaScript library for measuring Short/Long Script, First Meaningful Paint, TTI (Time to Interactivity), annotating them to the DevTools timeline and reporting the results to Google Analytics.
npm (https://www.npmjs.com/package/perfume.js):
npm install perfume.js --save
You can import the generated bundle to use the whole library generated by this starter:
import Perfume from 'perfume.js';
Additionally, you can import the transpiled modules from dist/es
in case you have a modular library:
import Perfume from 'node_modules/perfume.js/dist/es/perfume';
Universal Module Definition
import Perfume from 'node_modules/perfume.js/perfume.umd.js';
Page load is a key aspect of how a user perceives the performance of your page. See Measure Performance with the RAIL Method for more information.
const perfume = new Perfume();
perfume.firstPaint();
// ⚡️ Perfume.js: firstPaint 601 ms
Performance.mark (User Timing API) is used to create an application-defined peformance entry in the browser's performance entry buffer.
perfume.start('fibonacci');
fibonacci(400);
perfume.end('fibonacci', true);
// ⚡️ Perfume.js: fibonacci 0.14 ms
Save the duration and print it out exactly the way you want it.
perfume.start('fibonacci');
fibonacci(400);
const duration = this.perfume.end('fibonacci');
perfume.log('Custom logging', duration);
// ⚡️ Perfume.js: Custom logging 0.14 ms
To enable Perfume to send your measures to Google Analytics User timing, set the option enable:true
and a custom user timing variable timingVar:"name"
.
const perfume = new Perfume();
perfume.googleAnalytics.enable = true;
perfume.googleAnalytics.timingVar = "userId";
npm t
: Run test suitenpm start
: Runnpm run build
in watch modenpm run test:watch
: Run test suite in interactive watch modenpm run test:prod
: Run linting and generate coveragenpm run build
: Generate bundles and typingsnpm run lint
: Lints codenpm run commit
: Commit using conventional commit style (husky will tell you to use it if you haven't 😉)
Made with ☕️ by @zizzamia and I want to thank some friends and projects for the work they did:
- Appmetrics.js for inspiring me to start writing this library and giving me some of the base ideas for the class architecture;
- Popper.js for having inspired me to write my first library in typescript;
- The Contributors for their much appreciated Pull Requests and bug reports;
- you for the star you'll give this project 😉 and for supporting me by giving my project a try 😄
Code and documentation copyright 2017 Leonardo Zizzamia. Code released under the MIT license. Docs released under Creative Commons.