How to make use of cutting edge tools to monitor web user-centric metrics?
Leverage insights from millions of real users to improve your web experience.
At NEDigital we are constantly monitoring core metrics to identify potential areas to enhance the user experience on our website. The data points from monitoring applications(APM) like newrelic, DataDog etc are majorly focused on standard APM metrics like load time, response time, throughput, error rate etc. But in this new era of the Web, it’s not sufficient enough. With the google chrome team constantly evolving their core algorithm behind lighthouse API we need to be on our toes round the clock. To achieve this we need insights that are more meaningful for developers as well as businesses.
The CrUX dashboard is a public dataset of real user experience data for millions of websites. It measures the Core Web Vitals metrics, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), as well as diagnostic metrics like Time to First Byte (TTFB) and First Contentful Paint (FCP).
You can refer to CrUX documentation for a detailed explanation of each metric which can be accessed through CruX.
This data empowers us to truly understand the performance of our website from the lens of real users. Not only we can get insights on our website but we can compare it with our direct competitors.
In this article, we will discuss how to set up a CrUX dashboard for a domain and understand various metrics associated with it.
Creating a dashboard
The CrUX Dashboard is built with a Data Studio feature called Community Connectors. This connector allows us to link the raw CrUX data on BigQuery with the visualizations capabilities of Data Studio. It simplifies the dashboard creation process while eliminating the need for users to write any queries or generate any charts. All we need is to provide an origin and a custom dashboard will be generated for us.
Step 1) Goto this URL g.co/chromeuxdash and it will take you to the chrome Community connector page post-authorization using your google account. Post authorization you will see a screen as mentioned below.
On this page, you need to provide the origin’s URL for which dashboard is being created.
This URL shouldn’t include any sub-domain.
https://www.fairprice.com.sg Supported URL formathttps://www.fairprice.com.sg/product/meiji-fresh-milk-2lt-10238055
Non Supported URL with Sub-Domain.
Just click the connect button on the top right corner and it will proceed towards the next step of the set up.
Step 2) Data set editor and report creation.
In this step, you will get a preview of the dataset being used along with key parameters as mentioned in the screenshot below.
In this preview, it shows all the parameters and default aggregation applied to them. We simply need to click on CREATE REPORT button and it will show a confirmation popup like shown below
Again click on CREATE REPORT and this connector will start creating a report for you in the new tab.
Step 3) Access the dashboard
Your new dashboard is ready and it should look like this.
You can now share your new dashboard with users by simply adding their email addresses and providing them access to view or edit the dashboard.
Dashboard Insights
The CrUX dashboard provides platform-specific stats related to the web vitals.
- Largest Contentful Paint (LCP): During the page load cycle, LCP is the time taken to load the page’s main content. The main content could be the largest image or text block within a given viewport.
- First Input Delay (FID): FID measures the delay in processing the first event triggered by the user like a click on a button or link.
- Cumulative Layout Shift (CLS): To explain CLS we need to understand Layout shift first. A layout shift occurs when a visible element changes its position from one rendered frame to the next. Whereas CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.
- Time to Interactive (TTI): It measures the time from when a page starts to load till its key resources are loaded and it’s competent in efficiently responding to user inputs.
- First Contentful Paint (FCP): It’s the first point of reference in the page load timeline when the user can see anything on the screen.
- Total Blocking Time (TBT): It measures the total amount of time between FCP and TTI where the main thread was blocked for long enough(more than 50ms) to prevent input responsiveness.
Out of these first three are the Core Web Vitals. Apart from Web Vitals CrUX dashboard provide insights related to business metrics.
- Notification Permissions: Chrome shows users a prompt to grant the current website permission to show notifications when initiated by the website. Users can directly or indirectly take 4 actions i.e. Accept, Deny, Dismiss and Ignore.
- Device Distribution: This dimension is essential to identify the focus market in terms of device percentage usage within the web platform. The key bifurcation is between Desktop, Mobile Web and Tablet.
- Connection Distribution: Provides the effective connection type (“slow-2g”, “2g”, “3g”, “4g”, or “offline”) as determined by round-trip and bandwidth values based on real user measurement observations. This metric can be quite effective for consumers from developing nations where users are on different network speeds.
Summary
To create a new CrUX dashboard we need to access g.co/chromeuxdash connector, provide the domain and set up the dashboard following the steps mention above. The insights from this dashboard can help your team to identify key potential issues which can improve the overall experience of your platform across various device types.
Hopefully, this article helps you set up a CrUX dashboard for your application.
Thank you for reading!
