zoom_in Click to enlarge

Perfume.js

▲ ▼

language

description Perfume.js Overview

Perfume.js is a JavaScript library designed to measure and optimize website loading performance by analyzing individual resource downloads, such as images and fonts, within a webpage. It provides detailed metrics on waterfall timing and identifies potential bottlenecks for faster page load speeds.

help Perfume.js FAQ

What does Perfume.js measure when resource timing is enabled?

With the `resourceTiming` option enabled, Perfume.js reads browser Resource Timing entries for assets such as stylesheets, scripts, images, and fetch requests. It can report timing and data-consumption information for those resource categories. [The Perfume.js documentation shows the resourceTiming option](https://www.npmjs.com/package/perfume.js).

Which Core Web Vitals can Perfume.js report?

Perfume.js supports metrics including LCP, CLS, INP, FCP, FID, TTFB, and total blocking time. The library uses browser Performance APIs and can pass those measurements to an analytics callback.

Is Perfume.js small enough to add to a production website?

The project describes the library as roughly 5.1 KB when gzip-compressed, although the final impact depends on the build and features you enable. It is designed to collect field data with an idle-callback strategy so measurement work does not unnecessarily compete with page rendering.

How do I send Perfume.js measurements to Google Analytics or another system?

Initialize Perfume.js with an `analyticsTracker` callback and forward each metric to the analytics service your site already uses. The callback receives fields such as `metricName`, `data`, `rating`, and navigation information, so you can route LCP, CLS, or custom marks separately.

swap_horiz

Looking for Perfume.js alternatives? Compare top competitors ranked & scored

arrow_forward