Table of Contents
In this step-by-step tutorial, I am going to show you how to set up & monitor Core Web vitals with web-vitals js libraries on our project with the help of Elementor pro: Custom Code functionalities & Code Snippet plugin.
The web-vitals library is a tiny (~1K), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they’re measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console’s Speed Report).
I will be focusing mostly on improving the Cummulative Layout shift (CLS) and the Largest Contentful Paint (LCP) problems in my article.

If you’re fixing your Core Web Vitals issues, you need to first learn what is field data and lab data.
Lab-data is synthetically collected in a testing environment, is critical for tracking down bugs and diagnosing issues because it is reproducible and has an immediate feedback loop like lazy loading images fixes the “defer offscreen images”.
Field-data allows you to understand what real-world users are experiencing, conditions that are hard to simulate in the lab like latency, different devices, cache condition, etc.
If you want to know why your Lab & field data are different? Here is the answer from the web.dev.
This is the test I run on GTMetrix on the specific network conditions.
Testing Environments
Native speed: No throttling


We can see the decrease in LCP performance from 731 ms to 1 sec just by changing network connection type in the Lab environment, these drastic changes can happen when someone visits my website from slower connections.
You can see my page level – field data below-

As you can see from the screenshot above (lighthouse and Field report) both LCP metrics are different from each other.
If you didn’t optimize your website properly, your data might be different from mine.
You can see the data, it is mismatched. This is mainly due to many things:
- Inconsistent in CDN performance.
- My server response time (TTFB)
- Visitor’s network connections.
- Location, etc.
These types of conditions are out of my control which means I can’t cache the resources etc.
Since we can’t control them but we can start monitoring Core Web Vitals performance on ourselves, you need to have:
- Google Analytics such as Universal Analytics & GA4.
- Elementor Pro/ Code snippets plugin/ a Child theme to inject the script.
To do that-
This entire tutorial is meant for Universal Analytics users, not GA4 or GTM with GA.
1) Universal Analytics (UA) users
We have to send the data/ events through custom dimensions, so we have to set up a Custom Dimension in Google Analytics.
To do that, follow the step-by-step guide-
- Login to your Universal Analytics Property.
- Click the Admin, bottom left corner (see the screenshot below)
- Under Property Tab - scroll down and Custom Definitions then find Custom Dimensions (see screenshot for more details)
- Click the New custom Dimensions button in red and add a new dimension - give a Custom Dimensions name and click the create button
- Remember the Index value properly, it is important. Your index value can be different than mine.




Setting up Web Vitals JS libraries
To monitor and send Core Web Vitals events, we have to set up web vitals JS libraries and send the web vitals events to Google Analytics and filter it out with custom dimensions.
To set up, we have to use 3rd parties plugins like Elementor Pro: Custom Code, Code Snippet, etc to inject the script.
#1. Elementor Pro
If you’re using Elementor Pro, you can use Custom Code and set up web-vitals JS without touching even a line of PHP code.
Step#1(A): Custom Code
To use Custom Code, make sure you have Elementor Pro to version 3.1.0 and above.
- Go to the Backend of your WordPress website.
- Hover your mouse on the Elementor.
- Click the Custom Code.
Custom Code is a tool that gives you one place where you can insert styles and scripts like adding Google Analytics Tracking code, metatag etc

Step#1(B): Click the Add New button:
The second step is where we add web-vitals js libraries.When you add the code, you have to define the location where the Custom Code will appear and give priority in which order the custom code will appear.

Step#1(C): Add the web vitals JS code
For some reason, if the code provided is not working properly. Head over to Smashing Magazine JS to get the correct syntax.
If you use Smashing Magazine syntax you will need to add additional custom dimensions for dataSaver, effectiveType (network connection) & deviceMemory.
When web vitals send the events to UA it will send debug identifiers in custom dimensions.
Remember your Custom Dimension- Index value
Step#1(D): Set up Display Condition:
After you added the code now click the Display condition and set it to the entire site. You can choose the priorities and location where your code will appear.
So when your visitors visit your website, web-vitals JS will automatically collect the data and send the web vitals events to Google Analytics.
See the screenshot below
But If you’re not using Elementor pro, there are plugins you can use to implement web-vitals.js libraries. ( These are the plugin that comes up in my mind while I was writing)
- Header and Footer Scripts by Digital Liberation.
- Head and Footer Scripts Inserter By Space X-Chimp.
- Code Snippets By Code Snippets Pro (highly recommend)
#2. Code Snippets Plugins:
Step#2(A): Install the plugin:
If you don’t have Elementor pro, You can use the Code snippets plugin from WP Repository or upload it using an FTP client.

