What are Core Web Vitals?

Reading time: 5 minutes

You’re probably familiar with Core Web Vitals and didn’t even know it. If you own a website, you’ve most likely visited PageSpeed Insights to see how your website’s page experience is performing according to Google’s standards. PageSpeed Insights (PSI) reports on the performance[1] of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved — part of the metrics they use are Core Web Vitals.

In May 2020, Google announced that page experience signals will be included in Google Search Ranking. The new page experience signals combine Core Web Vitals with their existing search signals of mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines. Rolling out in May 2021, it’s important that you assess your website to align with Core Web Vitals. These new signals include:

Largest Contentful Paint (LCP)LCP is the time it takes for a page’s main content to load. This content could be the largest image, video, or text in the viewport. According to Google, an ideal LCP measurement is 2.5 seconds or faster. 


Source: Google Developers

Cumulative Layout Shift (CLS)CLS refers to the time it takes for a page to become interactive and stable. You may have come across a site and as soon as you start interacting with the page, the page layout shifts — this is considered a poor user experience.

Source: Google Developers

First Input Delay (FID) – The third signal Core Web Vital measures is FID, the time from when a user first interacts with your site (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 respond to that interaction. An ideal measurement is less than 100ms.

Source: Google Developers

How do Core Web Vitals impact publishers?

The purpose of page experience is to create a better web. If publishers choose to not follow the new page experience signals, it’ll impact their Google Search ranking, overall page speed and in turn, their ad revenue. So, how can publishers minimize the impact of these signals? Let’s take a look at each Core Web Vital.

To optimize LCP, you can address:

  • Slow server response times: The longer it takes a browser to receive content from the server, the longer it takes to render anything on the screen. Fix this by optimizing your server, implementing a content delivery network (CDN), and caching assets more efficiently. 
  • Render-blocking JavaScript and CSS: To simplify it, render-blocking Javascript and CSS are files that prevent a website from displaying a web page before loading these files. Defer any non-critical Javascript and CSS to increase speed of the main content of your web page. You can do this by minifying CSS, and deferring non-critical CSS and in-line critical CSS.
  • Resource load times: Resource load time looks into the time it takes to load many other types of resources that can affect paint times aside from Javascript and CSS. Tactics to reduce resource load times can include optimizing and compressing images and text, caching assets, and preloading important resources.
  • Client-side rendering:When building a client-side rendered site, it’s important to have optimizations in place or users may not see or interact with any content on the page until all the critical JavaScript has finished downloading and executing. Optimize client-side rendering by minimizing critical Javascript, and using server-side rendering and pre-rendering.

For CLS, look at optimizing:

  • Image dimensions: It’s vital to include height and width for images to ensure that the browser can allocate the correct amount of space in the document while the image is loading.
  • Ads, embeds, and iframes dimensions: Similar to images with dimensions, ads, embeds, and iframes should each include height and width to ensure the browser can allocate space and reduce shift.
  • Dynamically-injected content: According to Google, publishers should avoid inserting new content above existing content, unless in response to a user interaction. This ensures any layout shifts that occur are expected.
  • Web fonts causing FOIT/FOUT: To minimize any layout shifts caused by web fonts, publishers should use a preloaded font to have a higher chance of meeting the first paint.

You can address FID by: 

  • Breaking up long tasks: Break down long-running code into smaller, asynchronous[2] tasks to reduce input delay on your site.
  • Optimizing your page for interaction readiness: JavaScript size bloat, heavy execution times, and inefficient chunking can slow down how soon a page can respond to user input and impact page experience. 
  • Using a web worker: A blocked main thread is one of the main causes of input delay. Prevent this by using a web worker, which makes it possible to run JavaScript on a background thread. 
  • Reducing Javascript execution time: Limit the amount of JavaScript on your page to reduce the amount of time that the browser needs to spend executing JavaScript code. This speeds up how fast the browser can begin to respond to any user interactions. You can reduce Javascript execution time by deferring unused Javascript and minimizing unused polyfills. 

What can you do to get ready for Core Web Vitals?

To get ready for these changes, publishers can use a variety of tools provided by Google to start improving their page experience. 

  1. Create a site-wide audit using Search Console’s report for Core Web Vitals to give you an overview of how your site is doing and a deep dive into issues. 
  2. Fix issues uncovered by PageSpeed Insights and Lighthouse. Head over to web.dev/vitals-tools for a round-up of all the tools you need to get started.
  3. Consider implementing AMP to achieve great page experience outcomes that have been proven by Google’s AMP team.

Conclusion

It’s clear to see that the Google algorithm is slowly moving towards a more user-centric approach when it comes about ranking web pages. Based on these Core Web Vitals, main content loading time, first input delay and visual stability will be rewarded with higher positions for websites that do well. If your company values its search presence or wants to generate leads from Google searches, the sooner you make these improvements, the better advantage against your competitors. Don’t wait too long before making these updates!

Terms
1. performance. A form of advertising in which the purchaser pays only when there are measurable results.
2. asynchronous. Asynchronous rendering loads the page content independently from the ads. This means that if for some reason a creative takes a while to load, the page content will continue loading regardless.

Recent Articles

Related Articles

Stay connected

Don't miss out on the latest news, events and special announcements.

By submitting this form, you agree that you've read and accept our Privacy Policy as well as to receive communications from HeaderBidding.com. You may unsubscribe at any time.