How do you measure user experience? How do you give user experience a score? The answer is that we can't. User experience is a multifaceted topic, we can't definitely measure it in quantitative terms. However, there are quantitative measurements that can be used as "signals" to lead you to aspects of your web pages that can potentially be improved for better user experience. Core Web Vitals are examples of these signals.
How do you measure user experience? How do you give user experience a score? The answer is that we can't. User experience is a multifaceted topic, we can't definitely measure it in quantitative terms.
However, there are quantitative measurements that can be used as "signals" to lead you to aspects of your web pages that can potentially be improved for better user experience. Core Web Vitals are examples of these signals.
Core Web Vitals (a subset of Web Vitals, initiated by Google) represent distinct facets of the user experience on web pages. They focuses on three aspects of the user experience:
LCP is an user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded.
The key phrase here is "main content". It is impossible for computers to determine what the main content should be on a web page. But Google research and W3C discussions have determined that the more accurate way is to measure when the largest element was rendered.
Example:
Tips
LCP is often an image file. Ensure the optimal usage of the image resolution (no bigger than necessary) and file format (JPEG vs PNG vs WebP vs others). There are content delivery services that can intelligently serve the best resolution and file format according to the user's device. You may consider using these services for your website.
Remember that Core Web Vitals are signals. If one of your web pages has a poor LCP score, it may not necessarily mean a bad user experience - the largest element of the web page may not be crucial to the user's experience of the page.
FID is an user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with webpages.
FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.
Tips
Reduce unnecessary JavaScript codes to make your webpage lean.
When writing JavaScript codes, ensure it's not blocking other thread execution by responding to events asynchronously.
Google says it best about CLS:
Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you've lost your place. Or even worse: you're about to tap a link or a button, but in the instant before your finger lands—BOOM—the link moves, and you end up clicking something else!
CLS measures the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.
Tips
The content of modern websites are often dynamically loaded. This might look cool when the content emerges and shifts the other elements around, but it can make for a jarring user experience, especially when the content is slow loading.
A better method is to do what YouTube does. When you load YouTube web, for a split second you will see a "skeleton screen":
The skeleton screen has element placeholders with fixed dimensions. This ensures that no element shifting occurs when the dynamic contents are loaded.
When you output your HTML, try to ensure that you give your elements (eg. IMG, DIV) fixed width and height.
There are various tools to measure Core Web Vitals, here are just a few:
The easiest way to view Core Web Vitals is to use a Chrome extension. For every web page you visit, you will be able to see the real-time data. For example:
Also known as Chrome User Experience Report (CrUX), this data is aggregated from real Chrome users who meet certain conditions. One report that you can use is PageSpeed Insights where you enter a URL and it displays the CrUX of the page. For example:
To get even more insight about your own website, you should consider recording your own Core Web Vitals. This works for all major browsers, not just Chrome. You can, for example, execute the Core Web Vitals JavaScript library on your website and record the data to Google Analytics for further dashboarding and analysis.
One benefit is obtaining a holistic view of Core Web Vitals across all browsers. Another is to simply reduce guesswork and manual labour. Rather than having to examine web pages one by one, developers will be able to quickly sort tables by performance and have conversations around which ones to improve first.
