CORE WEB VITALS SERVICE

What is the Google Core Web Vitals Service, and Why Should You Care?

Great Question!

In the past, it’s been a challenge for web developers to measure how quickly the main content of a web page loads and is visible to users.

According to the W3C Web Performance Working Group and research at Google, a more accurate way to measure when the main content of a page is loaded is to look at the rendering time of the most significant element.

The Google Core Web Vitals report educates you on how each of your web pages performs against a set of Google metrics. Google Core Web Vitals results come from real-world usage data (sometimes called “field data”). You can read more about this initiative on the Google Search Central Blog by clicking this link.

Google uses this Core Web Vitals report and your web page content to decide where your content should “rank” when someone does a Google search. The higher you rank on Google Core Web Vitals, the more likely you will be on Page 1 versus your competition for similar web page content.

The metrics of Google Core Web Vitals will evolve. The current set focuses on three aspects of the user experience: loading (LCP), interactivity (FID), and visual stability (CLS). They include the metrics and their respective thresholds, as shown in the above image:

• Largest Contentful Paint (LCP): This measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): This measures interactivity. To provide a good user experience, pages should have an FID of 100 milliseconds or less.
• Cumulative Layout Shift (CLS): This measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

For each of these metrics, the 75th percentile (label = GOOD) on mobile and desktop measurements is a reasonable threshold to measure. A lower score will likely cause your Google PageRank to be lower for a Google search on keywords related to your business’s products and services.

HOW TO IMPROVE LCP (CORE WEB VITALS SERVICE)

• Slow server response times
• Render-blocking JavaScript and CSS
• Resource load times
• Client-side rendering
• Optimize CSS
• Optimize JavaScript
• Optimize Images
• Optimize Web Fonts

HOW TO IMPROVE FID (CORE WEB VITALS SERVICE)

First Input Delay (FID) is a Core Web Vitals metric that captures a user’s first impression of a site’s interactivity and responsiveness. FID measures the time from a user’s first interaction with a page to the time when the browser can respond to that interaction. FID is a fielding metric that is not simulatable in a lab environment. Real user interaction is required to measure the response delay.

• Break Up Long Tasks
• Optimize Your Page For Interaction Readiness
• Use A Web Worker
• Reduce Javascript Execution Time
• Defer Unused Javascript
• Minimize Unused Polyfill
• Code-split Your Bundle Into Multiple Chunks
• Defer Any Non-critical Javascript, Including Third-party Scripts, Using Async Or Defer

HOW TO IMPROVE CLS (CORE WEB VITALS SERVICE)

Have you ever been reading an article and, without warning, the text moves? Then you’ve lost your place. Or worse: you’re about to tap a link or a button, but in an instant before your finger lands—ZOOM—the link moves, and you end up clicking something else! Super annoying, right?

Unexpected movement of page content happens when resources are loaded asynchronously, or DOM elements get dynamically added above existing content. The root cause might be an image or video with unknown dimensions, a font that renders at a different size than its fallback, or a third-party ad or widget that resizes itself.

The Cumulative Layout Shift (CLS) metric helps you address this problem by measuring how often it’s occurring for real users.

• Be sure to respect prefers-reduced-motion browser settings, as some site visitors can experience ill effects or attention issues from animation.
• Instead of changing the height and width properties, use transform: scale().
• To move elements around, avoid changing the top, right, bottom, or left properties and use Transform: Translate() instead.

KEEP READING