What are Core Web Vitals and Content Layout Shift?

Over the last several months you may have heard of the terms “Core Web Vitals” and “Content Layout Shift” and wondered what exactly they mean. If you’re a bit confused by these new terms, congratulations! So are we!

In all honesty, when Google makes algorithm changes, most developers and designers don’t fully understand what it all means and how it’s configured.

At their core these are all about speed and performance, which are not only important for your user experience, but are really important for SEO ranking. As we all know, Google takes site speed very, very seriously.

In this article, we hope to de-mystify what we’ve learned about Google’s new metrics. This is not an exhaustive tutorial, but it is our hope that we can provide enough information to get you going in the right direction to having a great performing website and getting an amazing CWV score.

Core Web Vitals

So what exactly are Core Web Vitals? They are a set of scores used to reflect the actual experience a user receives when visiting your site. These scored, or “vitals,” are made up of three different metrics:

Largest Contentful Paint (LCP) – how long it takes for the largest element on your page to load, i.e. a hero image, slider, etc.; a good score is within 2.5 seconds.

First Input Delay (FID) – this measures how much time it takes between when a user clicks a link to your page and your page actually loads and the user can interact with it; a good score is less than 100ms.

Cumulative Layout Shift (CLS) – how visually stable the page is – does any content “jump around” as the page loads; a good score is less than 0.1.

A VERY IMPORTANT NOTE: Core Web Vitals are assessed over a 28-day collection period. If you make a change to your website to improve your score, the result of these changes will not be immediately available.

While the theme does play a small role in these metrics, there are many other factors that have a greater contribution to producing good scores. Here’s how can you ensure that your site loads quickly and is immediately usable/interactive to your readers:

Use an excellent web host. The most popular shared web hosts on the market such as BlueHost, HostGator, GoDaddy, etc., are the most popular for one reason: they are inexpensive. Unfortunately, what you don’t pay for on the front end in hosting costs, will cost you on the backend with site speed and performance. We recommend Siteground and BigScoots. If having the best performance is in your budget, go with a managed WordPress plan with BigScoots or WPEngine.
Evaluate your plugins. Plugins are amazing tools for providing additional functionality to your site, however, you want to make sure that they are only doing what you need them to do and nothing more. Plugins that promise to do “all the things” ultimately hurt your site more than help it. Stick with plugins that perform one main function. Remember, every plugin you use adds code to your website that has to be loaded each time a user visits your site. Keep that load as light as possible.
Images. It is vitally important that all images are optimized and compressed. You can do this outside of WordPress through your image processing program, or within WordPress with plugins such as ShortPixel or Imagify.
Advertisements. All ads are rendered in Javascript with images and video. These can cause the page to load more slowly. Work with your ad manager to make sure that everything is optimized.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) seems to be the most popular metric for our customers. If you’ve visited a website and experienced an image loading on one part of the screen, followed by another piece of content, then all of a sudden everything seems to “jump” into place, this is because of CLS. There are many opportunities for your content to cause this shift including the following:

Images: Images that are lazy-loaded (they don’t appear until the screen is scrolled up) and images that are served from a Content Delivery Network (CDN) can contribute to CLS.

Fonts: Google and custom fonts will cause a minor shift, but not enough by themselves to render a less than good score. All of our themes use Google fonts. If having a perfect score of 100 is a priority, you’ll want to consider changing all your fonts to system based fonts such as Arial, Courier, Georgia, Tahoma, Times New Roman, Verdana, etc.

Advertisements: As mentioned above, ads are one of the biggest culprits of site speed issues. Work with your ad manager on optimizing these.

Plugins: Our Genesis themes do use several plugins for added functionality. We are not responsible for any CLS issues caused by these plugins. If you find that one is creating an issue, please contact the plugin developer directly.

Below are some other articles that you may find helpful: