Wednesday, May 27, 2020

Core Web Vitals - Replaces "Speed Report" in GSC, Primary Metric changed to LCP

Even Google's "PageSpeed Insight" doesn't give a "Largest Contentful Paint" measurement yet. But that's a new key metric. I'm avoiding inserting links, but this is what I've found so far. Maybe this explains some of the SERP movement from the May update.

Largest Contentful Paint Explainer

Objectives

Developers today don't have a reliable metric that correlates with their user's visual rendering experience. Existing metrics such as First Paint and First Contentful Paint focus on initial rendering, but don't take into account the importance of the painted content. Therefore, these metrics may indicate times in which the user still does not consider the page useful.

Largest Contentful Paint (LCP) aims to be a new page-load metric that correlates with user experience better than the existing page-load metrics, and is easy to understand and reason about.

At the same time, LCP does not try to be respresentative of the user's entire rendering journey. That's something that the lower-level Element-Timing can help developers accomplish.

What is Largest Contentful Paint

Largest Contentful Paint (LCP) is a new page load metric which describes the speed of delivering the largest contentful element to the screen.

LCP is the high-level metric, with Element Timing being its low-level primitive. LCP aims to provide a meaningful result even for developers that won't go through the trouble of annotating their sites, which is a requirement to use Element Timing.

Why largest and contentful

In order to better correlate with user experience, we designed LCP to represent the speed of delivering main content on the screen. While the main content is important to the user experience, what the main content is is highly subjective and different users can come up with different answers. As an approximation, LCP uses the largest contentful element to represent the main content.

Historically, we’ve tried complex heuristics to determine when the page has meaningfully painted, as in First Meaningful Paint (FMP) metric. In practice, these heuristics have worked well for ~80% of the content. But they often produce strange, hard-to-explain outlier results in the remaining cases. LCP is a simple, practical approach to estimating a time that represents a meaningful paint for users, without heavily relying on complex heuristics. With LCP, we don’t observe the outliers encountered with FMP.

Largest: biggest initial size

LCP uses the largest element to approximate the main content on the page. As visual sizes of elements can change during the whole page load, LCP uses the size of the first paint of elements to decide which one is the largest. During the page load, an element can be painted many times, for example, an element could be first painted when added to the DOM tree, and repainted when text has to replace its font with a newly loaded web font.

The use of initial size affects pages where the elements move, such as animated image carousels. In such carousels, for images that are initially outside the viewport and that "slide" into it, LCP may define their size as their painted size when they are first added to the DOM, which will be 0. The same issue also applies to interstitials or dialog boxes that slide into the viewport.

Contentful: text, image, background images, videos’ poster-images

The contentful elements in LCP’s context include two main groups - textual and pictorial.

Groups of text nodes are created as described in the text considerations section of the Element Timing explainer. The textual nodes which are grouped include:

text nodes

SVG text nodes

Pictorial elements are described in the image considerations section of the Element Timing explainer. The pictorial elements include:

image elements

html elements with contentful style-background-images

video elements with poster images

In the future, we may add canvas and video elements to the group of contentful elements.

----------------

From the new Core Web Vitals explanation of statuses:

Status: Poor, Need improvement, Good

The labels Poor, Needs improvement, and Good are applied to a URL on specific device type.

URL status

A URL's status is the slowest status assigned to it for that device type. So:

A URL on mobile with Poor FID but Needs improvement LCP is labeled Poor on mobile.

A URL on mobile with Needs improvement LCP but Good FID is labeled Needs improvement on mobile.

A URL on mobile with Good FID and CLS but no LCP data is considered Good on mobile.

A URL with Good FID, LCP, and CLS on mobile and Needs improvement FID, LCP, and CLS on desktop is Good on mobile and Needs improvement on desktop.

If a URL has less than a threshold of data for a given metric, that metric is omitted from the report for that URL. A URL with data in only one metric is assigned the status of that metric. A URL without threshold data for either metric will not be on the report.

Status definitions

Status metrics are evaluated against the following boundaries:

GoodNeeds improvementPoorLCP<2.5s<=4s>4sFID<100ms<=300ms>300msCLS<0.1<=0.25>0.25

LCP (largest contentful paint): The amount of time to render the largest content element visible in the viewport, from when the user requests the URL. The largest element is typically an image or video, or perhaps a large block-level text element. This is important because it tells the reader that the URL is actually loading.

Agg LCP (aggregated LCP) shown in the report is the time it takes for 75% of the visits to a URL in the group to reach the LCP state.

FID (first input delay): The time from when a user first interacts with your page (when they clicked a link, tapped on a button, and so on) to the time when the browser responds to that interaction. This measurement is taken from whatever interactive element that the user first clicks. This is important on pages where the user needs to do something, because this is when the page has become interactive.

Agg FID (aggregated FID) shown in the report means that 75% of visits to a URL in this group had this value or better.

CLS (Cumulative Layout Shift): The amount that the page layout shifts during the loading phase. The score is rated from 0–1, where zero means no shifting and 1 means the most shifting. This is important because having pages elements shift while a user is trying to interact with it is a bad user experience.

Agg CLS (aggregated CLS) shown in the report is the lowest common CLS for 75% of visits to a URL in the group.

You can find recommendations on fixing these issues by running the PageSpeed Insights test on an affected URL.

submitted by /u/roofvents
[link] [comments]

from Search Engine Optimization: The Latest SEO News https://www.reddit.com/r/SEO/comments/grjy99/core_web_vitals_replaces_speed_report_in_gsc/>

No comments:

Post a Comment