---
title: "Load state (Help Center / Filters / Metric)"
ai_context: "Use this article for questions about the RUMvision Load state filter, understanding during which phase of the page lifecycle FCP, INP or CLS events occur, and relating Core Web Vitals problems to document loading progress. It covers the `loading`, `dom-interactive`, `dom-content-loaded` and `complete` states from the web-vitals library, their relationship to document parsing, synchronous JavaScript, subresource loading and the browser `load` event, plus timing equivalents based on Navigation Timing data. Relevant for questions about when FCP happens, when layout shifts occur, when INP interactions are recorded, late versus early performance issues, DOMContentLoaded timing, main-thread activity after page load and using load-state distributions to focus debugging on the stage where a metric problem most often occurs."
canonical: "https://www.rumvision.com/help-center/filters/metric/load-state/"
---

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) > Load state

# Load state

> This filter works with the [FCP](https://www.rumvision.com/help-center/glossary/metrics/first-contentful-paint/?format=md), [INP](https://www.rumvision.com/help-center/glossary/metrics/interaction-to-next-paint/?format=md) and [CLS](https://www.rumvision.com/help-center/glossary/metrics/cumulative-layout-shift/?format=md) metrics

The load state filter makes it easy to spot during which phase of the page load phase an event of a certain metric took place.

## Load states by web-vitals

Load states are coming from the [web-vitals library](https://github.com/GoogleChrome/web-vitals#loadstate) and are as following:

### loading

`loading` is the initial state where the document has started to load, but the full content hasn’t been fully downloaded or parsed.

During this period, the browser starts loading the HTML document from the server. The document hasn’t finished downloading, and parsing is still ongoing.

**JavaScript equivalent:**

```
  const loadingDuration = performance.timing.responseEnd - performance.timing.navigationStart;  
```

### dom-interactive

`dom-interactive `means when the document has been fully downloaded and parsed, but scripts and other resources might still be loading or executing.

In this state, the DOM is ready, and users can interact with basic elements on the page, but some scripts might not have fully loaded, and resources (like styles and images) may still be loading.

**JavaScript equivalent:**

```
  const domInteractiveDuration = performance.timing.domInteractive - performance.timing.responseEnd;  
```

### dom-content-loaded

`dom-content-loaded` means when the document is fully loaded and parsed, and all synchronous scripts have loaded and executed.  
   
 This phase marks the completion of DOM parsing and the execution of synchronous JavaScript. The DOMContentLoaded event has fired, indicating that core content is ready, though images and some external resources may still be loading.

**JavaScript equivalent:**

```
  const dclDuration = performance.timing.domContentLoadedEventEnd - performance.timing.domInteractive;  
```

### complete

The `complete` state is reached when the document and all its sub-resources (like images, scripts, and styles) have fully loaded.  
 JavaScript Timing Equivalent: From domContentLoadedEventEnd to loadEventEnd.

In this state, the page is fully loaded, including all sub-resources, and is interactive. The load event has fired, indicating that all resources have completed loading.

**JavaScript equivalent:**

```
  const completeDuration = performance.timing.loadEventEnd - performance.timing.domContentLoadedEventEnd;  
```

## Load State diagnostics

By understanding load states, you gain insights into how page resources load and impact each Core Web Vital:

### First Contentful Paint

- **FCP** benefits from focusing on the initial stages (`loading` to `dom-interactive`).  
     Of all mobile FCP events in our dataset: 
    - 54% is happening during `loading`
    - 10% during `dom-content-loaded`
    - 20% during `dom-interactive`
    - 16% during `complete`
 
### Cumulative Layout Shift

- **CLS** is improved by reducing layout shifts, especially in the later stages (`dom-content-loaded` to `complete`).  
     Of all mobile CLS events in our dataset: 
    - 7% is happening during `loading`
    - 2% during `dom-interactive`
    - 34% during `dom-content-loaded`
    - 58% during `complete`
 
### Interaction to Next Paint

- **INP** relies on reducing main thread tasks during and after `dom-interactive` to ensure quick responses to user input.  
     Of all mobile INP events in our dataset: 
    - 1% is happening during `loading`
    - 1% during `dom-interactive`
    - 10% during `dom-content-loaded`
    - 89% during `complete`
 
This approach helps you pinpoint where issues might arise and apply targeted debugging and optimizations to improve the user experience.