Figures: Chapter 3 – Site Speed Metrics
Site Speed Metrics
We cannot characterize the loading of a page in a single measure. A page load is a user experience with an action, a feedback, and a confidence threshold that leads to the next user action. To accurately capture the finesse of this, there are a lot of metrics to measure page speed, both from a field and lab perspective. Their measurement and computation are well-defined for performance professionals. Here is an overview in the context of how they map to users’ perceived experiences.
Perceived experience: Visual Feedback
The user can see that the loading occurs, as early elements are displayed on the page. The more progressive the display is, the faster the user feels that the page loads.
Key Metrics:
- Start Render: First display on the screen (before that, the page remains blank) as determined by synthetic monitoring video analysis
- First Contentful Paint (FCP): When the browser first renders any text, image (including background images), non-white canvas/. As provided directly by the web browser in real user monitoring.
Perceived experience: Confidence
The user has enough information in front of them to think that they can interact with the page. For example, the biggest content is available, or most of the page content is displayed.
Key Metric(s):
- Speed Index: Reflects the average display speed of the page components.
- Largest Contentful Paint (LCP): Speed of delivering the largest contentful element to the screen.
Perceived experience: UX Frictions —
The user can interact with the page but the experience is compromised by slowdowns and content shifts that prevent the user from enjoying the content and services.
Key Metric(s):
- First Input Delay (FID): Delay experienced by a user when interacting with the page for the first time. This measurement is taken from whatever interactive element that the user first clicks, i.e. therefore is only available with real-user monitoring
- Total Blocking Time (TBT): Total amount of time that a page is blocked from responding to user input (clicks, keyboard presses, etc.) after the page has started to render content
- Cumulative Layout Shift: Scores every significant movement of the elements on the page that may frustrate or mislead users, e.g. page takeovers by modal windows used to push marketing offers