LoAF

We have multiple Long Animation Frames (LoAF) related dimensions. As they are related to the Interaction to Next Paint (INP) metric, these can be found under section "metric" in the dimension dropdown.

To collect and see LoAF data, both metric debugging and LoAF tracking needs to be enabled.

web.dev documentation on LoAF can be found over here. RUMvision is collecting such information for the longest running script within a LoAF during the highest INP.

LoAF hostname

On a higher level, this will show the hostname of the LoAF script. This information is also used in our third party dashboard and will be the first you see. When clicking on a hostname within the third party dashboard, you will see the filenames for that hostname.

In our data, the hostname could turn out to be "unset". The reason is as following:

The source entries may not be provided in certain scenarios including no-cors cross-origin scripts or if the callback is not defined in user code.
developer.chrome.com

LoAF script

This will show the exact pathname of that script. This information is also used in our third party dashboard.

LoAF script function

The functionname that was called, if available. Otherwise, this will show "unset".

LoAF script window

One crucial aspect that the LoAF API offers is the relationship between the window where the script was executed and the current window. This relationship, termed "window attribution," helps you pinpoint the origin of long tasks within your web page. Below are the possible values and what they signify.

Possible values are as following:

  • self
    Indicates that the long task originated within the same window where the script was executed.
  • descendant
    When the script window value (or windowAttribution in the LoAF API) is set to "descendant," it means that the long task originated from a child iframe or embedded resource within the current window.
  • ancestor
    When the script window value (or windowAttribution in the LoAF API) is set to "ancestor," it means that the long task originated from a parent window containing the current window.
  • same-page
    Signifies that the long task originated within the same page but from a different script or resource.
  • other
    Indicates that the long task originated from a window not directly related to the current window or its hierarchy.

By understanding these window attributions, you can effectively identify the sources of long-running tasks within your web pages, aiding in performance optimization and enhancing user experience.

LoAF task

This will show the main task within a LoAF. For example:

  • work duration
    Most time was spent doing JS work
  • delay
    Most time was spent waiting for a previous task to end
  • render duration
    Most time was spent doing rendering work
  • style layout duration
    Most time was spent doing style and layout work (preceding rendering work)
  • deferred duration
    Time of animation frame delay
  • total forced style layout duration
    The sum of forcedStyleAndLayoutDuration across all scripts was higher than anything else

LoAF invoker type

  • user-callback
    A known callback registered from a web platform API (for example, setTimeout, requestAnimationFrame).
  • event-listener
    A listener to a platform event (for example, click, load, keyup).
  • resolve-promise
    Handler of a platform promise (for example, fetch(). Note that in the case of promises, all the handlers of the same promises are mixed together as one "script").
  • reject-promise
    As per resolve-promise, but for the rejection.
  • classic-script
    Script evaluation (for example, script or import())
  • module-script
    Same as classic-script, but for module scripts.