Web vitals represent elements of the user experience in a session that can be measured, quantified, and rated on a three point scale: Good, Needs Improvement, or Poor. Each session recording tracks six web vitals:
-
Cumulative Layout Shift (CLS): Measures instances of layout shift in a session. A layout shift refers to when a page element changes position or size, which in turn causes shifts in the content around it. Moving elements create a bad user experience, and the larger the score, the more shifting is occurring in the session. Often, a poor CLS score is due to ads, dynamically injected content, and embeds and iframes without dimensions.
- Good: ≤ 0.1
- Needs Improvement: ≤ 0.25
-
Poor: > 0.25
-
First Contentful Paint (FCP): Measures the time it takes for the browser to render the first content–text or image–after a user clicks a URL. This quantifies response times, and the longer it takes the render the first piece of content, the lower the user experience.
- Good: ≤ 1.8s
- Needs Improvement: ≤ 3s
-
Poor: > 3s
- Google notes that over 53% of users will click out if a page takes more than 3 seconds to load.
-
First Input Delay (FID): Measures the time between when a user interacts with a page and when the browser responds to the interaction. This could be how long after a user clicks a link or taps a button that the browser begins the action. Delays of this sort indicate slow loading times. Often, a slow FID is caused by bloated JavaScript files.
- Good: ≤ 100ms
- Needs Improvement: ≤ 300ms
-
Poor: > 300ms
-
Input Latency (INP): Measures the time taken for a the browser to respond to user input, like clicking or scrolling. Low input latency indicates a more responsive page and ensures a smooth user experience.
-
Largest Contentful Paint (LCP): Measures the time it takes to render the largest content element in the viewport, usually an image or video, based on when the user clicks the URL. This indicates how fast the URL loads the page. Usually, a poor LCP score is caused by oversized files, uncompressed images, JavaScript and CSS that blocks rendering, or slow server response time.
- Good: ≤ 2.5s
- Needs Improvement: ≤ 4s
-
Poor: > 4s
-
Time to First Byte (TTFB): Measures the time between the request for a resource and when the first byte of a response begins to arrive. This accommodates redirect time, service worker startup time, DNS lookup, connection and TLS negotiation, and the request itself. A longer connection setup time contributes to a poor user experience.
- Good: ≤ 800ms
- Needs Improvement: ≤ 1800ms
- Poor: > 1800ms
With the help of web vitals, you can use the Session Search to investigate poor performing pages and implement improvements to the user experience. For example, if you filter the sessions list by a product URL and apply a poor web vital score, you can find sessions where users have visited that page and encountered poor performance.
Optimizing web vitals has a greater impact than improving the user experience. In eCommerce, every extra millisecond of loading time creates drop-off, so merchants should monitor web vitals to ensure poor performance doesn’t lead to shoppers clicking off. Additionally, good web vitals can increase traffic to an eCommerce site. Because the Google search engine prioritizes pages with fast loading times, pages with poor web vitals are less likely to be surfaced in a Google search. In other words, monitoring web vitals to optimize each page’s performance also helps with SEO.