How To Fix Cumulative Layout Shift (CLS) Issue in WordPress

Last updated on May 21, 2022 | By

Google Core Web Vitals is here. Google launched the Page Experience Signal update, which brings many changes to SERP ranking, as the boost it brings for websites with Good Core Web Vitals

To help improve your Core Web Vitals, pick below the best available optimization tasks for fixing and improving CLS on WordPress.

What is Cumulative Layout Shift (CLS) and how to check yours

Cumulative Layout Shifts measure the visual stability experience of your WordPress website. It happens when a visible element changes its position from one screen frame to another, causing a layout shift, a sudden change of the layout. It could be caused by not properly reserving space for a dynamic element and also other factors.

The Core Web Vitals are ranked as “Good”, “Needs Improvement” or “Poor” scores, together with green, yellow and red colors. These are the labels you’re gonna receive at Search Console, alongside the issue.

CLS Cumulative Layout Shift

To get a CLS “Good” score, pages should maintain a CLS of 0.1 seconds or less. According to Google, a good threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.

How to check your CLS score

As a tip of ours, always check for Core Web Vitals field data, or always strive for results that are from live users. Since Search Console Core Web Vitals data may take a while or be delayed for small website owners, we recommend testing simulating most of your userbase or setting up a tool to capture Core Web Vitals field data.

To get field data we recommend Web Analytics by Cloudflare, which we have a guide for: How To Get Core Web Vitals Field Data

For testing Core Web Vitals lab data and field data(when your website has enough data) use Pagespeed. Go to Pagespeed Insights, do a page test, and go to “CLS” under the results. There are two results, mobile, and desktop, the first we go to is mobile:

image

The mobile largest layout shift with 0.004 seconds CLS in the result above is a <h2> tag, a text element.

image 1

The desktop’s largest layout shift with 0.001 seconds CLS in the result above is two <h2> tags, text elements

To see issues related to the CLS, click on the tab below the screenshots “Show audits relevant to” and click CLS

image 13

Best ways to fix or optimize your CLS in WordPress

After getting field data on Search Console, you’re gonna get Core Web Vitals results. If you’re presented with CLS issues, here are solutions for solving them.

Don’t push content above existing content

It can happen on plugins that use a combination of Javascript code to make an element work. An example is slider plugins.

Consider switching the slider to a simple background image or a CSS-only approach for the slider or a slider with smaller JS code. If you choose on keeping the slider, consider using lazyloading and only into the hidden images of the slider, adding an expectation removing the first image of the slider from lazyloading.

Consider also preloading all the images above-the-fold, and preloading the Javascript from the slider.

The incorrect styling of your header, placing CSS code after the style was fully loaded, can also cause CLS.

Apply correct image and div sizing

Use size attributes on images. Wp Rocket offers a feature to add missing size attributes. Test wisely:

improve core web vitals

Use min-height and min-width CSS code to reserve space for an element, especially ads(Adsense) blocks.

Setup Critical CSS

Consider a critical CSS plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages. You can also use WP Rocket and its Optimize CSS delivery feature.

If you haven’t bought Wp Rocket yet, consider using my reflink.

How to fix CLS caused by WP Rocket Critical CSS

If you are using WP Rocket ‘Optimize CSS’ feature to improve Core Web Vitals and are having CLS issues, you can try the following to fix it:

  1. Add the following code to your WordPress functions.php file, or use a plugin such as Code Snippets to remove the CSS from the plugin causing high CLS:
add_filter('rocket_exclude_async_css', function($excluded_files = array()) {
	$excluded_files[] = '/wp-content/plugins/plugin_causing_high_cls/css/style.min.css';
	return $excluded_files;
});
image

In our tests, we had a custom hook element of GeneratePress causing high CLS when using Critical CSS.

We removed ‘main.min.css’ using the filter and it solved the high CLS while keeping the low LCP from using critical CSS aka Critical Path CSS(CPCSS).

This filter may fix Elementor CLS issues when using Wp Rocket’s Optimize CSS feature.

Move your CSS from theme editor to child theme style.css or main theme style.css file

If you are using large CSS styling on the theme built-in CSS editor or in the WordPress Customize “Additional CSS” section, you may move the CSS from those to the main theme CSS file (style.css) or the child theme.

Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes

Consider plugins that have transform CSS animations. Examples of transform CSS styling:

transform: rotate(0.5turn)

Ask the theme/plugin developer to update and implement those css properties as part of the animations if possible.

Limit access from a region with failing Core Web Vitals

Limit access to a region where you’re failing Core Web Vitals. Install and set up Cloudflare Web Analytics. With the data available, you can define if some country is contributing to lowering the Core Web Vitals. Install Cloudflare DNS and block the region via firewall rules.

Leave a Comment