Webvitals.js Impact on Core Web Vitals | Blue Triangle Help Center

Overview

On November 13, 2024 Blue Triangle aligned our tag technology with Google’s Webvitals.js for the collection and reporting of the Core Web Vitals metrics. This update resulted in changes to the INP and CLS values.

Blue Triangle Methodology vs. Webvitals.js

With this update, the main difference is that the Blue Triangle tag now collects the Core Web Vitals (CLS, LCP, INP) from Webvitals library directly, rather than using our own methodology to calculate them.

When switching to the Webvitals JS library, the collected values for the Core Web Vitals may have been impacted. This is due to the differences in the collection methodologies between the Blue Triangle tag and the Webvitals JS library. Below are descriptions of the changes to CLS, INP, LCP, as well as changes to INP Event Types.

Cumulative Layout Shift

	Blue Triangle Methodology	Webvital.js Methodology
Collection	Collected from the LayoutShift interface of the Layout Instability API. `new PerformanceObserver((list) => { console.log(list.getEntries()); }).observe({type: 'layout-shift', buffered: true});`	Captured directly from the library. Measured using Layout Instability API. `import {onCLS} from 'web-vitals'; // Measure and log CLS in all situations // where it needs to be reported. onCLS(console.log);`
Contingencies	Only add up more score if the layout-shift event occurred less than 1 second after the previous entry and less than 5 seconds after the first entry in the session Do not report if the page is loaded from the BackForward (BF) cache and the persisted flag is true Do not report if the FCP is not captured Do not report if the page was loaded in the background Do not report if the CLS score is higher than 100	Reported again (with the above exceptions) after a page is restored from the back/forward cache. Not reported if the page was loaded in the background. Should be reported any time the page's visibilityState changes to hidden. Additional information can be found in the webvitals github.

Blue Triangle Methodology

Webvital.js Methodology

Collection

Collected from the LayoutShift interface of the Layout Instability API.

new PerformanceObserver((list) => { console.log(list.getEntries()); }).observe({type: 'layout-shift', buffered: true});

Captured directly from the library. Measured using Layout Instability API.

import {onCLS} from 'web-vitals'; // Measure and log CLS in all situations // where it needs to be reported. onCLS(console.log);

Contingencies

Only add up more score if the layout-shift event occurred less than 1 second after the previous entry and less than 5 seconds after the first entry in the session
Do not report if the page is loaded from the BackForward (BF) cache and the persisted flag is true
Do not report if the FCP is not captured
Do not report if the page was loaded in the background
Do not report if the CLS score is higher than 100

Reported again (with the above exceptions) after a page is restored from the back/forward cache.
Not reported if the page was loaded in the background.
Should be reported any time the page's visibilityState changes to hidden.

Additional information can be found in the webvitals github.

Interaction to Next Paint

	Blue Triangle Methodology	Webvital.js Methodology
Collection	Collected from the Event Timing API	Captured directly from the library.
Contingencies	Data is supported in modern Chromium-based browsers, including Google Chrome, Microsoft Edge, and Opera. Can only be recorded whenever a user interaction occurs	Reported again (with the above exceptions) after a page is restored from the back/forward cache. Not reported if the page was loaded in the background Should be reported any time the page's visibilityState changes to hidden. Not reported if the page was loaded, but the user never clicked, tapped, or pressed a key on their keyboard. Not reported if the page loaded, but the user interacted with it using gestures that aren't measured, such as scrolling or hovering over elements. Not reported if the page is being accessed by a bot such as a search crawler or headless browser that has not been scripted to interact with the page. Additional information can be found in the webvitals github.

Blue Triangle Methodology

Webvital.js Methodology

Collection

Collected from the Event Timing API

Captured directly from the library.

Contingencies

Data is supported in modern Chromium-based browsers, including Google Chrome, Microsoft Edge, and Opera.
Can only be recorded whenever a user interaction occurs

Reported again (with the above exceptions) after a page is restored from the back/forward cache.
Not reported if the page was loaded in the background
Should be reported any time the page's visibilityState changes to hidden.
Not reported if the page was loaded, but the user never clicked, tapped, or pressed a key on their keyboard.
Not reported if the page loaded, but the user interacted with it using gestures that aren't measured, such as scrolling or hovering over elements.
Not reported if the page is being accessed by a bot such as a search crawler or headless browser that has not been scripted to interact with the page.

Additional information can be found in the webvitals github.

Largest Contentful Paint

	Blue Triangle Methodology	Webvital.js Methodology
Collection	The browser dispatches a PerformanceEntry of type `largest-contentful-paint` identifying the largest contentful element as soon as the browser has painted the first frame. But then, after rendering subsequent frames, it will dispatch another `PerformanceEntry` any time the largest contentful element changes.	Methodology is the same. See this article from web.dev for more information. Captured directly from the library. `import {onLCP} from 'web-vitals'; // Measure and log LCP as soon as it's available. onLCP(console.log);`
Contingencies	If no LCP events were fired If the page view is not a full page turn (e.g it’s SPA or a custom timer)	Reported again (with the above exceptions) after a page is restored from the back/forward cache. Not reported if the page was loaded in the background. Additional information can be found in the webvitals github.

Blue Triangle Methodology

Webvital.js Methodology

Collection

The browser dispatches a PerformanceEntry of type largest-contentful-paint identifying the largest contentful element as soon as the browser has painted the first frame. But then, after rendering subsequent frames, it will dispatch another PerformanceEntry any time the largest contentful element changes.

Methodology is the same. See this article from web.dev for more information.

Captured directly from the library.

import {onLCP} from 'web-vitals'; // Measure and log LCP as soon as it's available. onLCP(console.log);

Contingencies

If no LCP events were fired
If the page view is not a full page turn (e.g it’s SPA or a custom timer)

Reported again (with the above exceptions) after a page is restored from the back/forward cache.
Not reported if the page was loaded in the background.

Additional information can be found in the webvitals github.

INP Event Types

Webvitals has chosen to group pointerdown, pointerup, and clicks as a single "pointer' interaction while keydown and keyup are grouped under an interaction type called "keyboard". The text below is from the webvitals library:

The type of interaction, based on the event type of the `event` entry that corresponds to the interaction (i.e. the first `event` entry containing an `interactionId` dispatched in a given animation frame).

For "pointerdown", "pointerup", or "click" events this will be "pointer", and for "keydown" or "keyup" events this will be "keyboard".

Due to this, the listed INPEventTypes are now grouped to: 'pointer' or 'keyboard'.

Sources

https://web.dev/articles/inp

https://web.dev/articles/lcp

https://web.dev/articles/cls

https://github.com/GoogleChrome/web-vitals?tab=readme-ov-file#web-vitals