Web Directions Year round learning for product, design and engineering professionals

Later this month, as you’ve likely read or heard somewhere, Google will start including page experience signals as part of their search ranking. This includes Core Web Vitals, a number of measures of web site performance– and so for the first time, the performance of your web content won’t simply affect your users, it will determine how visible your content is to people who use Google for search.

(Just before we continue let me just mention our Lazy Load conference coming up online June 11 and 18, which covers all this in detail with Annie Sullivan who is leading the team developing this technology at Google).

What does this look like in practice? Here’s how Google’s Search Central blog describes Core Web Vitals

The page provides a good user experience, focusing on the aspects of loading, interactivity, and visual stability:

Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, sites should strive to have LCP occur within the first 2.5 seconds of the page starting to load.

First Input Delay (FID): Measures interactivity. To provide a good user experience, sites should strive to have an FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, sites should strive to have a CLS score of less than 0.1.

Understanding page experience in Google Search results

So this week, I thought I’d round up some further reading, and tools to help you address the challenge of Core Web Vitals

Definitions and descriptions

“What gets measured gets managed” is a well known business proverb, attributed to Peter Drucker a pioneer in understanding the process of business management (though as with many such well known sayings, attribution to him is spurious).

Regardless, it is widely held to be true–so when it comes to improving Web performance with a goal to improve page rank, understanding what we are measuring is the first step in managing it.

First it’s important to note that these measures in Core Web Vitals are designed to be user-centric, and capture the user’s perception of performance. We could measure things like when DOMContentLoaded events are fired in a page, but these don’t necessarily reflect the user’s actual experience.

Based on discussions in the W3C Web Performance Working Group and research done at Google, we’ve found that a more accurate way to measure when the main content of a page is loaded is to look at when the largest element was rendered

Philip Walton, Largest Contentful Paint (LCP)

Enter–Largest Contentful Paint (LCP)

OK, but what is it we are measuring with LCP?

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Philip Walton, Largest Contentful Paint (LCP)

Philip goes into considerable detail in this very approachable article, with suggestions for how to improve LCP scores, and a look at using the Browser’s Performance Timeline API to measure LCP in the browser, and to capture performance analytics.

First Input Delay (FID)

FID 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.

Philip Walton, First Input Delay (FID)

There’s definitely some complexity to the metric, and what and how it is measuring that, but again Philip’s article is the go to for this, as well as suggestions for improving and measuring FID.

Cumulative Layout Shift (CLS)

How often, when reading something on the Web does all of a sudden the page “shift” downwards–perhaps triggered by an image loading , or content being injected into the page (often by ad servers and other 3rd party services).

Well Google has had enough of that, and will now take into consideration this “cumulative layout shift” in page experience (and so page rank) with this Core Web Vital (btw this includes intrusive pop overs begging us to sign up, sign in, or sign over our first born, or whatever these do, since like everyone else, I never actually read, let alone accept them!)

But just what is it?

Again Philip Walton (here with colleague Milica Mihajlija)

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. (See below for details on how individual layout shift scores are calculated.)

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

Philip Walton and Milica Mihajlija Cumulative Layout Shift (CLS)

Once again it’s not a trivial measure of performance, so there’s a bit to get your head around, but Philip and Mihajlija go into detail, about how it’s calculated, and what you can do to improve your score. And best of all you get to say to the folks in marketing

because that being terrible UX isn’t enough of an argument.

OK, we’ve got a decent sense of what is being measured-how can we manage Core Web Vitals? Here’s some useful articles I’ve come across (but to be honest for such a high impact topic, there’s a lot less out there than you’d expect.)

More reading

Our good friends at Smashing Magazine recently published a case study from Beau Hartshorne and his team at Instant Domain Search, who also took all the things they learned, and put together Instant Vitals, “Open source tools to track Web Vitals metrics in the field”.

Smashing Magazine also published An In-Depth Guide To Measuring Core Web Vitals, by Barry Pollard, a core maintainer of the Web Almanac. It reiterates some of what we cover above, but then really goes into detail about the tools you can use to measure these. It’s comprehensive and highly recommended.

Google Developers have a pathway (sort of like a course) with 8 lessons (and a quiz), focussed on Web Vitals.

Katie Hempenius (speaking at Lazy Load) and Una Kravets have a detailed article focussed on CSS-related techniques for optimizing Web Vitals

These are admittedly a bit Google heavy, since a lot of this is driven by Google of course, so if you come across some other valuable articles please let me know and I’ll update the post!

Good luck with your Core Web Vitals, and maybe see you at Lazy Load, where we’ll give you a lot of detail about how to improve not only these, but all your performance metrics.

In 2022 we have a whole series of events for Front End Developers

Across 2022 Web Directions is presenting our series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.