![\"Google](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/vitals-kpis-1024x337.jpg\")
Source:https:\/\/web.dev\/vitals\/<\/a>To optimize page loading speed, it is important to understand a little about the technology behind rendering a website. Google has defined three main KPIs that you can use as a guide. These are three metrics (numerical values) that determine how well the page is rendered in the browser:<\/p>\n- \n
- LCP: Largest Contentful Paint<\/strong>– indicates how long it takes until the largest image or text block within the currently displayed area (=viewport) has been loaded. In the optimal case, the value is less than 2.5 seconds.<\/li>\n
- FID: First Input Delay<\/strong>– this is about the responsiveness of the browser when displaying a website. So how quickly you react to a click (or, on a tablet, to a tap). The value should be less than 100 milliseconds.<\/li>\n
- CLS: Cumulative Layout Shift<\/strong>– If texts slip or images change position, this metric kicks in. This KPI provides information about whether the content on the website changes significantly when loading. If you’re reading something and the text suddenly slips because something is reloading, this metric will go into the red. In the best case (no shifting\/shifting of the content) 0 is passed.<\/li>\n<\/ul>\n
Installation options<\/h2>\n
Web Vitals is a JavaScript library that can be integrated into your website. You can either host it yourself or use a CDN (Content Delivery Network). Cloudflare provides a free resource, unpkg.com, from which Web Vitals may be deployed on any website.<\/p>\n
So if an uncomplicated installation is preferred, the Web Vitals library can be made available quickly and easily on your own site via unpkg.com with just one line of code.<\/p>\n
If a Google Tag Manager container exists:<\/h3>\n
The easiest way is via the GTM template “Core Web Vitals”:
![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm1.png\")
The template can be searched for and found via the menu item “Templates” \/ “Templates” and by clicking on “Search in Gallery”. Once the template has been added to the workspace, it still needs to be created as a tag:![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm2.png\")
There is actually no need to set anything separately for this day. All you have to do is set a rule (trigger) as to when the day should fire. It would be best to always capture the web vitals. That’s why we recommend using the All Pages Trigger:![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm3.png\")
If these changes were published now, nothing would be recorded. This custom template tag only writes Web Vitals data to the dataLayer (the data layer variable):![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm4.png\")
In order to get this data into GA4, it needs to be captured. This can be achieved using a trigger and an additional GTM tag:![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm5.png\")
<\/p>\nTriggers<\/p>\n
Before the GA4 tag is created, the data layer variables would have to be created in the GTM. These will then transmit the data from the custom template to the GA4 tag at runtime.
![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm6.png\")
The following variables can be created:<\/p>\n\n\n
\n \nName of the GTM variable<\/th>\n Data layer variable name<\/th>\n<\/tr>\n<\/thead>\n \n dl – webVitalsMeasurement.name<\/td>\n webVitalsMeasurement.name<\/td>\n<\/tr>\n \n dl – webVitalsMeasurement.id<\/td>\n webVitalsMeasurement.id<\/td>\n<\/tr>\n \n dl – webVitalsMeasurement.value<\/td>\n webVitalsMeasurement.value<\/td>\n<\/tr>\n \n dl – webVitalsMeasurement.delta<\/td>\n webVitalsMeasurement.delta<\/td>\n<\/tr>\n \n dl – webVitalsMeasurement.valueRounded<\/td>\n webVitalsMeasurement.valueRounded<\/td>\n<\/tr>\n \n dl – webVitalsMeasurement.deltaRounded<\/td>\n webVitalsMeasurement.deltaRounded<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n These variables can then be used in the GA4 tag:
![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/gtm7.png\")
<\/p>\nGA4 day<\/p>\n
If this setup is published, the Web Vitals KPIs will be sent to GA4.<\/p>\n
If you prefer to integrate Web Vitals natively (into the site’s source code):<\/h3>\n
The following code inserts Web Vitals natively (i.e. without a tag management system) into your website. The prerequisite for functionality is the integration of GA4 via gtag.<\/p>\n
<\/code><\/pre>\nThe code can be placed after the gtag code for Google Analytics 4.<\/p>\n
Testing<\/h2>\n
If everything has been installed correctly (either via GTM or native installation), you will get GA4 HTTPS streams in the network console, which already show that Web Vitals data is being sent to Google Analytics 4:
![\"Web](\"https:\/\/e-dialog.group\/wp-content\/uploads\/2025\/08\/console1.png\")
<\/p>\nImage: Network console<\/p>\n
The Web Vitals can then be reported in GA4 using the following parameters:<\/p>\n
- \n
- Event Name: LCP, FID or CLS<\/li>\n
- webvitals_name<\/li>\n
- webvitals_id<\/li>\n
- webvitals_value<\/li>\n
- value<\/li>\n<\/ul>\n
Evaluation and optimization measures<\/h2>\n
The great added value of transferring the data into an analytics tool is that you can link this data with other information and thus form segments and create profiles of specific devices, countries of origin and browser\/operating system.<\/p>\n
Below – short and sweet – are some recommendations for action if you want to evaluate the Web Vitals.<\/p>\n
- FID: First Input Delay<\/strong>– this is about the responsiveness of the browser when displaying a website. So how quickly you react to a click (or, on a tablet, to a tap). The value should be less than 100 milliseconds.<\/li>\n