Understanding Website Speed and Core Web Vitals: What is it and How to Measure

What is “Website speed” and what does it really mean? Website load speed (also called website performance) is the time that passes from the moment when the browser starts to load your website until the website is fully loaded.

But everything is not that simple, and here's why:

Pagespeed metrics (user-centric) explained

A long time ago? ? ?i?n? ?a? ?g?a?l?a?x?y? ?f?a?r?,? ?f?a?r? ?a?w?a?y?.?.?.?. the main Pagespeed metric was "load event", which refers to the moment when the entire page completes loading, including all dependent resources such as stylesheets and images.

While load event is an important metric, it doesn’t offer information about what happened during the loading process.

For example, here are 2 websites with this loading metric:

Both websites finished loading at the same time (fully loaded at 1.5 seconds).

However, the visitor will perceive the first website to be faster. Because they can see or read something on the screen while the site finishes loading. On the second website with unoptimized rendering, the visitor can only wait.

It is the same with regards to ‘time to interaction’. A site visitor will consider the website to be faster if they can interact with it without having to wait. It doesn't help if the website is fully rendered, but the visitor still has to wait 3 seconds until they can scroll the website.

User-Centric Performance Metrics

To address these issues, Google has introduced “User-Centric Performance Metrics". As the name suggests, these metrics concentrate not only on page loading speed but also on the user’s perception of page loading.?

In short, Google has divided page loading into different stages:?

• How quickly the user sees at least something, so the user realizes that page loading has started.
• How quickly the user sees the main content of the page, so they can start interacting with it.
• How much time the user has to wait until they can interact with the website.
• Whether or not elements of the website shift significantly while loading.

Generally, Google takes into account all of these stages together with “load event” to measure full-page performance.

Main User-Centric Performance Metrics:

Metric

Description

• TTFB — Time to First Byte reports the time that it takes for a user's browser to receive the first byte of page content
• FCP — First Contentful Paint measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.?
• LCP — Largest Contentful Paint reports the render time of the largest image or text block visible within the viewport.?
• CLS — Cumulative Layout Shift measures the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
• FID — First Input Delay 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.
• TBT — Total Blocking Time (TBT) is the amount of time, during which Long Tasks (all tasks longer than 50ms) block the main thread and affect the usability of a page. It reflects how unresponsive a page is before it becomes fully interactive.TBT measures what’s happening between FCP and TTI.?
• TTI — Time To Interactive tells you how long it takes for the page to become fully interactive and is measured in seconds.
• Speed Index — Speed Index measures how quickly content is visually displayed during page load.
• INP — Interaction to Next Paint observes the latency of all interactions a user has made with the page and reports a single value which all (or nearly all) interactions were below.

Google singled out the most important metrics (LCP, FID, CLS) in a separate group called “Core Web Vitals”. But this doesn't mean that we can ignore other metrics as they all work synergistically.?

You can get a sense of the complexity through the lighthouse calculator.

Monitoring Core Web Vitals metrics

We had the task of setting up a dashboard to monitor the site loading speed. At first glance, one way to create this dashboard was to use PageSpeed Insights or Lighthouse data. However, this is not the best strategy as PageSpeed Insights doesn't indicate your website performance as experienced by your users (and Google).

For example, our website had good desktop optimization, but the mobile version had a poor pagespeed score. It initially seemed like we needed to spend a lot of time fixing it.

But as our website (for example) is a SAAS service and mostly used by desktop users, users experienced good performance and considered our website as fast. The same goes for Google as they track real user data, not PageSpeed Insights data.

Another example:

This example shows the differences between Lab and Field Data.

Lab Data versus Field Data

1. Lab Data is data generated from a single test of a URL. It includes Pagespeed insights or other Pagespeed monitoring services and services that emulate page loading on some devices.
2. Field Data refers to the true performance experienced by users. While some of the metrics above can be measured only in the lab(TBT, TTI, speed index), others (LCP, FCP, CLS, etc.) can be measured in the field.

Ways of Measuring Website Performance?

LAB data?

Lab data can be measured with the following performance tracking services.

• WebPageTest — one of the best Lab tools (in my opinion)
• Pagespeed insights report — a standard tool provided by Google that uses Lighthouse and contains some data from Chrome UX report.
• Lighthouse? — a standard Google Chrome tool.?
• GTMetrix — Website monitoring tool.
• WebPageTest Other similar services

Do note that these performance-tracking services have their pros and cons.?

Advantages:

• Separate URL data can be tracked.
• Page performance on staging websites can be measured to check the difference between website versions (before/after deployments).
• Advice on how to improve performance can be obtained.

Disadvantages:?

• Page groups or whole website data cannot be tracked.
• Advice given by services often contradicts each other or does not affect metrics.?
• Rough numbers can lead to wrong impressions (as in the example with optimized and unoptimized rendering).

Field data

Chrome UX reports

Chrome UX reports are based on a free template provided by Chrome Team and contain data about websites from a Chrome source.?

Example of such reports: CrUX report

Advantages of Chrome UX reports:

• Access real user data on metrics that can be measured in the field.
• View historical data as well as current data.

Disadvantages of Chrome UX reports:

• Separate URL data or page groups can’t be tracked (only origin, domain).
• Only monthly data is provided.
• Reports update only on the 2nd Tuesday of the month.

GA Events

Core Web Vitals events (web-vitals library) are events that use browser API and send events in Google Analytics (or another source).?

Advantages:?

• Separate URL data, some page groups, or whole websites can be tracked.
• Data can be obtained for different periods (monthly, weekly, hourly)
• With some modifications, reports can be used to create dashboards by period, device, etc.
• Reports can be used to segment and analyze events with good or poor performance.

Disadvantages:

• Development or GTM implementation is needed.
• A lot of events are sent to GA, so it's not recommended to send all metrics data
• Default events show mainly average values so aren’t very informative.

I described our solution for monitoring Core Web Vitals using GA and GTM in the article “Core Web Vitals Report in GA4 and Looker Studio”.

In conclusion, website load speed is an important factor for user experience and can impact a website's search engine ranking. Monitoring Core Web Vitals and other metrics is crucial to improve user experience. However, it's important to consider the difference between lab data and field data to accurately assess website performance as experienced by users.

If you found this article useful, let me know by liking it or following me on LinkedIn.