Introduction to Core Web Vitals

Core Web Vitals are a collection of standardized metrics from Google that assist developers in understanding how consumers view a web page.

Google has been utilizing measures like these to proxy user experience for a long time. In 2010, they first described how they utilized site speed to rank search results. But the web has developed significantly in the 11 years since that declaration. As browsers grow more capable, consumer expectations regarding interaction, availability and security have also increased.

With Google’s 2021 upgrade, Core Web Vitals has three pillars: speed, responsiveness, and visual stability. This is merely a subset of a bigger collection of Web Vitals, which also take security, mobile readiness, and more into consideration.

Specifically, Core Web Vitals measures how quickly the largest piece of information in the initial viewport loads (loading), how responsive a website is (interactivity), and how jumpy a page is (visual stability) (visual stability). Each pillar is tied to one metric. The metrics that make up the Core Web Vitals are 1) Largest Contentful Paint,2) First Input Delay, and 3) Cumulative Layout Shift.

Ready to dig into the nitty-gritty of LCP, FID, and CLS? Let’s do it.

1. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)

The largest Contentful Paint evaluates perceived load speed. Again, monitoring load speed is nothing new. What’s new is the way Google gauges perception of load speed. Historically, they’ve advised measurements like Speed Index (SI)—the average time visible sections of the website are shown, or First Meaningful Paint (FMP)—the time between the user beginning the page load and the page displaying the main above-the-fold content. Largest Contentful Paint measures how long it takes to render the largest single element in the viewport.

It’s a subtle distinction between prior incarnations but a crucial one. Essentially, what LCP asks of your site is, “How long does the single biggest element on your page take to come up?

So, why the change? Based on talks in the W3C Web Performance Working Group and internal research done at the firm, Google concluded that measuring LCP instead of FMP is a more objective approach to assess when users view the “main content” of a page to be valuable.

For more on what sorts of elements are examined and how element size is computed, you may check out the LCP API.

2. First Input Delay (FID)

First Input Delay evaluates a site’s perceived interactivity. The lesser the delay time, the better. Specifically FID, it seeks to put a number behind how a user can feel while attempting to engage with unresponsive websites. A low FID time signals to Google search that your site is responsive to a user’s activities.

So. How precisely is that calculated? FID is given in milliseconds and is the delta from the time that a user first interacts with your site (for example, they click on a link or touch on a button) and the time when the browser replies to that request.

3. Cumulative Layout Shift (CLS)

Cumulative Layout Shift

CLS assesses the visual stability of a page. Users anticipate page information to move around while engaging with your site. But when content switches without a user anticipating it, that might result in a terrible experience. Even worse, they may lead to consumers hitting the incorrect buttons or even making purchases they didn’t want.

How is CLS calculated? It’s a scale designed by Google that analyzes how much your content moves around after the first-page load, and the Layout Instability API describes layout shifts.

How to Improve Core Web Vitals

Core Web Vitals may be enhanced by working on several various areas of a site, beginning from the infrastructure it’s hosted on, to the way the app is developed, to making little modifications like resizing individual pictures.

Here are some of the highest-impact approaches to enhance Core Web Vitals:

  • Enable compression by default
  • Minify CSS, JS, and HTML
  • Reduce the number of redirects
  • Remove render-blocking JavaScript
  • Cache assets at the edge via a CDN or Netlify Edge
  • Serve static assets with an efficient cache strategy
  • Avoid an excessive DOM size
  • Avoid large network payloads
  • Adopting Jamstack on Netlify and adopting best practices builds a solid basis for performance and high Core Web Vital ratings.

Much of this is enabled by default on Netlify. For example, materials sent by Netlify Edge are automatically compressed using Brotli encoding for even reduced sizes and decompression efficiency. Netlify Edge is distributed like a CDN but with extra features for publishing complete sites and apps. Its worldwide distribution with automatic prerendering enables blazing fast site delivery. Even better ratings are attained with Netlify’s HP Edge, available on Enterprise subscriptions, a network with 30% quicker speeds than our raw edge.

There are no one tool teams can embrace to get excellent Core Web Vitals. But by embracing Jamstack on Netlify and employing best practices, you’ll be well-equipped to design performant sites that rank highly in Google search and better serve your visitors.

I want to hear your thoughts in the comments section below, don’t forget to subscribe to our newsletter for more updates.