Core Web Vitals: Improve Your Website Speed | Fastly

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.  

What Are Core Web Vitals?

Core web vitals are a set of factors that Google has deemed important in a website's user experience. Core web vitals rate pages on your website from poor, needs improvement, and good.

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

Why are Core Web Vitals Important?

Core web vitals are evaluating several factors that play into the user experience. Here is what each measurement means and why it is important to have a good grade on it.

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.

How to Improve Core Web Vitals

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