Google’s Core Web Vitals has been one classification signal since 2021 when Google introduced three metrics to measure the quality of user experiences on a website.
Real user monitoring data can tell you how well you’re doing in Core Web Vitals and what you can do to improve. This applies especially to the new one Interaction with Next Paint metric (INP) that becomes one of the main web vitality on March 12, 2024.
What is the difference between lab data and real user data?
When we measure web performance, we can look at lab data (also called synthetic data) or real user data (also called field data).
Laboratory data is collected in a controlled testing environment. It tells you how fast your website loads from a given test location, with a given network connection and a specific test device. This makes it very consistent between tests, and reporting can be very detailed as the test tools have full control over the test environment. lighthouse is an example of a synthetic testing tool.
Instead, real user data is collected from visitors when they go to your website. Each visitor will have a different experience depending on where they are, the speed of their internet connection and the type of device they are using. So when we look at a metric, we have to look at a statistical average like the 75th percentile which is commonly used when reporting Core Web Vitals data.
You will often see that the metric values do not match between lab and field data. Ultimately, what you care about is the actual user experience, but synthetic data can provide much more depth to help you understand and improve your page speed.
Why is real user data important to improving your Core Web Vitals?
Running a lab-based page speed test It is great to analyze the initial loading speed of your website. But other metrics depend on how users interact with the page once it’s opened.
This especially applies to the new metric Engagement with Next Paint. Your INP score depends on which page elements users interact with and at what point in the page load process those interactions occur.
while Cumulative design change (CLS) can occur during initial page load, often in response to user interaction or when scrolling down a page. If you only collect data in a synthetic environment, you will miss these design changes that occur later in the website visit.
How to collect Core Web Vitals data from real users
A real user monitoring (RUM) solution com DebugBear can help you collect Core Web Vitals data from your visitors. You’ve set up an analytics snippet on your website and this data is aggregated and displayed in a Core Web Vitals dashboard.
You can see if any of your most visited pages are slow and how the user experience varies based on the location of your visitors.
How to decide which pages to optimize
To start, check if any of your most popular pages are failing the Core Web Vitals assessment. You can also use Google Search Console to identify pages with poor user experience on your website.
Once you’ve identified a page, you can dig deeper into analyzing your RUM data and find ways to improve.
Enhance larger content painting with real user data
Real page user monitoring data can help you understand the impact that various performance optimizations would have.
LCP optimization potential The analysis shows what needs to be optimized to improve the LCP:
Time to First Byte (TTFB): This component analyzes how quickly the server responds to the HTML request. First Contentful Paint (FCP): This tells you if there is one render lock resources which prevent the content of the page from appearing. LCP: Shows how long it takes to render the LCP element after the first page render
See which page elements are responsible for the largest content painting
Different visitors viewing the same page will see different content when the page first loads. The largest content item varies between desktop and mobile users and between logged in and logged out users.
Analyzing which page elements most often end up as an LCP element helps you understand which optimizations will help the most users. It also lets you see if there are any LCP elements that result in particularly low LCP scores.
Reduces render blocking resources
If the First Contentful Paint component is contributing a significant amount of time to your LCP score, you need to see what can be done to get your website up front.
Tools like DebugBear and others tell you what the last render lock request is for each page view. If you load this resource faster, the First Content Paint will occur sooner.
Optimize LCP images
The LCP element the breakdown tells us what type of element is responsible for the LCP for different users. Here the analysis shows us that a background image is responsible for the largest content painting 96% of the time. This means we should focus on loading that image faster.
The LCP subparts The breakdown helps us optimize image loading performance by looking at the components that follow the TTFB:
Load delay: How soon after loading the HTML document does the browser start loading the image? Loading Time: How long does it take to download the image? Render delay: Does the browser display the image immediately after it loads or is there a delay?
In this case we can see that we have to optimize the loading time, for example by reducing the download size by one more modern image format. The image is also often just loaded before the first content painting, meaning it stays hidden for hundreds of milliseconds.
By looking at a specific page view and researching the ask for waterfall visualization can help you better understand the order in which different resources are loaded and how long a given request takes.
For example, here we can see which request loads the LCP image, when that request starts, and how long after the request the LCP is recorded. Here we can see that the LCP (indicated by the red line on the right) occurs right after the LCP image is loaded, meaning there is no rendering delay for this page view.
Improve the interaction with Next Paint with real user data
Your website’s INP score is highly dependent on the page elements that users interact with. Clicking somewhere in a paragraph usually doesn’t trigger any code, and these interactions will be quick. A button or menu toggle that spawns a new UI component and displays it will take much longer.
With real user data you can see which elements users interact with most often and which of those interactions are slow.
Identifying the code that is causing slow interactions
You can also see which scripts are responsible for slow interactions. JavaScript files can be part of the code of your website or a third-party service such as a chat widget or a pop-up newsletter.
This is possible thanks to the new Long Animation Frames API which will be included in Chrome from mid-March 2023. This browser functionality reports what code is causing rendering delays on a page.
When you look at a individual user experience you can see what element the user interacted with and what code was running at the time, causing a poor INP.
Once you’ve identified a specific script file, you can check if that script is needed and if there are ways to make it run faster.
When do slow page interactions occur?
Another factor that affects INP is the stage of page load when the interaction occurs. During the early stages of loading, INP is often high as many parts of the page are initialized, which requires a lot of CPU processing.
If this is the case, you can consider different ways to optimize the initial page load logic and whether more space can be left to handle user interactions during this time.
The width of the bars in this graph indicates how many users encounter a poor INP at each load stage. So even though the initial “load” stage causes poor INP, not many users are affected.
Improve cumulative design change with real user data
Because design changes often occur after user interaction, real user data makes it easier to identify changes that you can’t detect in a lab-based test.
You can see which elements are moving and which user interaction caused the design change. For example, an image that appears in response to a button click may push down other content on the page after the image has finished downloading.
What is the difference between Real User Tracking (RUM) and Google CrUX data?
You can use Google’s Chrome User Experience Report (CrUX) to get real Core Web User Vitals data for your website, without having to do any configuration work.
However, real user monitoring addresses several limitations of CrUX data:
Regressions and improvements are shown instantly with RUM data, while CrUX data is aggregated over a 28-day period. CrUX data is only available for high-traffic pages, while RUM data is available for any page on your website that a visitor views. CrUX data only provides metric values and not debug data. You can see where your website is having problems in Core Web Vitals, but you won’t know what to do about it.
Real user tracking shows you how users experience your website and what impact it has on their behavior.
Get started with Core Web Vitals monitoring of real users
Do you want to improve your web vitals, rank higher in Google and provide a better user experience? DebugBear provides one Free 14-day trial – sign up now to get the data you need to optimize your website!
[ad_2]
Source link
