npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

time-to-interactive

v3.0.0

Published

Utility to report time to interactive for Real User Monitoring (RUM)

Downloads

164

Readme

time-to-interactive

alt text


Utility to report time to interactive(tti) for Real User Monitoring (RUM) for web applications

npm version Build Status

Demo

https://gauravbehere.github.io/time-to-interactive/

APIs

window.getPageTTI

Contains a promise which on resolution reports the TTI value for the page.

window.getReferentialTTI()

Calling this on an event returns a promise which on resolution reports TTI for that event.

Referential TTI can be fired from the click event, route navigations when you render a component or an event after which you want to check how much is the time to interactive for that action

Algorithm

Basic idea is to make use of LongTask API to see if CPU was busy & report time to interactive based on the number of CPU cycles for which CPU was busy.

Steps:
  1. First attempt is to see if PerformanceLongTaskTiming is available in window.
  2. If it is available we report TTI as reported by tti-polyfill.
  3. There are instances where TTI reported by tti-polyfill is less than time for loadEventEnd, thus we return max of the two.
  4. If PerformanceLongTaskTiming is not available we fall back to manual polling to check if CPU is busy.
  5. As we get a window of 500ms for which CPU was idle, we report TTI based on the number of cycles we had to wait to see an idle 500ms window.
  6. We look for the idle window after loadEventEnd has happened so that we are also waiting for network idle state.

Usage

Including the library

<script src="/path/to/time-to-interactive.min.js"></script>

or

npm i "time-to-interactive"
require('time-to-interactive');
Consuming the APIs

 window.getPageTTI.then(data => //data is the TTI value for the page)
window.getReferentialTTI().then(data => //data is the TTI value for a section/component)

Browser Compatibility

As it includes polyfill for Promises & tti-polyfill, there is no browser based compatibility matrix as such. Tested with Chrome, Mozilla Firefox, Safari, Edge & IE

A word from the author

The term, time to interactive can be subjective & there could be different ways to approach it. I have tried to get a balance between how Google Chrome's lighthouse does it & how it is done by Akamai's Boomerang. Research & analysis of statstics reported as TTI suggests that, it can vary drastically between browses & platforms. As the LongTaskAPI is yet to be standardized by the browsers, we rely on manual polling to see if CPU was busy. I also recommend usage of another metric which is "first-input-delay", which is quite a standard now.

Licence

MIT

Author: Gaurav Behere, [email protected]

Feel free to raise a PR, if you see a scope of improvement :)