Why are we discussing core and secondary web vitals in the context of User experience, GEO and AI visibility?
Today, we have two sets of audience. Humans and AI agents. A webpage is experience by both in very different ways. It is important to understand the performance metrics that affect the human experience and the AI agent experience as well.
The human experience of a web page affects the search engine optimisation while the AI agent experience affects the AI visibility and generative engine optimisation.
This is a three part article series. In this article we deal with the human experience and in the following article we talk about the agent experience. Then we will have one talking about how to improve the web vitals. Lets dig deeper.
What are Core Web Vitals?
Core web vitals are the parameters set by google to evaluate a website’s performance for user experience. These are quantitative parameters which helps understand the quality of webpage performance. Businesses can assess their website’s performance and list out opportunities for improvement.
There are many tools to measure the core web vitals. All the tools measure the metrics in two cases, one is the test lab simulation where the conditions are ideal. Another is in field simulation giving real world metrics where conditions are not ideal.
In the real world, environmental conditions always differ. A user could have a slow internet connection, varied screen sizes or browser versions which the website may or may not be compatible with. They could be accessing the page via a screen reader or keyboard and the website may or may not be set for accessibility. Hence, the real world metric values matter more than the lab simulation.
Which areas of the web page performance do web vitals focus on?
Web vitals, both core and secondary, focus on the three performative aspect of webpage -
Loading - Time taken for the elements on the webpage or the whole web page to load
Interactivity - How well the website is responsive to user activities like button clicks, searches etc
Visual Stability - How structurally well defined is the page and how the elements on it are rendered
What are the Core Web Vitals?
There are three major core web vitals -
LCP - Largest Contentful Paint
INP - Interaction to Next Paint
CLS - Cumulative Layout Shift
What are the Secondary Web Vitals?
Secondary web vitals are stable supporting web vitals. These are experimental but diagnostic in nature.
The three major secondary web vitals are -
TBT - Total Blocking Time
TTFB - Time to First Byte
FCP - First Contentful Paint
Why the use of terminology ‘Paint’ in the web vital metrics?
Look at web page as something being painted on a blank canvas.
There are things that are getting painted on t he screen - a background, an image, a video, some text or animation.
The metrics measure various things while painting of the elements is happening like how soon the painting starts, when does the first byte gets painted, when does the biggest element gets painted, how fast are they painted (or load), how stable is the design and if it is interactive or not.
Can you explain the Core Web Vitals in detail?
The three core web vitals are explained below -
LCP - Largest Contentful Paint
LCP belongs to the ‘loading’ performative category. It is the time duration in which a page’s most important and biggest content by size appears on the web page. For a good user (human) experience, LCP should be less than 2.5 seconds of when the web page first starts loading.
INP - Interaction to Next Paint
INP belongs to the ‘Interactive’ performative category. It tells how quickly the page reacts to clicks, searches, taps, keyboard inputs etc. INP should be less than 200 milliseconds for a good user experience.
CLS - Cumulative Layout Shift
CLS falls into the ‘visual stability’ category. It tells how much the web page is structurally well defined and how much content on it moves around the page / shifts while loading. For a good user experience CLS score should be 0.1 or less. When the score is 0.11 to 0.25 it means improvement is needed. A score of 0.25 and above is considered very poor.
When is a webpage said to have a high user experience?
To consider a page as “passing” the core web vitals criteria, at least 75% of the user visits must hit the “Good” target threshold for each of the three core web vitals - LCP, INP and CLS.
i.e. LCP should be less than 2.5 seconds. INP should be less than 200 ms and CLS score should be 0.1 or less.
For the no of user visits, 75th Percentile is measured instead of an average value or a median value. This is because average of median value tend to distort the outcome result when there are outliers. Outliers are easy to happen in real world conditions.
Example, a user’s internet connectivity may not be good OR they could be browsing from an older version of the browser. Hence, 75th percentile strikes a good balance because then 3/4th of your real world traffic experiences good site performance.
Why does google measure mobile and desktop CWV parameters separately?
Google measures core web vitals for desktop and mobile separately because the conditions for their usage differs highly.
Desktops are mostly connected to broadband connections or wifi fed with broadband and have high and steady internet speeds. Many a times website designs are not device responsive i.e. they are developed for desktop and may or may not be optimised for mobile responsiveness. This gives very different user experience.
Mobile hardware more than often perform on cell networks where connectivity and speed may differ. A website designed for desktop may not give optimal experience on mobile devices. If a website is optimised for mobile device then the experience changes to good.
Combining desktop and mobile together will generate more outliers and lead to misleading metrics. Please note google takes devices like iPads into the mobile device category.
Can you explain the Secondary Web Vitals in detail?
Secondary web vitals are stable and diagnostic in nature. These are field metrics which are not experimental in nature. They provide better insights into web page experience when used along with the core web vitals.
Lets look at what these are -
TTFB - Time to First Byte
This is the metric that measures the loading time. This diagnostic metric is precursor to LCP (largest contentful paint). The ideal time for TTFB is said to be 800 ms for humans.
FCP - First Contentful Paint
This os a metric that also measure the loading time of any first paint on the webpage. It deals with the very initial rendering. This provides early visual feedback. It is considered as a companion to LCP.
TBT - Total Blocking Time
This metric measures the interactivity / responsiveness of a web page. It is a companion to INP (Interactive Next Paint). TBT measures which javascript or content are blocking the loading of the content on the web page. This is a lab only metric present in lighthouse tool.
What is the difference between FCP and LCP?
FCP measures when any content is painted to the screen and LCP measures when the main content is painted. FCP is an indication of that the page has started to load but LCP is an indication of when the page visually means something.
Why are TTFB and FCP considered good companions to LCP measurement?
Largest Contentful Paint is when the largest most important piece of content loads on the webpage. It is important to note that LCP time includes any unload time from previous page, connection set up time, redirect time, time to first byte (TTFB) delays. When all of these are put together then the total LCP time can be significantly higher.
To know what is leading to a high LCP, one needs to measure TTFB and FCP as well.
What are real user monitoring (RUM) tools for web vitals?
There are many tools out there which can be used for monitoring of core and secondary web vitals. Tools offered by google that measure and provide core web vitals are -
PageSpeed insights
Search console
Chrome user experience report
Chrome dev tools
Third party tools which can be used are
Cloudflare
New Relic
Akami
Calibre
SpeedCurve
Blue Triangle
Sentry
RAYGUN