Google is offering the Chrome User Experience Report (CrUX) to see what real users are experiencing while visiting the website. Report can be seen in www.pagespeed.web.dev website. This helps to understand if website has good CWV or need some improvements.

Untitled

After entering website into field, it will shows its mobile and desktop Core Web Vitals reports for current url and origin for whole website.

But this report is updated with interval of one month. For instance, if Core Web Vitals where improved and deployed to website at 1 February, then we will see new current results only at 1 March. This make it difficult to understand if improvements where made correctly and users are now experiencing better website visit.

To not wait for CRuX to be updated, it is possible to implement Real Time User Monitoring (RUM) which gathers user experience in real time. One of services that provides this possibility is New Relic browser tool.

1. How to setup New Relic browser tool?

After logging in to New Relic on left there is tabs with tools it provides. Out there will be browser tab.

Untitled

After pressing this tab, it will show dashboard with all RUM entities that exists on account.

Untitled

In case if list is empty, follow step How to create new browser tool entity to create new entity or if there is already existing not in used, then follow step How to user already existing New Relic browser entity to inject service into website.

How to create new browser tool entity

Untitled

In case if list doesn’t has any entities, it is possible to create new entity by pressing on ‘Add Data’ button’.

It will open a search of tools that New Relic provides. Here for faster looking of required tool write ‘browser monitoring’ into search field.

This will filter out all tools and show browser tool. After searching for tool, click on ‘Browser monitoring’ tool.

Untitled

Untitled

Here it is required to select ‘Copy/Paste Javascript code’. This will provide us with snippet of code that later will be injected to document head.

At end of creating new entity, just enter name that will be displayed as indicator of your browser application in list.

After entering name, it is required to press ‘Enable’ button.

Untitled

Untitled

In the end we of setup, New Relic will provide code snippet, which will be needed to inject into document. Preferred place is document head.

How to user already existing New Relic browser entity

If there is already entities in browser tool list, but it is not populating with Core Web Vitals data, select proper one from list and click on it.

It will be noticeable that entity is not in use by looking at summary where it will be showing message that ‘No data’

Untitled

Untitled

To make it start gathering data, it is required to go into Settings → Application settings.

Now if entity is disabled, it is required to enable it with selecting appropriate plan by clicking on toggle.

It can be a PRO or PRO +SPA plan, for gathering Core Web Vitals data there is no reason.

Untitled

After selecting plan and saving changes, New Relic will generate code snippet, which will need to be injected into document head.

Untitled

2. How to analyzer Core Web Vitals with New Relic browser tool?

If browser tool script is successfully injected into website it will start to gather Core Web Vitals information. It can be seen in summary when entering into entity from browser list.

Untitled

Untitled

To see more detailed view on Core Web Vitals inspect tabs on left and search for Monitor → Web vitals.

It will open more details by page view data with possibility to filter by page url, domain, devices, time and much more.

Untitled

For example, to see Core Web Vitals information only from decided, click on ‘FIlter by’ button.

This will open helper where can select attribute to filter, operator and value.

Untitled

In example it is selected attribute ‘deviceType’ which says by which device to filter data, operator is equal and value is mobile, which means that data will be filtered by reports only from mobiles.

Untitled

To select timestamp it is required to click on time field in right up corner

This will expand options where it is possible to select one of default timestamps or create a custom one.

By selecting timestamp it will filter information from time that is selected, a.k.a if selecting timestamp ‘3 hours’, only for past 3 hours gathered data will be shown.

This can be useful in case if deployment with Core Web Vitals improvement was made on some day and putting timestamp to filter out data from that day will show if improvements where done well or somewhere still need adjustments.

Untitled