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:
- 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.
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:
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.
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.
Lazy-loaded images or images delivered via CDN will contribute to CLS.
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.
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.
- 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.
- 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).