Load state

This filter works with the FCP, INP and CLS 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 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.

Table of Contents