Table of Contents
Overview
The Performance Overview page has now been enhanced with VitalScope for Core Web Vitals. VitalScope offers insight into the detailed CWV metrics, as well as the components attributing to the CWV, in priority.
VitalScope is aimed to direct the web developer to efficiently identify the CWV metrics and page components that impact the user experience most, and optimize those.
Where to Find Vital Scope
Vital Scope is housed in the RUM Performance Overview page, which can be accessed through the left-side portal menu under Real User Monitoring, then Performance Overview.
How to Navigate Vital Scope
At the top of the page is the Performance Overview with VitalScope table. This table is a high level overview of the site's performance, sorted by page name. The CWVs are color coded to reflect the performance standards set by Google (green=good, yellow=need improvement, red=poor).
Customize the table by clicking the gear icon at the top right.
Click on a metric to include it in the table. There are also the options at the top to include only the Core Web Vitals, or Core Web Vitals + VitalScope Elements (VitalScope will only apply to the three CWV metrics: Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift).
Click here for a full list of the VitalScope metrics along with their descriptions. VitalScope data is available both per page and by URL. If VitalScope data is available for a metric, a purple icon will appear to the left of the metric value.
Click on that icon to view the averages for the VitalScope elements on the page.
To view data for a different VitalScope element, click on the drop down menu.
The data in this table can be exported as a CSV, TSV, JSON, or Array file.
Click on the arrow next to the page name to see the performance for the top 50 URLs per page. Averages for each of the VitalScope elements per URL can be accessed by clicking the purple icon next to the metric.
Use the drop-down menu to switch between element type.
Vital Scope Metrics
Disclaimer: The Blue Triangle technology leverages webvitals.js to collect the CWV metrics and attribution data. In some cases, the metrics and/or attribution data may be missing. To read more about the current issues please click here.
Largest Contentful Paint (LCP) Metrics & Attribution Data
LCP Metrics
| LCPElementRenderDelay (ms) | Returns Element Render Delay in milliseconds. |
| LCPElementRenderDelay (%) | Returns the percentage of Element Render Delay |
| LCPTimeToFirstByte (ms) | Returns the Time to First Byte in milliseconds and percentage. |
| LCPTimeToFirstByte (%) | Returns the percentage of Time to First Byte. |
| LCPResourceLoadDelay (ms) | Returns Resource Load Delay in milliseconds. |
| LCPResourceLoadDelay (%) | Returns the percentage for Resource Load Delay. |
| LCPResourceLoadTime (ms) | Returns the Resource Load Time in milliseconds. |
| LCPResourceLoadTime (%) | Returns the percentage of Resource Load Time |
LCP Attribution Data
| LCP Selector* | Returns the selector of the HTML element that contains the LCP image or video. |
| LCP URL* | Returns the URL of the HTML element that contains the LCP image or video. |
*- in some cases, webvitals.js (the mechanism used to capture the attribution data), does not provide the selector or the URL. For example, if the LCP element is text, it may not have a URL. Blue Triangle performs the following manipulations to provide more insight to developers about the LCP element in these situations:
| Value returned from Webvitals.js | BT Assignment | Action taken | ||
| LCP URL | LCP Selector | LCP URL | LCP Selector | |
| Valid | Blank | Valid | Element type: (.jpg) | Assign element type from the URL |
| Blank | Blank | 50 first characters from innerText | Blank | Assign 50 first characters from innerText |
| Blank | Valid | 50 first characters from innerText | Valid | Assign 50 first characters from innerText |
Cumulative Layout Shift (CLS) Metrics & Attribution Data
CLS Metrics
| CLSLargestShiftStart (ms) | The time when the single largest layout shift contributing to the page's CLS score occurred. |
| CLSLayoutShiftCount | Returns the number of CLS elements. |
CLS Attribution Data
| CLSLargestShiftSelector | Returns the document selector for the HTML element that caused the largest shift. |
Interaction to Next Paint (INP) Metrics & Attribution Data
INP Metrics
| INPStart (ms) | This indicates the precise moment when a user initiates an interaction, such as clicking a button or typing in a form field. |
| INP Input Delay (ms) |
This is the first phase of INP and represents the time it takes for the browser to begin processing the event handler associated with the user's interaction. It's the duration between the user initiating an interaction and the browser actually starting to execute the relevant JavaScript code.
|
| INP Next Paint Time (ms) | The moment when the browser next updates the display after an interaction |
| INP Processing Duration (ms) | The time it takes for event callbacks to run to completion |
INP Attribution Data
| INPTargetSelector | The document selector for the HTML element that triggered the INP metric. |
| INP Event Type | The user action that triggered the INP metric. |
| INPTarget | Refers to the specific HTML element that the user interacted with, triggering the interaction being measured for INP |
Long Animation Frames (LoAF) Metrics & Attribution Data
LoAF Metrics
| LoAF Longest Script Duration (ms) | The duration of the LoAF script. |
| LoAF Longest Script Start (ms) | The start time of the LoAF script. |
LoAF Attribution Data
| LOAFLongestScriptInvoker | The trigger of the script that drives the LoAF metric. |
| LOAFLongestScriptSourceURL | The URL of the script that drives the LoAF metric. |
Comments
0 comments
Please sign in to leave a comment.