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 |
|
|
Interaction to Next Paint
Blue Triangle Methodology | Webvital.js Methodology | |
Collection | Collected from the Event Timing API | Captured directly from the library. |
Contingencies |
|
|
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 |
|
|
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://github.com/GoogleChrome/web-vitals?tab=readme-ov-file#web-vitals
Comments
0 comments
Please sign in to leave a comment.