To guarantee peak performance and user satisfaction, website owners and developers must keep an eye on Chrome User Experience (UX) metrics. These metrics offer insightful information about how users engage with a website and its overall performance, including speed, responsiveness, and visual stability. Website owners can find areas for improvement, diagnose performance problems, and improve the user experience overall by regularly monitoring Chrome UX metrics.
The Chrome User Experience Report (CrUX) from Google gathers anonymized data from actual users’ browsing activities and provides a thorough overview of how well websites function on various devices, in various network environments, and various geographic locations. First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS), three crucial metrics that measure page load speed, visual stability, and overall user experience, are provided by CrUX.
Website owners can use Google Data Studio, a potent tool for building interactive dashboards and reports, to efficiently analyze and visualize Chrome UX data. With the help of Data Studio, users can establish connections with a variety of data sources, such as the Chrome UX Report, and produce dynamic visualizations that facilitate in-depth examination and investigation of UX metrics.
Website owners can discover areas for improvement, track the effects of optimizations over time, and obtain actionable insights into performance trends by integrating Chrome UX data into Data Studio. Users can see Chrome UX metrics in conjunction with information from other pertinent data sources, like Google Analytics or Search Console, using Data Studio’s configurable dashboards, which offer a thorough understanding of user behavior and website performance.
Querying Chrome UX Data in BigQuery
We will look at how to incorporate Chrome UX data into Data Studio and make interactive dashboards for in-depth reporting and analysis in this guide. We will walk through how to connect to the Chrome UX Report data source, create custom visualizations, and create interactive dashboards that offer insightful information about the functionality and user experience of websites. Website owners may efficiently track Chrome UX metrics, improve performance, and provide their users with an outstanding experience by using Data Studio.
Website owners can analyze and gain insights from user experience metrics with powerful capabilities when they use SQL to query Chrome UX data in Google BigQuery. Aggregated data from actual user experiences is collected and stored in the Chrome User Experience Report (CrUX) dataset in BigQuery. This allows for a thorough examination of important metrics like Cumulative Layout Shift (CLS), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
The CrUX dataset in BigQuery is composed of multiple tables, each of which contains distinct subsets of UX metrics aggregated by origin and origin-level characteristics like Chrome version, device type, and country. A few of the available tables are chrome-ux-report.month.* and chrome-ux-report.country.*, which offer UX metrics aggregates at the monthly and national levels, respectively.
Users can use SQL to filter, aggregate, and transform Chrome UX data in BigQuery to derive valuable insights. SQL queries can be used for several different tasks, including:
- Data Filtering: To concentrate on pertinent subsets of data, choose particular dimensions and metrics of interest. Then, filter the data according to parameters like origin, device type, or metric thresholds.
- Data Aggregation: To determine averages, medians, percentiles, or other summary statistics to comprehend overall performance trends, combine UX metrics across dimensions.
- Transforming Data: To compare performance across various dimensions, transform data, compute derived metrics, or normalize data. These steps will transform raw data into actionable insights.
For instance, a SQL query can determine the median LCP for each device category and aggregate LCP values by device type:
By connecting Google Data Studio to the BigQuery dataset, the desired data can be visualized in Data Studio after it has been extracted and processed using SQL queries in BigQuery. With Data Studio, users can generate interactive dashboards and reports to visualize Chrome UX metrics and obtain useful insights into the performance and user experience of websites.
Creating Data Studio Reports
Creating reports in Data Studio is a straightforward process that allows users to visualize data from various sources and customize the layout and design to meet specific needs. Here’s how to design a new report in Data Studio:
1. Selecting Data Sources:
Begin by selecting the appropriate data sources for your report. Data Studio supports a wide range of data connectors, including Google Analytics, Google Sheets, Google BigQuery, and many others. Choose the data sources that contain the metrics and dimensions you want to analyze and visualize in your report.
2. Introduction to Data Studio Components:
Data Studio offers a variety of components for building reports, including charts, tables, scorecards, and more:
- Charts: Charts allow you to visualize data in different formats such as line charts, bar charts, pie charts, and scatter plots. You can customize chart types, axes, colors, and styles to best represent your data.
- Tables: Tables display data in tabular format, making it easy to view and analyze raw data. Tables can be customized with sorting, filtering, and conditional formatting options.
- Scorecards: Scorecards display single metric values or key performance indicators (KPIs) in a visually appealing format. You can customize scorecards with thresholds, colors, and icons to highlight important metrics.
3. Customizing Report Layout and Styles:
Once you’ve added components to your report, you can customize the layout, styles, and themes to match branding and presentation requirements:
- Layout: Arrange components on the report canvas to create a logical flow of information. Use containers and grids to organize components neatly and efficiently.
- Styles: Customize the style of individual components, including fonts, colors, borders, and backgrounds. Ensure consistency in styling to maintain a cohesive look and feel throughout the report.
- Themes: Choose a theme for your report to apply consistent styling across all components. Data Studio offers built-in themes and allows you to create custom themes to match your branding.
By selecting appropriate data sources, leveraging Data Studio components effectively, and customizing the report layout and styles, users can create visually appealing and informative reports that provide valuable insights into their data. With Data Studio’s flexibility and customization options, reports can be tailored to meet the specific needs of stakeholders and effectively communicate key metrics and findings.
The Chrome User Experience Report helps us with real-world measurements of key metrics that help determine the User Experience for any website in Google Index. These metrics are derived directly from the Chrome user data and give us an idea about the real-world challenges faced by real-world Chrome users.
This data can be accessed via the following methods:
- PageSpeed Insights, which provides URL-level user experience metrics for popular URLs that are known by Google’s web crawlers.
- Public Google BigQuery project which aggregates user experience metrics by origin, for all origins that are known by Google’s web crawlers, and split across multiple dimensions outlined below.
- CrUX Dashboard on Data Studio, which can be set up to track an origin’s user experience trends.
- CrUX API, which provides metrics by origin and urls.
In this article, we will be discussing how to generate the Chrome UX report using Data Studio.
Getting Started
- On a new tab open the URL: g.co/chromeuxdash
- On the resulting window enter your website url:
Beware, to use the following URL formats:
If your origin(website) is not included in the CrUX dataset then you may get the following message:
If the origin exists, the schema page will open which consists of all the parameters in the data set that will fetch to create the report.
Click on Create Report to generate the CrUX Dashboard.
Dashboard Overview
- Core Web Vitals overview
- Metric performance
- User demographics
Core Web Vitals Overview
The first tab gives you an overview of all the major Core Web Vitals metrics. You can check it for both Mobile and Desktop versions.
Metric Performance
This consists of a series of tabs LCP, FID, CLS, FCP, INP and TTFB metrics. All these tabs share data regarding each individual Core Web Vital metric.
Each tab consists of the Device filter.
The primary visualizations on these pages are the monthly distributions of experiences categorized as “Good”, “Needs Improvement”, and “Poor”. The colour-coded legend below the chart indicates the range of experiences included in the category. For example, in the screenshot above, you can see the percentage of “good” Largest Contentful Paint (LCP) experiences fluctuating and getting slightly worse in recent months.
The most recent month’s percentages of “good” and “poor” experiences are shown above the chart along with an indicator of the percent difference from the previous month. For this origin, “good” LCP experiences fell by 3.2% to 56.04% month-over-month.
Additionally, for metrics like LCP and other Core Web Vitals that provide explicit percentile recommendations, you’ll find the “P75” metric between the “good” and “poor” percentages. This value corresponds to the origin’s 75th percentile of user experiences. In other words, 75% of experiences are better than this value. One thing to note is that this applies to the overall distribution across all devices on the origin. Toggling specific devices with the Device filter will not recalculate the percentile.
User Demographics
Lastly the User Demographics data (Labelled as the “Device Distribution” Tab). The device distribution page shows you the breakdown of phone, desktop, and tablet users over time. Many origins tend to have little to no tablet data so you’ll often see “0%” hanging off the edge of the chart.
Just like above, the connection distribution page shows you the breakdown of 4G, 3G, 2G, slow 2G, and offline experiences.
