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 dimensions

Below are the LoAF dimensions that are available in RUMvision:

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 (and other parts of the sourceURL) 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

To improve data quality, consider adding the crossOrigin attribute to your (third party) scripts.

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".

If the function name is unset, it might be the result of anonymous function calls. To collect detailed information, consider using named function expressions. For example, instead of an anonymous arrow function like this:

requestAnimationFrame(() => {})

Consider (maybe just temporarily for debugging purposes) using its named function expression equivalent:

requestAnimationFrame(function doThis() { })

This way, doThis will show up as function name.

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.

Unset values

LoAF dimensions might sometimes show unset. This is the result of the sourceURL being empty.

Scenario's where this could happen include inline scripts, inline events handlers and if setTimeout is used.

Using LoAF RUM data

Tracking LoAF data in RUM can be very convenient. Even Google agrees. Here are a few ways to help you benefit from tracked LoAF data on behalf of your website:

Third party dashboard

We introduced a third party dashboard to get an idea of the impact and especially origin of INP issues. This will expose information on a higher level (host and scriptname).

Technical tab

When you're ready to dive a bit deeper, our technical tab will be the best location where you can apply different (combination of) LoAF dimensions and filters. This blogpost guides you through using our LoAF data in order to debug your INP.

Table of Contents