Google Core Web Vitals and CLS

Starting in May 2021, "Page Experience" is going to become a ranking factor in Google's mobile search algorithm. In this article, we'll discuss these changes in the context of our themes and WordPress as a whole.

Core Web Vitals

Page Experience is how a user perceives their experience on a website. This includes how quickly the page loads, how mobile friendly the page is, and if content jumps around the page as the website is loading. These are the "vitals" that Google will evaluate beginning in May, dubbed  Core Web Vitals. Please note that Core Web Vitals are only going affect mobile search results.

While your theme does play a role in Page Experience, there are many other factors that contribute.

Largest Contentful Paint (LCP) and First Input Delay (FID)

The Largest Contentful Paint refers to how quickly your site loads (site speed). The First Input Delay refers to how quickly your site becomes usable/interactive.

The biggest determining factors in site speed are typically:

  1. Your web host — If you're on Bluehost, HostGator, or another low-end shared host, your site speed is often going to be pretty slow. Suggestion: Switch to a managed WordPress host, such as Kinsta or WPEngine. If a managed WordPress host is outside of your budget, our favorite shared host is SiteGround. They consistently have the fastest servers out of the shared hosts we've worked with.
  2. Plugins — A large number of plugins contribute negatively to site speed by adding a lot of extra code and Javascript to your website, all which has to be loaded when a user visits your site. The less that has to be loaded when a user visits your site, the quicker your site will load. Suggestion: perform a plugin audit.
  3. Advertisements — Similar to plugins, ads load in Javascript and images, which will cause the page to load more slowly.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift is all the buzz right now. CLS refers to how much your page shifts or moves around when loaded. CLS can be caused by numerous different things:

Advertisements

Ads are one of the biggest culprits behind layout shift. This is not theme related and would need to be discussed with your ad network.

Fonts

Google Fonts or custom fonts in your theme are going to cause some degree of layout shift, no matter what. If a perfect CLS score is important to you, consider removing Google Fonts and switching to system-based fonts only (think Arial, Times New Roman, Trebuchet, etc). Keep in mind this will affect the appearance of your theme.

Images

Lazy-loaded images or images delivered via CDN will contribute to CLS.

Plugins

Some plugins can significantly change the way your site loads and how users interact with your page. We are not responsible for CLS caused by third-party plugins, and recommend you contact the plugin developer(s) with any questions. 

Theme

The biggest cause of CLS in our themes is the fade-up effect on the homepage in our Premium WordPress Themes. The fade-up effect, by its very nature, shifts elements on the page.

Several of our themes have already been updated to remove the fade-up effect on mobile devices. By April 2021, all of our themes will have been updated to remove the fade-up effect on mobile.

If you would like to remove the fade-up effect on both desktop AND mobile, click here for instructions.

Other Google page speed factors

If you run your website through Google Pagespeed Insights, there are several other variables that may be displayed. Most are unrelated to your theme. We'll go over some of the common ones below:

  • Serve images in next-gen formats — Google prefers images in the following formats: JPEG 2000, JPEG XR, and WebP.
  • Remove unused CSS and Javascript — This can sometimes be correctly flagged, but there are often files listed here that are being used by your theme and/or plugins. Suggestion: use WP Rocket to remove or combine unused CSS and Javascript files. Please make a backup of your website prior to removing or combining files.
  • Use HTTP/2 — HTTP/2 can only be implemented on the server level (i.e. via your web host). See here for more information on HTTP/2.
  • Eliminate render-blocking resources — This is largely unavoidable, unless you are prepared to remove core theme features like fonts, icons, menus, and other Javascript-based features. WP Rocket can help with this to a degree by deferring Javascript files and loading them later, however doing so can contribute to CLS.
  • Preload key requests — This is sometimes flagged in our themes that use custom fonts (currently Charlotte, Harper, and Mia themes). Suggestion: remove the custom fonts from your theme, or use WP Rocket to preload the custom font(s).
  • Minify CSS and Javascript — We typically discourage minifying the CSS; doing so can break theme features. Additionally, site speed improvements are often negligible with non-minified vs minified CSS. But you are welcome to experiment with enabling CSS minification and see if it works for your site. If anything looks wonky on your site after enabling minification, just disable it (CSS minification will sometimes strip out the entire style.css file, which is what controls the appearance of your theme!). JS minification is usually fine, but again, proceed with caution and disable it if you're noticing issues.