Step#2(B): Click the Add new:

Step#2(C): Deploy the new snippet with PHP
Instead of inline the JS to the head or body open, I combine the JS into a script tag.
function web_vitals() {
?>
function web_vitals_int(){
wp_enqueue_script('web-vitals','/wp-content/assets/js/web-vitals-int.min.js', false, '1.01', 'all');
}
add_action('wp_enqueue_scripts','web_vitals_int');
/*
* We Add the Module to web-vitals js libraries
*/
function add_type_attribute_web_vitals($tag, $handle, $src) {
// if not your script, do nothing and return original $tag
if ( 'web-vitals' !== $handle ) {
return $tag;
}
// change the script tag by adding type="module" and return it.
$tag = '';
return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute_web_vitals' , 10, 3);
When we plot rows and set the secondary dimension to web Vitals Debug Info (that is the name of Custom Dimension). We were able to see the debug identifier which CSS selector causes layout shift but we don’t know the numbers exactly whether I pass the Core Web Vitals or not.
To see properly, we have to head over to web vitals report and analysis the result.
Web Vitals Report
After you set up web vitals JS libraries properly,now give some time to collect data from real users. So you can analyze it-
- Head over to Web Vitals Report

- Login to your Google Analytics Account– Now you have to log in to your Google Analytics account to retrieve data. For privacy reasons, I have blurred my email address.

- Click the check box to Use advanced options (configurable per account) and add debug information:
a) choose your Google Analytics property.
b) choose the date range and compare segments
c) Add ga:dimension1 (mine is ga:dimension2) to debug information input fill
d) Click the submit button.

These are the results from top countries and Pages from the past 7 days (your data might differ from mine).
Results-
Before the optimization:


Now you can see my Core Web Vitals score (above which I collected from real-users) which is bad and need immediate action.
After optimizations, I did in a few days and these are the results.
After the optimization:

These are the results from top countries and Pages from the past 4 months.


2) Google Tag Manager + Universal Analytics
If you’re using Google Tag Manager + Universal Analytics, you can also monitor Core Web Vitals with the help of the tutorials.
3) Google Tag Manager + Google Analytics 4 (GA4)
If you’re using Google Tag Manager with GA4 or Google Analytics 4, then I highly recommend using the Simo post on how to Track Core Web Vitals in GA4 with Google Tag Manager or Follow web.dev article on measure and debug performance with GA 4 with BigQuery
4) Google Analytics 4 (GA4)
if you’re a GA4 user, I highly recommend reading the bigcommerce website advantage article on Core Web Vitals Tracking with a GA4 article.
If you see the before & after the optimization. We can see the improvement in Core Web Vitals assessments thanks to the Web Vitals JS libraries team, Barry Pollard’s article on Smashing Magazine, and Philip Walton’s article on the web.dev.
Now thanks to them, I pass the Core Web Vitals Assessments for more than 5 months and still counting.
Google Search Console



BigQuery + GA4
Do you know we also send Debug identifiers in UA or GA4?
Now, because of debug identifers, we can decide whether it is a bad idea or a good idea to preload hero image. Follow my tutorials to learn more and decide it for yourself.
Reference
Here are the external resources, you can rely on when it comes to Core web Vitals.
- Official Web Vitals.
- I have created the Core Web Vitals YouTube Playlist.
- Performance from By HTTP Archive
- Core Web Vitals & Page Experience FAQs (Updated: March 2021)
- JavaScript to send Web Vitals to Google Analytics with debug information (code)
- Browser Support, Polyfills for Web Vitals JS libraries
- 3rd parties RUM Analytics and Providers
Get Help!
If you need help setting up Web Vitals JS libraries with Google Analytics or optimizing your website so it passes your Core Web Vitals Assessments.
Contact me on Facebook or Elementor Experts Network.