What are the new metrics in Performance?

Performance has been expanded to include new metrics as part of the performance results for a given page. These are part of Google’s new Web Vitals and help to further explain both what the given experience is for a page and what the cause is behind this experience. 

You will find that these metrics are listed in the Score Breakdown element, both on the Page Performance level and the Measurement Results level. Each line will show the current score you have within the specific metric and the maximum score for that given metric. These maximum scores express the weighting that is used to calculate the Performance score for the page and are intended to illustrate how each metric weighs into the calculations that are used in search engines when determining a page’s user experience.

Higher point values are better within each of the metrics. If you earn the maximum number of points for a given metric, it will be checked off and highlighted green.

Below you’ll find a breakdown of what each metric represents, and what aspects of the page’s construction they are connected to.

First content

First content measures how long it takes the visitor's browser to render and display the first piece of DOM content. This is also known as the moment where the browser goes from whitespace to partial content and is important in order to make the page “feel fast”.  Images, non-white <canvas> elements, and SVGs on your page are considered DOM content. 
Anything within an iframe is not.

A common culprit for First content is font load time. Try and ensure that text on the page remains visible while loading in webfonts.

Speed Index

Speed Index measures how fast page content is visually displayed when loading the page. It’s based on a visual progress calculation from a video capture generated when measuring the page. Performance will compute visual progress from a recording of the page loading.

Speed Index is highly dependent on scripting and main thread load, however nearly all other Performance Suggested Improvements will also improve Speed Index.  It is therefore suggested you start with the other metrics first.

Largest content

Largest content measures how long it takes for the visitor's browser to render and display the largest image or text block visible within the viewport. In order to provide a good experience, you should aim to have a Largest Content value below 2.5 seconds.

Largest content is often dependent on server response times, render-blocking scripts, resource load times, and client-side rendering.

Interactive

The time it takes for the content of your website to become functional and ready for your users to interact with. This will give you a better understanding of how your website is experienced and perceived on the user end.

Interactive is calculated by measuring how long it takes until the page content is loaded and background activity levels are low enough that the page is ready to receive new input from the user without delay.

Interactive is highly dependent on scripting; by minimizing main thread work and reducing execution time Interactive is improved.

Blocking time

Blocking time measures the amount of time between First Content and Interactive that the browser's main thread was blocked for long enough to prevent user input responsiveness.

The CPU main thread is considered “blocked” whenever there’s a long task. A long task is a task that runs on the main thread for more than 50 ms.  The browser is considered “blocked” during these tasks, as the browser cannot interrupt a task that is in progress.  This means that if the user interacts with the page while this is in progress, the browser must wait for the task to complete before it can respond.

Blocking time is dependent on scripting; by reducing the impact of third-party code and reducing main thread work, you can improve Blocking time.

Layout shift

Layout shift measures the degree to which page elements shift position dynamically, without the user giving input. This can be very distracting and annoying for users, and so should be minimized if possible, to ensure a consistent experience.

Typical causes of layout shifts include asynchronous elements that load onto the page, third-party resources that have dynamic content, and fonts that load larger or smaller than the fallback that it’s replacing.

Layout shift can be improved by ensuring you have specified size attributes for your photo or video elements and never inserting content above existing content without the user giving input.  If you are using on-page ads or other dynamic content, it’s a good idea to ensure that you’re reserved the necessary space on the page for this content.  Doing so will prevent the browser from dynamically placing the content on the page, and therefore shifting everything else.