DEV Community

Fastly for Fastly

Posted on • Originally published at fastly.com

Google’s Core Web Vitals: ensuring your site is ready for Google’s next major update

Authored by Mike Perez, Demand Generation Manager

It’s no secret that Google more highly values sites that focus on user experience. How quickly a page loads and how mobile friendly a site is have long been factors that go into their search ranking results.

On May 28, Google announced an update to their algorithm that will give weight to a new set of metrics they’re calling Core Web Vitals. Google says these three signals are critical to all web experiences: interactivity, visual stability, and loading, which can be directly impacted by your CDN configuration. By improving user experiences, Google says user engagement will improve as well, creating a better web for all — a sentiment we can certainly get behind.

To measure these signals, Google recommends websites focus on the following page metrics:

Loading: Largest Contentful Paint or LCP

Interactivity: First Input Delay or FID

Visual stability: Cumulative Layout Shift or CLS

Cumulative Layout Shift measures visual stability and quantifies the amount of layout shift that occurs unexpectedly on visible content. A layout shift occurs any time a visible element changes its position from one frame to the next. CLS is not a speed metric, so Google calculates a score based on impact and distance of layout shift.

In layman’s terms: A user is about to click the “complete purchase” button in their cart, and, without warning, it mysteriously moves down a couple pixels causing them to click on “remove from cart.” Whoops. A good score is less than .1.

First Input Delay measures responsiveness and quantifies the experience users feel when trying to first interact with the page. The metric reports the time from when a user first interacts with a page (i.e. clicks a link or button) to the time when the browser is actually able to respond to that interaction.

In layman’s terms: A user lands on your site, and the page begins to load. How quickly is that “sign up” button clickable? A good measure is anything below 100ms.

Although your CDN configuration can help improve FID and CLS, they won’t be the main drivers. The third, Largest Contentful Paint, can be directly impacted by your CDN configuration and API design though.

LCP measures the time elapsed between the page starting to load and when the largest element is rendered in the viewport. Elements measured are usually images, videos, and block level elements containing text nodes.

In layman’s terms: You know that heavy video you have loading above the fold? We hope it loads fast! A good measure is anything below 2.5 seconds.

One way to optimize LCP is by focusing on time-to-first-byte (TTFB). By caching API responses and collapsing images at the edge, you can improve your TTFB and thus your LCP. Optimized API design can seriously impact how quickly dynamic content loads — not only offering a more personalized user experience but also a faster one.

We’re hosting a webinar with Conductor to further explore how your CDN configuration can impact your search rankings on June 10. Register here.

Top comments (2)

Collapse
 
qainsights profile image
NaveenKumar Namachivayam ⚡

No link is available to register for the webinar. Please check. :)

Collapse
 
fastly_staff profile image
Fastly

Thanks! Edited.
Here is the link as well: explore.fastly.com/seo-and-caching