docs/src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Perfume.js - Page speed monitoring</title>
<meta name="description" content="Web performance library for measuring all User-centric performance metrics">
<meta name="author" content="Leonardo Zizzamia">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/perfume/favicon.ico">
<!-- Google Analytics -->
<!-- End Google Analytics -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<div class="layout layout--body">
<div class="layout-content">
<app-intro class="layout layout-performance layout--intro">
<div class="layout-content">
<div id="/home/" class="box box--intro">
<a href="https://github.com/zizzamia/perfume.js" target="_blank" rel="noreferrer">
<picture class="logo">
<source type="image/webp" srcset="https://zizzamia.github.io/perfume/assets/perfume-logo-v5-0-0.webp">
<source type="image/png" srcset="https://zizzamia.github.io/perfume/assets/perfume-logo-v5-0-0.png">
<img alt="Perfume.js logo" src="https://zizzamia.github.io/perfume/assets/perfume-logo-v5-0-0.png" elementtiming="elHeroLogo">
</picture>
</a>
<h1 class="title" elementtiming="elPageTitle">Perfume.js</h1>
<p>
<b>Page Speed</b> is a feature, and to deliver it we need to understand the many factors
and fundamental limitations that are at play.
If we can measure it, we can improve it.
</p>
<a class="github-button" href="https://github.com/zizzamia/perfume.js"
data-size="large" data-show-count="true"
aria-label="Star zizzamia/perfume.js on GitHub">Star</a>
<a href="https://twitter.com/zizzamia?ref_src=twsrc%5Etfw"
class="twitter-follow-button" data-size="large" rel="noreferrer"
data-show-count="true">Follow @zizzamia</a>
</div>
</div>
</app-intro>
<div class="box box--intro">
<br />
<h3 class="box-title" id="/why-perfume/">
<a href="https://zizzamia.github.io/perfume/#/why-perfume/">Why Perfume.js?</a>
</h3>
<p>
Perfume is a tiny, web performance monitoring library that reports field
data back to your favorite analytics tool.
</p>
<ul>
<li>⏰ Supports latest Performance APIs for precise metrics</li>
<li>🚀 Device data enrichment</li>
<li>🔨 Cross browser tested</li>
<li>🚿 Filters out false positive/negative results</li>
<li>🤙 Only 2Kb Javascript gzip</li>
<li>🏅 Web Vitals Score</li>
<li>🛰 Flexible analytics tool</li>
<li>
⚡️ Waste-zero ms with
<a
href="https://developers.google.com/web/updates/2015/08/using-requestidlecallback"
target="_blank" rel="noreferrer"
>requestIdleCallback</a
>
strategy built-in
</li>
</ul>
</div>
<div class="box">
<h3 class="box-title" id="/real-user-measurements/">
<a href="https://zizzamia.github.io/perfume/#/real-user-measurements/"
>The latest in metrics & Real User Measurement</a
>
</h3>
<p>
<b>Perfume</b> leverages the latest Performance APIs to collect
<b>field data</b>
that allows us to understand what real-world users are actually
experiencing.
</p>
<ul>
<li>Navigation Timing</li>
<li>Navigator Interface</li>
<li>Resource Timing</li>
<li>Service Worker Status</li>
<li>StorageManager interface</li>
<li>Time to First Byte (<a
href="https://web.dev/ttfb/#what-is-a-good-ttfb-score"
target="_blank" rel="noreferrer"
>TTFB</a
>)
</li>
<li>
First Contentful Paint (<a
href="https://web.dev/first-contentful-paint/"
target="_blank" rel="noreferrer"
>FCP</a
>)
</li>
<li>
Largest Contentful Paint (<a href="https://web.dev/lcp/" target="_blank" rel="noreferrer"
>LCP</a
>)
</li>
<li>
First Input Delay (<a href="https://web.dev/fid/" target="_blank" rel="noreferrer">FID</a>)
</li>
<li>
Cumulative Layout Shift (<a href="https://web.dev/cls/" target="_blank" rel="noreferrer"
>CLS</a
>)
</li>
<li>
Total Blocking Time (<a href="https://web.dev/tbt/" target="_blank" rel="noreferrer">TBT</a
>)
</li>
<li>Navigation Total Blocking Time (NTBT)</li>
<li>Element Timing</li>
</ul>
<br />
<p>
At Coinbase, we use <a href="https://www.coinbase.com/blog/performance-vitals-a-unified-scoring-system-to-guide-performance-health-and-prioritization">Perfume.js to capture a
high-level scoring system</a> that is clear, trusted, and easy to understand.</p>
<p>Summarizing the performance health of an application into a reliable and consistent score
helps increase urgency and directs company attention and resources
towards addressing each performance opportunity.</p>
</div>
<div class="box">
<h3 class="box-title" id="/perfume-vs-web-vitals/">
<a href="https://zizzamia.github.io/perfume/#/perfume-vs-web-vitals/">
Perfume.js vs Web Vitals</a>
</h3>
<p><b>Perfume</b> leverages the <a href="https://github.com/GoogleChrome/web-vitals">Web Vitals</a> library to
collect all the standardized performance metrics. It explores new metrics like
Navigation Total Blocking Time and dimensions like Low-End Devices,
Service Worker status to understand your data better.</p>
<p>So don't worry, Perfume.js is a superset of Web Vitals, a bit like Typescript is a superset of Javascript.</p>
</div>
<div class="box">
<h3 class="box-title" id="/installing-and-imports/">
<a href="https://zizzamia.github.io/perfume/#/installing-and-imports/">Installing and Imports</a>
</h3>
<div class="box-code js">
<table>
<tbody>
<tr>
<td class="code">
<pre><span class="gray">// Install</span>
npm install perfume.js --save
<span class="gray">// Importing library</span>
<span class="gray">// Import the generated bundle to use the whole library generated:</span>
<span class="red">import</span> Perfume <span class="red">from</span> 'perfume.js';
<span class="gray">// Universal Module Definition:</span>
<span class="red">import</span> Perfume <span class="red">from</span> 'node_modules/perfume.js/perfume.umd.js'; </pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<app-root></app-root>
<div class="box">
<h2 class="box-title">Customize</h2>
</div>
<div class="box">
<h3 class="box-title" id="/default-options/">
<a href="https://zizzamia.github.io/perfume/#/default-options/">Default Options</a>
</h3>
<p>Default options provided to Perfume.js constructor.</p>
<div class="box-code js">
<table>
<tbody>
<tr>
<td class="code">
<pre><span class="red">const</span> <span class="blue">options</span> <span class="red">=</span> {
resourceTiming<span class="red">:</span> <span class="blue">false</span>,
elementTiming<span class="red">:</span> <span class="blue">false</span>,
analyticsTracker<span class="red">:</span> options => {},
maxMeasureTime<span class="red">:</span> 30000,
};</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box">
<h2 class="box-title">Contacts</h2>
</div>
<div class="box">
<h3 class="box-title" id="/copyright-and-license/">
<a href="https://zizzamia.github.io/perfume/#/copyright-and-license/">Copyright and licenses</a>
</h3>
<p>
Code and documentation copyright 2022 <a href="https://twitter.com/Zizzamia"
target="_blank" rel="noreferrer">Leonardo Zizzamia</a>. Code released under the
<a
href="https://github.com/Zizzamia/perfume.js/blob/master/LICENSE"
target="_blank" rel="noreferrer"
>MIT license</a>. Docs released under Creative Commons.
</p>
</div>
<div class="box">
<a href="https://twitter.com/Zizzamia" class="box-leo" target="_blank" rel="noreferrer">
<picture class="logo">
<source
srcset="https://zizzamia.github.io/perfume/assets/leonardo-zizzamia.webp"
type="image/webp"
/>
<source
srcset="https://zizzamia.github.io/perfume/assets/leonardo-zizzamia.jpg"
type="image/jpeg"
/>
<img
src="https://zizzamia.github.io/perfume/assets/leonardo-zizzamia.jpg"
alt="Leonardo Zizzamia"
loading="lazy"
/>
</picture>
<div>
<h3>Leonardo Zizzamia</h3>
<h4>
🌕 Leading the Client Eng Excellence team at <b>Coinbase</b> ✨ 🔭 Always learning something new about #web3 🧘
</h4>
</div>
</a>
</div>
<div class="box Fibonacci"></div>
</div>
<app-navigation class="layout-nav">
<div class="layout-nav">
<a class="active" href="https://zizzamia.github.io/perfume/#/home/">Home</a>
<a href="https://zizzamia.github.io/perfume/#/real-user-measurements/">Real User Measurement</a>
<a href="https://zizzamia.github.io/perfume/#/perfume-vs-web-vitals/">Perfume vs Web Vitals</a>
<a href="https://zizzamia.github.io/perfume/#/installing-and-imports/">Installing and Imports</a>
<a href="https://zizzamia.github.io/perfume/#/quick-start/">Quick start</a><br>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/navigation-timing/">Navigation Timing</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/first-contentful-paint/">First Contentful Paint</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/largest-contentful-paint/">Largest Contentful Paint</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/first-input-delay/">First Input Delay</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/cumulative-layout-shift/">Cumulative Layout Shift</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/total-blocking-time/">Total Blocking Time</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/navigation-total-blocking-time/">Navigation Total Blocking Time</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/resource-timing/">Resource Timing</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/annotate-metrics/">Annotate metrics</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/component-first-paint/">Component First Paint</a>
<a class="part-two" href="https://zizzamia.github.io/perfume/#/element-timing/">Element Timing</a>
<br>
<a class="part-four" href="https://zizzamia.github.io/perfume/#/default-options/">Default Options</a><a class="part-four" href="https://zizzamia.github.io/perfume/#/copyright-and-license/">Copyright and licenses</a>
</div>
</app-navigation>
</div>
</body>
</html>