perfume.js

Perfume.js v0.2.2

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.

Installing

npm (https://www.npmjs.com/package/perfume.js):

npm install perfume.js --save

Importing library

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

Start measuring

First Meaningful Paint

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 1604 ms

Annotate metrics in the DevTools

Performance.mark (User Timing API) is used to create an application-defined peformance entry in the browser's performance entry buffer.

const perfume = new Perfume();
perfume.start('fibonacci');
this.fibonacci(400);
perfume.end('fibonacci', true); // ⚡️ Perfume.js: fibonacci 0.14 ms

[]

Custom Logging

Save the duration and print it out when/how you best desire.

perfume.start('fibonacci');
fibonacci(400);
const duration = this.perfume.end('fibonacci');
perfume.log('Custom logging', duration); // ⚡️ Perfume.js: Custom logging 0.14 ms

Develop

• npm t: Run test suite
• npm start: Run npm run build in watch mode
• npm run test:watch: Run test suite in interactive watch mode
• npm run test:prod: Run linting and generate coverage
• npm run build: Generate bundles and typings
• npm run lint: Lints code
• npm run commit: Commit using conventional commit style (husky will tell you to use it if you haven't :wink:)

Credits

Made with ☕️ by @zizzamia and I want to thank some friends and projects for the work they did:

• Appmetrics.js to inspired me to start writing this library and give me some of the base ideas for the class architecture;
• Popper.js for having inspired me in writing my first library in typescript;
• The Contributors for their much appreciated Pull Requests and bug reports;
• you for the star you'll give to this project and for being so awesome to give this project a try 😄

Copyright and license

Code and documentation copyright 2017 Leonardo Zizzamia. Code released under the MIT license. Docs released under Creative Commons.

Changelog

0.2.2 (2017-12-29)

Bug Fixes

• end: fixed end() and getDurationByMetric() methods #9
• docs: Annotate metrics in the DevTools #10