---
title: "LoAF (Help Center / Filters / Metric)"
ai_context: "Use this article for questions about RUMvision Long Animation Frames (LoAF) dimensions, debugging Interaction to Next Paint (INP) and identifying which scripts, hostnames, functions or tasks contribute to slow interactions. It covers LoAF hostname, script path, function name, window attribution, dominant task type and invoker type, including values such as `self`, `descendant`, `ancestor`, `same-page`, `user-callback`, `event-listener`, `resolve-promise`, `classic-script` and `module-script`. Relevant for questions about third-party JavaScript impact, INP root-cause analysis, source URLs, `unset` LoAF values, cross-origin scripts, named function expressions, forced style/layout work, render duration, delays, Technical dashboard filtering, the Third Parties dashboard and using LoAF RUM data to trace long-running JavaScript during poor interactions."
canonical: "https://www.rumvision.com/help-center/filters/metric/loaf/"
---

Breadcrumbs: [Home](https://www.rumvision.com/?format=md) > [Help Center](https://www.rumvision.com/help-center/?format=md) > [Filters](https://www.rumvision.com/help-center/filters/?format=md) > [Metric](https://www.rumvision.com/help-center/filters/metric/?format=md) > LoAF

# LoAF

We have multiple [Long Animation Frames](https://www.rumvision.com/blog/long-animation-frames/?format=md) (LoAF) related dimensions. As they are related to the [Interaction to Next Paint (INP)](https://www.rumvision.com/blog/interaction-to-next-paint/?format=md) metric, these can be found under section "metric" in the [dimension dropdown](https://www.rumvision.com/help-center/filters/introduction/your-start-with-filters/?format=md).

> To collect and see LoAF data, both [metric debugging and LoAF tracking](https://www.rumvision.com/help-center/monitoring/snippet/advanced/?format=md) needs to be enabled.

web.dev documentation on LoAF [can be found over here](https://developer.chrome.com/docs/web-platform/long-animation-frames#better_attribution). 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](https://www.rumvision.com/help-center/monitoring/dashboard/third-parties/?format=md) 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](https://developer.chrome.com/docs/web-platform/long-animation-frames#source-location)

To improve data quality, consider [adding the crossOrigin attribute](https://www.linkedin.com/posts/erwinhofman_inp-pagespeed-thirdparties-activity-7230132606191751168-fruj) 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](https://www.rumvision.com/help-center/monitoring/dashboard/third-parties/?format=md).

### 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](https://github.com/w3c/long-animation-frames?tab=readme-ov-file#how-a-loaf-entry-looks-like):

- **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](http://github.com/w3c/long-animation-frames/issues/11) 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](https://www.rumvision.com/blog/double-score-rumvision-got-featured-twice-on-google-io-2024/?format=md#pioneering-the). 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](https://www.rumvision.com/help-center/monitoring/dashboard/third-parties/?format=md) 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](https://www.rumvision.com/help-center/monitoring/dashboard/technical/?format=md) will be the best location where you can apply different (combination of) LoAF dimensions and filters. [This blogpost guides you](https://www.rumvision.com/blog/using-your-rum-loaf-data-for-inp-debugging-purposes/?format=md) through using our LoAF data in order to debug your INP.