Table of Contents
- 1 Why do we need to monitor Core Web Vitals?
- 2 Lighthouse report (gtmetrix score) (Native speed)
- 3 Lighthouse report (gtmetrix score) (4G connection)
- 4 Elementor Pro
- 5 #2. Code Snippet:
- 6 Step: #5- Web Vitals Report
- 7 Before the optimization:
- 8 After the optimization:
In this step by step tutorial, we are going to learn how to set up & monitor Core Web vitals with web-vitals js 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).
Why do we need to monitor Core Web Vitals?This is not about SEO benefits but more on what your actual users are facing when they visit your website (User Experience) From my experiences, a Good Page speed Insights (PSI) or Lighthouse score is not the same as the Field-data score. Because I have tested it on my most 2 popular blog post.
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 etcYou can learn more about Speed tooling
Field-Data collected by web-vitals.js libraries ( this is past 2 days data by the way)
As you can see from the screenshot above (lighthouse and Field report) both are different from each other. I am talking about LCP and CLS.
To start collecting data, we have to set up a Custom Dimension in Google Analytics.
To do that-
- Login to your Google Analytics Property.
- Click the Admin, bottom left corner (see the screenshot below)
- After you open the Admin area, you have to Scroll down to your Property and you will find Custom Definition and open it and choose Custom Property.
- Click the New Dimension
- Remember the Index Number. When we define Dimension number we will use index numberwhether it is 1 or 2.
Step: #1- Custom Code
- 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: #2- Add New Custom Code
The second step is where we add web-vitals js libraries with Elementor pro: Custom code.
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.
- We have to implement web-vitals.js libraries.
- Collected the data from real users with the help of web vitals JS libraries and then sent it as events to Google Analytics.
To so there are 3 examples, we can use –
– Universal Analytics (UA):
For some reason, if you got stuck to Universal Analytics, then this is the Code for you to use on your website.
– Using Google Tag Manager + Universal AnalyticsIf you’re using Google Tag Manager + Universal Analytics, you can also monitor Core Web Vitals with the help of the tutorials.
– Using 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.
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
#2. Code Snippet:
Step: #1- Universal Analytics
- if you’re using Google Tag Manager + Universal Analytics: Please follow this tutorial
- If you’re using Google Tag Manager + Google Analytics 4: Follow this tutorial
If you don’t have Elementor pro, You can use the Code snippets plugin from WP Repository or upload it using an FTP client to implement & monitor Core web vitals.
Step: #2- Click the Add new
Click the add new to add the new snippet for use it is web-vitals.js
Step: #3- Deploy the new snippet with PHP
Step: #4- See the Chrome developer Console tab
To see the results properly, first, you have to right-click on your mouse and click the inspect elements to open the Google Chrome Developer panel.
Now, We open Chrome Developer tools by right-clicking on any page and clicking the inspect elements.
In the next steps, we have to throttle our network connection to Fast 3G so it loads slower, so we can simulate certain network conditions.
- Go to the Network panel.
- Throttle the connection to Fast 3G to simulate the network condition.
And Go to the Console tab and you will Core web vitals metrics individuals.
If you are login users, you will see the individuals metrics on the Chrome Console panel.
For visitors, they will not see the console.log, instead, it will send the data to Google analytics.
Step: #5- Web Vitals Report
Give some time to collect Data from real-users (2 days is enough if you don’t have enough traffic, data that might not show up) after you implement web-vitals JS libraries.
Now head over to Web Vitals Report
Now you have to log in to your Google Analytics account to retrieve data.
For privacy reasons, I have removed my email address.
Choose your Google Analytics property, choose the date range and compare segments and then click the submit button.
Before the optimization:
Keeps this in mind, that I only optimize LCP and CLS
Now you can see my Core Web Vitals score (above which I collected from real-users) which is bad and need immediate action.
And that what I did in few days after I collected.
After the optimization:
To view Debug Info, you need to define Debug dimension as “ga:dimension1” without quotation marks.
These are the results from top countries and Pages from the past 29 days.
Even my Google Search Console(GSC) Cumulative Layout Shift(CLS) issue is gone. That a huge improvement in my opinion.
And I hope you will figure it out the same as mine.
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)
- Browser Support, Polyfills for Web Vitals JS libraries